Загадки cjuidialog и ajax

Обсуждение документации. Переводы Cookbook и авторские рецепты.
Ответить
EvilMachine
Сообщения: 7
Зарегистрирован: 2013.02.09, 20:31

Загадки cjuidialog и ajax

Сообщение EvilMachine »

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

На странице mainpage.php присутствует два таба, переключение между табами через ajax (расширение easytabs).
В каждом табе нам необходимо вызвать представление table.php с cgridview внутри, код CJUIDIALOG находится здесь же.
Кнопку view используем для вызова подробной инфы(history.php - внутри также содержит cgridview) по заинтересовавшей нас строке.
Перешли на страницу все работает, по клику на на кнопку view выскакивает окошко - все отлично.

Но...

Мы забыли про второй таб, переходим в него, загружается table.php, нажимаем view и... ничего не происходит :(
Загружаем сразу второй таб, все работает, переходим на первый, та же песня.
Делано по это статьеcgridview-display-the-full-record-actionview-in-a-cjuidialog

Есть идеи? Не хотелось бы отказываться от ajax при переключении между табами

UP.
Ввергающая мой неокрепший разум в ступор вещь.

На странице присутствует подключение Jui asseta -

Код: Выделить всё

<script type="text/javascript" src="/assets/86507aaff/jui/js/jquery-ui.min.js"></script>
При этом, если Cjuidialog подключается не в представлении view, а скажем в mainpage.php то, с завидным постоянством получаем ошибку - Uncaught TypeError: Object [object Object] has no method 'dialog'.
Мучает стойкое ощущение, что решение совсем рядом.. :(
Последний раз редактировалось EvilMachine 2013.03.06, 14:00, всего редактировалось 2 раза.

EvilMachine
Сообщения: 7
Зарегистрирован: 2013.02.09, 20:31

Re: Загадки cjuidialog и ajax

Сообщение EvilMachine »

Неужели это настолько жесткий изврат, что в приличном обществе о нем даже не упоминают? :ugeek:

Аватара пользователя
Koduc
Сообщения: 140
Зарегистрирован: 2011.02.15, 18:56

Re: Загадки cjuidialog и ajax

Сообщение Koduc »

Так всё просто. На первоначально загруженной странице отрабатывает javascript и прицепляет нужные обработчики к нужным элементам. Всё работает.
Вы переключаете таб - у вас появляются НОВЫЕ элементы на странице, они чисты и непорочны:) На них не висит никаких обработчиков событий.
Чтобы всё работало, как вы хотите, нужно: либо после загрузки таба выполнять нужные скрипты повторно (при success в ajax-запросе), либо всё вешать через jquery .on() (бывший live() ).
Разработка на Yii: monoray.ru
Открытое бесплатное решение для создания сайтов по аренде/продаже недвижимости: Open Real Estate

EvilMachine
Сообщения: 7
Зарегистрирован: 2013.02.09, 20:31

Re: Загадки cjuidialog и ajax

Сообщение EvilMachine »

Вдохновленный советом Koduc
На них не висит никаких обработчиков событий
.
Хотя все было не совсем так, поместил подключение библиотеки jquery ui

Код: Выделить всё

<script type="text/javascript" src="/assets/86507aaff/jui/js/jquery-ui.min.js"></script>
на вызываемой странице - history.php
И пора бы выпить шампанского и радостно поскакать заниматься другими интересными делами...

К сожалению не сложилось. Появился новый баг.
В обеих вкладках мы вызываем один и тот же файл c cgridview - table.php. Следовательно, при первом вызове все отрабатывает нормально, при переходе на вторую вкладку вызывается он же(table.php). При этом старый остается.
Получаем два диалоговых окна вместо одного. Копание в интернетах склонило к мысли, что все дело в идентичности именования в Yii id для кнопок в cgridview, а именно - yt0, yt1 и т.д.
Что из этого следует, количество одинаковых кнопок равно количеству открытых вкладок. Это влечет за собой создание того же числа диалоговых окон.

Пробовал добавить каждой таблице идентификатор вкладки вида: 0yt0, 0yt1
Нижеприведенный код разместил в table.php

Код: Выделить всё

Yii::app()->clientScript->registerScript('loading', '
$("a[id^=\'yt\']").each(function(indx, element){
    el = $(element).attr("id");
  $(element).attr("id", '.$tab.' + el);
});
', CClientScript::POS_LOAD);
id-шники меняются, но при этом сыпется стандартная ajax обработка кнопок cgridview, нажатая кнопка начинает срабатывать как обычная ссылка.

EvilMachine
Сообщения: 7
Зарегистрирован: 2013.02.09, 20:31

Re: Загадки cjuidialog и ajax

Сообщение EvilMachine »

убрал из свойств кнопки обработку аяксом, добавил перехват нажатия по ссылке

Код: Выделить всё

Yii::app()->clientScript->registerScript('loading', '
$("a[id^=\'yt\']").each(function(indx, element){
    el = $(element).attr("id");
  $(element).attr("id", '.$tab.' + el);
});

$("a[id^=\''.$tab.'yt\']").bind("click", function(){
    url = $(this).attr("href");
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            alert(data);
        },
        error: function (XHR) {
            alert(XHR.status);
        }
    }).fail(function() {
        alert("DONE");
    });
});
', CClientScript::POS_END);
работать отказывается.

возвращаем кнопке пустой вызов ajax в виде

Код: Выделить всё

'options'=>array(
    'ajax'=>array(),
Работает перехват, но запрос не проходит.

Как это заставить работать?

Аватара пользователя
Koduc
Сообщения: 140
Зарегистрирован: 2011.02.15, 18:56

Re: Загадки cjuidialog и ajax

Сообщение Koduc »

Что-то вы мудрите;)
Давайте сделаем так:
1) никакой ява-скрипт код в при смене табов не подгружаете. Все скрипты загрузились один раз при загрузке главной страницы;
2) переключение таба: очищаете текущий таб, делаете ajax-запрос, подгружаете данные в открываемый таб и отображаете его - чтобы не было никаких дублирований и извращений со сменой id;
То есть при такой реализации получаем: открытый по умолчанию таб будет работать нормально, после переключения в другой таб - там javascript работать не будет.
Теперь на основную страницу (см.п. 1) пишем что-то типа такого:

Код: Выделить всё

Yii::app()->clientScript->registerScript('loading', '
$("a[id^='yt']").on("click", function(){
    url = $(this).attr("href");
    $.ajax({
        url: url,
        type: "post",
        success: function (data) {
            alert(data);
        },
        error: function (XHR) {
            alert(XHR.status);
        }
    }).fail(function() {
        alert("DONE");
    });
});
', CClientScript::POS_END);
(обратите внимание - вместо bind используется on)
Теперь как бы вы не загружали содержимое страницы - на всех ссылках с id^='yt' будет срабатывать указанный код.
Разработка на Yii: monoray.ru
Открытое бесплатное решение для создания сайтов по аренде/продаже недвижимости: Open Real Estate

Ответить