Pjax - принцип работы

International Russian
1

Всем доброго дня)

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

У меня задача отобразить после изменения в базе данных (смена наследника роли пользователя) визуально эти изменения. То есть я вызываю действие контроллера которое никаким образом ничего не отправляет в представление, а только выполняет действия с базой данных - меняет связь для определенной строки.

На сколько я понимаю, чтобы pjax работал он должен просто получать какие-то данные, либо html разметку, либо строку. В моем случае данных клиенту никаких не отправляется, просто происходит изменение в бд. Как в таком случае быть?

И если кто может, объясните что вообще делают js методы от этого pjax, типа:




$(document).on('pjax:end', function () {


    $.pjax.reload({container : '#tab2'});


})

UPD:

Вроде разобрался, но не до конца.

Есть у меня контроллер AuthItemController, в нем есть действие actionIndex в котором вызывается метод модели для получения дерева наследования ролей и разрешений, потом этот список в виде массива рендерится в представление index и там оборачивается в пиджак. Есть второй контроллер AuthItemChildController с действием actionChangeParent, которое вызывается ajax-ом при перетаскивании и бросании одного элемента списка на другой. Если ajax запрос прошел успешно и родительский элемент унаследовал дочерний, то в success ajax функции я вызываю




$.pjax.reload({container : '#pjaxTreeOfRoles', url : '/rbac?tab=tab2'});

Соответственно получается что при выполнении ajax запроса то есть при отрабатывании метода actionChangeParent, выполняется метод pjax.relod который должен отправить гет запрос на адрес /rbac?tab=tab2, получить ответ (ответом в данном случае служит то, что мы рендерим - дерево ролей) и подставить эти данные в указанный контейнер.

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

2

Ура я разобрался с этим) Всего два дня и я счастлив, как слон :rolleyes:

В общем со стилями была проблема, потому что я немного сам сделал неправильно, хотя и не до конца понимаю в чем именно загвоздка. У меня на index странице контент организован bootstrap табами, в первой вкладке идет GridView во второй собственно выводятся деревья с иерархией каждой роли, и я в пиджак оборачивал всю вторую вкладку. Получалось так, что при запросе на смену родителя pjax брал все содержимое, что попадает в виджет, а попадала туда вся вкладка и подгружал ее по новой после того, как получал ответ от запроса отправленного по адресу /rbac?tab=tab2. Получается что pjax пытался заменить всю вкладку а ново созданная вкладка по какой-то причине не была активной и соответственно контент находящейся в ней было не видно.

Если кто такие же вещи будет делать, не забудьте, что после того, как контент подгрузится на страницу, js скрипты повешенные на его элементы работать не будут. Чтобы все нормально работало вам нужно будет использовать в js такую вещь, как делегирование - это когда событие вешается на родительский или любой другой не изменяющийся ajax-ом элемент и потом вызывается для ново созданных ajax-ом элементов. Например так:




$(document).mouseover('.auth-item', function () {


        $('.auth-item').draggable({

            snap: ".auth-item",

            snapMode: "inner",

            snapTolerance: 7,

        });


    });