JQuery загрузки контента не удается во всех IE

Question

Я новичок в Ajax, так что это мой первый проект с jquery load ().

Я выполнил эту пошаговую инструкцию http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/, и это кажется очень простым. Результат: работает с Webkit и Gecko, но IE 7 + 8, какой сюрприз, они не загружают контент. Демонстрация nettuts делает это в IE, так что, черт возьми, я сделал не так?

Код:

// 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;
});

Примечание: dynHeights () помогает изменять высоту границ теней и не должна быть частью проблемы

есть идеи? будет признателен.

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)
    }
});

Вышесказанное не имеет смысла. Для каждого "li a" внутри ".mainNav" вы загружаете некоторый удаленный сайт и помещаете его в "#content". Если у вас есть 4 якоря в ".mainNav", вы делаете 4 AJAX-запроса, но показывает только тот, который заканчивается последним (даже не гарантируется, что он последний ... это состояние гонки).

Возможно, вы захотите сделать это для события click (в этом случае замените «каждый» на «клик», или хотите сделать это только для определенного элемента; в этом случае ограничьте его с помощью селектора, например *). 1005 * ": первый" , ": последний" или ": eq" .

---

Линия var toLoad = hash + ".html #content"; будет работать, но не используя ожидаемое поведение.

Предполагая, что хеш является значением, таким как "http://www.google.co.uk",, в результате вы получите toLoad, равное:

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

Первая часть - это недействительный URL, который никогда не будет работать. Второй - это селектор jQuery, в который будет помещен ответ.

Вы, вероятно, после var toLoad = hash + " .html #content" (обратите внимание на добавление пробела), однако "#content" должен быть уникальным на странице, поскольку идентификаторы никогда не должны дублироваться, поэтому это можно упростить до:

var toLoad = hash + " #content";

---

var toLoad = $(this).attr('href') + "#ajaxedContent"; страдает от той же ошибки, что и раньше, и, вероятно, должно быть var toLoad = $(this).attr('href') + " #ajaxedContent";.

---

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

Выше не будет работать, как вы ожидаете. Ваш вызов load предоставляет 3 аргумента:

1. Переменная toLoad
2. Пустая строка
3. Результат showNewContent () (который не определен), а НЕ функция showNewContent, как вы, без сомнения, ожидаете.

Вероятно, должно быть:

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

Исправление этих ошибок, мы надеемся, решит проблемы, с которыми вы столкнулись в IE.