Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Перестает работать слайдер после AJAX запроса

Автор: Treod 16.10.2012, 18:15

Приветствую. Помогите пожалуйста решить проблему.

Есть JS-слайдер. Подгружаю туда контент с помощью функции .load() Jquery. И после этого слайдер перестает работать.

Автор: Aliance 16.10.2012, 18:16

Ошибка в 3 строке, 5 символе! smile

Автор: Treod 16.10.2012, 18:28

PHP код:

Код


if (isset($my_id_page)) {
        query_posts('post_type=page&post_parent='.$my_id_page); if (have_posts()) while (have_posts()) : the_post();
            echo '<div class="slide">';
            echo 'test';
            echo '</div>';
        endwhile; wp_reset_query();
    }

JS код:

Код


$('#slides').load(template_url, {mytype: "slides", art_id: art_id});

HTML:

Код


<div id="slides">
        <div class="slide">
            text
        </div>
        <div class="slide">
            text
        </div>
</div>

Автор: Aliance 16.10.2012, 18:43

А инициализация слайдера как делается?

Добавлено через 18 секунд
Да и в общем-то в целом, какой плагин используется? Их же сотни...

Автор: Treod 16.10.2012, 18:46

Плагин используется SlidesJS. (http://www.slidesjs.com/)

Инициализация:

Код


<script>
            $(function(){
                $("#slides").slides();
            });
        </script>

Автор: Aliance 16.10.2012, 18:58

Стоит попробовать реинициализировать слайдер после загрузки:

Код


$('#slides').load(template_url, {mytype: "slides", art_id: art_id}, function() {
    $("#slides").slides();
});

Автор: Treod 16.10.2012, 19:08

Пробовал так делать, к сожалению не помогло.

Автор: Aliance 17.10.2012, 10:06

По ссылке что вы дали, вроде как другая разметка. Попробуйте использовать аналогичную.

Автор: Treod 17.10.2012, 12:09

Решил вопрос следующим образом:

Код


$('#slides').load(template_url, {mytype: "slides", art_id: art_id}, function() {
            $("#slides").slides("destroy");
            $("#slides").slides({
                responsive: true,
                height: "400"
            });
        });