Активировать JQuery UI виджеты в динамически загруженной форме

Question

Какова наилучшая практика активации виджетов jquery ui для html, загруженных и вставленных в документ с помощью ajax?

Я сторонник ненавязчивого javascript и твердо убежден, что все функции, доступные через javascript, также должны быть доступныбез этого.Таким образом, в идеальном случае каждая форма, которая открывается во всплывающем окне, должна также иметь свою отдельную страницу, и ссылки на них должны быть заменены загрузкой ajax на основе javascript.

Я считаю этот шаблон очень полезным для загрузки и вставкичасть другой страницы в текущем документе:

$('#placeholder').load('/some/path/ #content>*');

Или, чтобы сделать его более универсальным:

$('a.load').each(function() {
    $(this).load($(this).attr('href') + ' #content>*');
});

Однако я также хотел бы активировать JavaScript с динамически загружаемой страницы, чтобы разные виджеты функционировали правильно.

Я знаю, я мог бы добавить эти javascript-коды к текущему документу и активировать их все в обратном вызове .load(), или я мог бы использовать $.get(), чтобы получить JSONс html и javascripts отдельно, но я думаю, может быть более элегантное универсальное решение для этого.

Что бы вы порекомендовали?

Кстати, я использую Django в бэкэнде.

Answer 1

Я использовал опцию «load», которую можно указать в виджетах jquery.ui.К сожалению, это плохо документировано, поэтому вы не увидите здесь опцию: http://jqueryui.com/demos/tabs/#options, например, но вы увидите ее здесь: http://jqueryui.com/demos/tabs/#method-load

Для большинствачасть, у каждого из методов, которые вы вызываете, есть начальная опция, которая может быть установлена, что побудило меня попробовать использовать загрузку.

В моем собственном приложении у меня есть 3 уровня вложенных вкладок, которые создаютсядинамически через AJAX.Чтобы динамически применять javascript для каждой вкладки, у меня есть вложенные функции загрузки, которые сначала запускаются при загрузке документа.

Итак, мой файл шаблона имеет:

<script type="text/javascript" src="{{ MEDIA_URL }}js/tabs.js"></script>
<script type="text/javascript">
$(function() {  
    $('.overall_tabs').tabs({
        load: initializeOverallTabs
    });
});
</script>

Мой файл tabs.js содержит:

function initializeOverallTabs(event, ui){
    ...
    $('.lvl_two_tabs').tabs({
        load: initializeTabLevel2
    });
    ...
}

function initializeTabLevel2(event, ui){
    ...
    // So on and so forth
    ...
}

Кроме того, я рекомендую при работе внутри загруженных областей, чтобы ваши ссылки были специфичными для этой панели.Это было чрезвычайно важно при работе с вкладками.Лучший способ сделать это - ниже.

В вашем файле tabs.js:

function initializeOverallTabs(event, ui){
   $panel = $(ui.panel);
   $panel.find('lvl_two_tabs').tabs(...);
}

Я нашел этот вопрос странным совпадением!Недавно я объяснил свое решение нескольким разработчикам в той же ситуации с той же средой Jquery / Django.Я надеюсь, что это помогло!

Answer 2

Вопрос в том, как вы активируете свой JavaScript в настоящее время.Если вы делаете что-то вроде:

$(document).ready(function() {
      $('a.foo').click(function() { ... });
  })

Вы можете рассмотреть возможность изменения:

$(document).ready(function() {
      $('a.foo').live('click', function() { ... });
  })

Таким образом, когда загружаются новые объекты DOM, присоединяются обработчики событий.

Answer 3

Один из способов, с помощью которого я решил обработать виджеты с внешних страниц, - это анализ HTML-кода другой страницы, поиск сценариев и их выполнение на текущей странице.

Например, существует форма с виджетом автозаполненияна другой странице, которая загружается и вставляется на эту страницу.Виджет автозаполнения должен быть активирован с определенными свойствами, такими как доступные варианты:

<script type="text/javascript">
//<![CDATA[
$(function() {
    $("#colors").autocomplete({
        source: ['red', 'green', 'blue', 'magenta', 'yellow', 'cyan']
    });
});
//]]>
</script>

Тогда на текущей странице у меня может быть следующий скрипт, который загружает HTML и дополнительно собирает все javascript-скрипты внутри него и выполняет их:

var oRe = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
$('#placeholder').load(
    '/some/path/ #content>*',
    function(responseText, textStatus, XMLHttpRequest) { // <-- callback function
        var sScripts = "";
        responseText.replace(
            oRe,
            function($0, $1) {
                sScripts += $1;
                return $0;
            }
        );
        eval(sScripts);
    }
);

Один недостаток заключается в том, что текущий документ должен изначально загружать все библиотеки, которые могут появиться во включенных формах.Например, в этом случае это будет jquery-ui, включающий виджет автозаполнения.Полагаю, я мог бы расширить код путем поиска тегов сценариев, которые загружают внешние сценарии, и загрузки их в текущий документ, если их нет.