jQuery load content failing in all IE's

Question

Hello! I'm a newb in ajax stuff, so this is my first project with jquery load().

I did this step-by-step instruction http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ and it seems to be so easy. The result: works with Webkit and Gecko, but IE 7 + 8, what a surprise, they load no content. The demo of nettuts do it in IE, so what the hell did I wrong?

The code:

// Check for hash value in URL
var hash = window.location.hash.substr(1);

// load content
var href = $(".mainNav li a").each(function() {
    var href = $(this).attr('href');
    if (hash == href.substr(0,href.length-5)) {
        var toLoad = hash + ".html #content";
        $("#content").load(toLoad)
    }
});

$(".mainNav li a").click(function(){
    var toLoad = $(this).attr('href') + "#ajaxedContent";

    $("#content").fadeOut(300,loadContent, function(){
        dynHeights();                                               
    });

    $("#load").remove();
    $('#logo').append('<div id="load"></div>');
    $("#load").fadeIn(100);

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

    function loadContent() {
        $("#content").load(toLoad,'',showNewContent())
    }

    function showNewContent() {
        $("#content").fadeIn(300, function() { 
            dynHeights();
            hideLoader();
        });
    }

    function hideLoader() {
        $("#load").fadeOut(300);
    }

    return false;
});

Note: the dynHeights() helps to change heights of shadow borders and should not be part of the problem

any ideas? would be appreciated.

Answer 1

// load content
var href = $(".mainNav li a").each(function() {
    var href = $(this).attr('href');
    if (hash == href.substr(0,href.length-5)) {
        var toLoad = hash + ".html #content";
        $("#content").load(toLoad)
    }
});

The above makes no sense. For each "li a" within ".mainNav", you're loading some remote site, and placing it in "#content". If you have 4 anchors within ".mainNav", you're making 4 AJAX requests, but only showing the one that finishes last (it isn't even guaranteed to be the last li... it's a race condition).

Maybe you want to do this on a click event (in which case change "each" to "click", or only want to do this on a particular element; in which case limit it using a selector such as ":first", ":last" or ":eq".

---

The line var toLoad = hash + ".html #content"; will work, but not using the behaviour you're expecting.

Assuming hash is a value such as "http://www.google.co.uk", you're ending up with toLoad equaling:

"http://www.google.co.uk.html #content."

The first part is an invalid URL, which wont ever work. The second is the jQuery selector that the response will be placed within.

You're probably after var toLoad = hash + " .html #content", however "#content" should be unique on the page, as ID's should never be duplicated, so this can be simplified to just:

var toLoad = hash + " #content";

---

var toLoad = $(this).attr('href') + "#ajaxedContent"; suffers from the same error as before, and should probably be var toLoad = $(this).attr('href') + " #ajaxedContent";.

---

    function loadContent() {
        $("#content").load(toLoad,'',showNewContent())
    }

The above will not work as you expect. Your call to load provides 3 arguments:

1. The variable toLoad
2. A blank string
3. The result of showNewContent() (which is undefined), NOT the function showNewContent as you are no doubt expecting.

It should probably be:

    function loadContent() {
        $("#content").load(toLoad,'',showNewContent)
    }

Fixing this mistakes will hopefully resolve the issues you're having with IE.