JQuery AJAX с удаленным HTML, содержащим JS - PullRequest
Новая
       11

JQuery AJAX с удаленным HTML, содержащим JS

0 голосов
/ 13 ноября 2009

У меня есть настройка страницы, которая использует jQuery + AJAX для загрузки контента в рамку аккордеона. Он отлично работает для загрузки простого текста / HTML, но теперь мне нужно загрузить Javascript вместе с HTML.

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

Есть ли более чистый метод .load () для файла HTML, а затем для eval ()? Я попытался поместить код GalleryView на главную страницу (с аккордеоном) в обратном вызове функций load () в надежде, что он сможет инициализировать плагин GalleryView, но безуспешно.

Ответы [ 3 ]

2 голосов
/ 13 ноября 2009

Вы можете использовать плагин LiveQuery. В вашем исходном или «основном» файле, в который загружается другое содержимое, вы привязываете свой код к тем элементам, которые загружаются. Плагин будет определять, когда содержимое загружается, и выполнять код.

JQuery: 

$(document).ready(function(){
    $('#gallery').livequery(function(){
        $(this).galleryView();
    });
});

Доступен плагин: http://plugins.jquery.com/project/livequery/

1 голос
/ 13 ноября 2009

Мой новый ответ ...

Livequery не требуется. Ваш браузер отстает, потому что по какой-то причине плагин galleryView и livequery вызывают бесконечный цикл. Вероятно, просто какая-то несовместимость (я не стал вдаваться в подробности, когда понял, что это вызывает бесконечный цикл).

Используйте это: 

$(document).ready(function(){

    $('#content').load('theOtherFile.html', function(){

        $(this).find('#gallery').galleryView(); 

    });

});

Это использует метод обратного вызова, который позволяет реализовать функция .load (). Когда вызов ajax завершен и контент загружен, он вызовет функцию обратного вызова. Затем вы можете выполнить поиск "this", который является #content div, для вашей теперь загруженной #gallery UL. Я также заметил, что у вас есть два $ (document) .ready (function () {}); использует. Вы действительно должны использовать только один из них.

0 голосов
/ 13 ноября 2009

Load автоматически отфильтрует все, кроме тега body в документе. Если у вас есть javascript в заголовке документа, он не будет загружен вместе с документом. Попробуйте переместить ваш javascript в тег body и посмотрите, работает ли он.

В jQuery 1.2 теперь вы можете указать Селектор jQuery в URL. Делать это будет фильтровать входящий HTML документ, только вставка элементов которые соответствуют селектору. Синтаксис выглядит примерно так: "url #some> селектор ". Селектор по умолчанию" тело> * " всегда применяется. Если URL содержит пространство должно быть escape () d. Увидеть примеры для получения дополнительной информации.

Обновлено на основе комментариев

Вам необходимо загрузить CSS с базовой страницей. Поскольку тег link должен находиться в элементе head, нет простого способа загрузить его через AJAX. Вы можете добавить ссылку на заголовок документа, но для получения ссылки на ссылку, вероятно, потребуется отдельный вызов или изменение для возврата ссылки и html, обернутого как объект json. Лучше просто включить CSS в основной документ.

Я думаю, что если вы вернули только следующий контент из вашего вызова AJAX, он должен работать. 

<ul id="gallery">
   <li><span class="panel-overlay">This is an overlay</span><img src="img1.jpg" alt="test1" title="test1" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img2.jpg" alt="test2" title="test2" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img3.jpg" alt="test3" title="test3" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img4.jpg" alt="test4" title="test4" /></li>
</ul>

<script type="text/javascript">
$(function() {
    $('#gallery').galleryView(
    {
        panel_width: 474,
        panel_height: 353,
        frame_width: 50,
        frame_height: 50,
        transition_speed: 350,
        easing: 'easeInOutQuad',
        transition_interval: 0
    });
});
</script>
...