Использование методов JQuery в коде, загруженном из Ajax в Internet Explorer

Question

У меня есть страница с боковой панелью и центральным разделителем. Когда главная страница загружается, она заполняет боковую панель и выполняет ajax-вызов, чтобы получить соответствующий контент для центрального div. После загрузки содержимого ajax я использую два плагина jquery - один для вкладок, другой для форм. В Firefox и Chrome все работает хорошо. Но в Internet Explorer 8 появляется прекрасная ошибка: объект не поддерживает это свойство или метод.

var url = '/instances/edit/' + instance_id + '/1';


$('#frame_content').load(url, function() {

    $("ul.tabs").tabs("div.panes > div.pane", {history:true});
    $('#InstanceEditForm').ajaxForm(function(responseText) {

            ....

    });

});

Я попытался удалить вызов tabs и вызов ajaxForm и попробовать их по отдельности, но они оба не удаются Я заметил, что если страница редактирования вообще не загружает никакого контента, вкладки и ajaxForm вызывают один и тот же метод; поэтому моя первая догадка заключалась в том, что это было время, а необходимые элементы Dom еще не загружены. Но предупреждение перед вызовом вкладок не помогает. Есть ли что-то волшебное, что я должен сделать, чтобы использовать вызовы jQuery на страницах, которые обрабатываются вызовом ajax?

Answer 1

Я бы сказал, что вы правы, потому что элементы DOM не загружены, функция обратного вызова запускается сразу после успешного вызова AJAX, и это может произойти до полной загрузки страницы. Можно ли добавить эти функции в HTML-код IFRAME и вызывать их с помощью $ (document) .ready (function () {..});

Answer 2

Ну, после многих часов работы я наконец все разобрался. Это было каскадное число вещей.

1. Файлы JavaScript для вкладок были включены на страницу, которая содержала вкладки. Эти включаемые файлы не включались в IE после вызова ajax. Итак, первым шагом было перемещение включаемых файлов на главную страницу. Затем мои вкладки сработали.

2. Однако форма не будет отправлена. Я преобразовал его обратно в обычную форму, без представления ajax, и он все равно не будет работать. Дальнейшая проверка показала, что при использовании метода jquery.html () для заполнения div удаляются теги формы в IE. Кроме того, все, что выше тега формы, также было удалено. Вместо этого я использовал старый добрый javaScript innerhtml. Затем, конечно же, вызов для рендеринга вкладок снова не удался.

3. Итак, вызов для отображения вкладок, который я переместил на страницу, отображаемую с помощью вызова ajax во время предыдущего устранения неполадок, должен был вернуться.

И, окончательный код выглядит так:

$('#flashMessage').css('display', 'none');
    var nav_url = '/instances/get_sections/' + instance_id;
    var stop = 0;
    $('#navigation').load(nav_url, function() {


        var url = '/instances/edit/' + instance_id + '/1';

        $.get(url, function(data) {

            document.getElementById('frame_content').innerHTML = data;
            $("ul.tabs").tabs("div.panes > div.pane", {history:true});
        });
    });

Answer 3

Вам следует обернуть этот код, чтобы он выполнялся после полной загрузки DOM:

$(function () {
 // Put code here
});

http://api.jquery.com/ready/