load css files after $.ajax complete

Question

i am getting content from server by $.ajax. And those content is html strings, they have their owen style, following is my codes:

 <script src="jquery-1.7.1.js" type="text/javascript"></script>
<link href="Default.css" rel="stylesheet" />
<link href="all.css" rel="stylesheet" />
<script type="text/javascript">
    var dataStr = "indexOfStart=" + 0;
    $(document).ready(function () {

        $("#idgetData").click(function () {
            $.ajax({
                type: "post",
                url: "http://localhost:1897/Content/Services/Service1.asmx/GetArticlesDuring",
                dataType: "jsonp",
                data: { indexOfStart: 0, indexOfEnd: 20 },
                jsonp: 'back',
                success: function (result) {
                    var res = decodeURIComponent(result.Result);
                    document.getElementById("content").innerHTML = res;

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    targetDiv = $("#data");
                    if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {
                        targetDiv.replaceWith("请求数据时发生错误！");
                        return;
                    }
                    if (textStatus == "timeout") {
                        targetDiv.replaceWith("请求数据超时！");
                        return;
                    }
                },
                complete: function () {
                    //addStyle("Default.css");
                    //addStyle("all.css");
                    document.write('<link href="Default.css" rel="stylesheet" /><link href="all.css" rel="stylesheet" />');
                }
            });
        });
    });
function addStyle(stylePath) {
        var container = document.getElementsByTagName("head")[0];
        var addStyle = document.createElement("link");
        addStyle.rel = "stylesheet";
        addStyle.type = "text/css";
        addStyle.href = stylePath;
        container.appendChild(addStyle);
    }

the problem is the content's style can not be loaded and work, can anyone help me please?

BrotherBallan · Accepted Answer · 2013-07-10 15:34:53Z

3

You shouldn't need to load the styles after the request finishes, as once css is loaded, it'll apply styles for new elements as well. But you could append the css stylesheet to the head in the complete event handler if you wanted to.

answered Jul 10, 2013 at 15:34

BrotherBallan

3692 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

francis Over a year ago

yes,you are right. i find the problem is in the content strings with html in it i got,before the style classes name, there is "+"(plus).it is because in C# code for send content, i used "Server.UrlEncode(string)", it will cause "+" problem. and i find the solution as that : in c# code, i use "Microsoft.JScript.GlobalObject.encodeURIComponent(string)" for encode html content, in client js code, i use "decodeURIComponent" to decode. so perfect way,it is OK now. and thank U so much!

BrotherBallan Over a year ago

I'm glad I was able to help, it is no problem

Aaron Digulla · Accepted Answer · 2013-07-10 15:38:05Z

1

In your code, you just load the styles again that you already have. If the new HTML content has new CSS styles (i.e. they are neither in Default.css nor in all.css), you need to put them in a new stylesheet or a new inline <style> element and add that to document.

answered Jul 10, 2013 at 15:38

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

2 Comments

francis Over a year ago

thank U , i find the solution, and i find some interesting things, you can get it by seeing the first answer's comment!

JAYD3V Over a year ago

Your nearly 7 year old answer helped, TY.

Collectives™ on Stack Overflow

load css files after $.ajax complete

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related