Вы здесь

views ajax, flag и jquery - скрипты не работают после ajax перезагрузки views

0

Приветствую.
Возникла проблема:
Есть вьюшка c таблицей и JS-триггером модуля flag
После нажатия на ссылку флага идёт запрос, ставящий/снимающий флаг на материал.
Если флаг изменён успешно - производится аякс обновление вьюшки, чтобы изменить строки в соответствии с новым значением флага.

Дак вот, аякс-обновление, как я понял, меняет DOM вьшки, после чего скрипты, повешенные на элементы DOM перестают работать. Если не ошибаюсь, то это нормальное поведение JS-скрипта по document ready, но как-то можно исправить?
Ошибок в консоли, само собой нет.

Скрипт подключается в теме через drupal_add_js

jQuery('.ui.dropdown')
  .dropdown({
    keepOnScreen: true,
    context: window,
  });

Как заставить скрипт работать с обновленным DOM? Drupal.behaviour? Не смог с ним разобраться

Версия Drupal: 
7.x
Категория: 
AJAXJavascript
Связанные проекты: 
FlagViews
Вопрос задан 12.08.2015 - 05:15

Пока решил аццким костылем:
Сунул еще раз вызов скрипта после завершения аякс-запроса.
Но это же не вариант, не делать же это со всем JS, который взаимодействует с вьюшкой?

Комментарий оставлен 12.08.2015 - 05:22

Ответы

2

Руководство по написанию JS скриптов для front-end разработчиков под Drupal 7 на хабре.

Скрипт для вашего случая:

Drupal.behaviors.my_behavior = {
    attach: function (context, settings) {
        // Вызываем функции для элементов, не помеченных классом my-processed
        $('.ui.dropdown:not(.my-processed)', context)
            .dropdown({
                keepOnScreen: true,
                context: window,
            });
        // Помечаем элементы классом my-processed, чтобы для них не выполнились функции в следующий вызов behaviors
        $('.ui.dropdown:not(.my-processed)', context).addClass('my-processed');
    }
};      
Ответ дан 12.08.2015 - 09:47
0

Получается что событие повешено до того, как появился новый элемент с помощью ajax. Попробуйте использовать метод on() . Нужно использовать элементы, которые не подгружались при помощи ajax, например body.

    $("body").on("dropdown", "ui.dropdown", function(){
       ...
    });
Ответ дан 12.08.2015 - 10:11