.load not working in IE8

Question

I have been looking into this issue for the past few days and cannot figure it out. The code below, searches an external file for content based off current page class, then loads content into any matching ID's on the page. It works in Chrome, Firefox, IE9 but recently stopped working in IE8 and I cannot figure out why. Any thoughts would be much appreciated.

HTML looks like this

<body class="jms">
    <div id="mainHomeContent" class="shared"></div>
</body>

jquery running on ready

$("div.shared").each(function(){
        var Body = $(document).find("body");
        var contentID = ("#" + $(this).attr("id"));
        var pathname = ""

        if(Body.hasClass("pigman")){
            var pathname = "/dev/jmsracing/content/pigman/shared-content-include.html"
        } else if(Body.hasClass("marion-arts")){
            var pathname = "/dev/jmsracing/content/marion-arts/shared-content-include.html"
        } else if(Body.hasClass("jms")){
            var pathname = "/dev/jmsracing/content/jms/shared-content-include.html"
            alert('hello');
        }

        $(contentID).load(pathname + " " + contentID);  
    });

ur missing a semicolon after 'var pathname = ""' is that mistake in the code you're running? — KTastrophy, Dec 21 '12 at 17:37
Are there errors in the console? Is the Ajax request correct? — epascarello, Dec 21 '12 at 17:44
may be this will help: http://stackoverflow.com/questions/1061525/jquerys-load-not-working-in-ie-but-fine-in-firefox-chrome-and-safari — Jai, Dec 21 '12 at 17:52
Ill try the below solutions.. Thanks. The odd thing of it all, is there are no errors being thrown. — trobbins26, Dec 21 '12 at 18:20

score 2 · Answer 1 · answered Dec 21 '12 at 18:00

What i think is he is iterating with same id where ie is very strict about it so this should be the solution:

$(function() {
    var Body = $(document).find("body");
    var contentID = ("#" + $(this).attr("id"));
    var pathname = ""

    if (Body.hasClass("pigman")) {
        var pathname = "/dev/jmsracing/content/pigman/shared-content-include.html"
    } else if (Body.hasClass("marion-arts")) {
        var pathname = "/dev/jmsracing/content/marion-arts/shared-content-include.html"
    } else if (Body.hasClass("jms")) {
        var pathname = "/dev/jmsracing/content/jms/shared-content-include.html"
        alert('hello');
    }

    $(contentID).load(pathname + " " + contentID);
});

score 1 · Accepted Answer · answered Dec 21 '12 at 17:48

Try this:

$("div.shared").each(function () {
    //combined into one var statement...not really necessary.
    var $body = $("body"),
        contentId = "#" + $(this).attr("id"),
        pathname = "";

    //you've declared pathname above no need for "var" each time below
    //also added missing semi colons
    if ($body.hasClass("pigman")) {
        pathname = "/dev/jmsracing/content/pigman/shared-content-include.html";
    } else if ($body.hasClass("marion-arts")) {
        pathname = "/dev/jmsracing/content/marion-arts/shared-content-include.html";
    } else if ($body.hasClass("jms")) {
        pathname = "/dev/jmsracing/content/jms/shared-content-include.html";
        alert('hello');
    }
    // $(this) and $(contentId) are the same element 
    // since you are getting the "id" from "this"
    // us $(this) instead
    $(this).load(pathname + " " + contentId);  
});

@Jai - he does not redfine pathname 4 times, does not use an inefficient selector for the body and properly passed jslint — Mark Schultheiss, Dec 21 '12 at 17:54
So it was mainly just cleanup. Thanks for the help. Both are great Answers. In addition i changed $(this).load(pathname + " " + contentId + "Content"); So the loaded div will not have the same name. Thanks again — trobbins26, Dec 21 '12 at 18:31

.load not working in IE8

2 Answers2