LINUX.ORG.RU

jquery; ajax; tabs


0

1

Я не специалист в JavaScript, потому прошу помочь.

Табы

<div id="tabs">
    <ul>
        <li><a href="/aaa"><span>AAA</span></a></li>
        <li><a href="/bbb"><span>BBB</span></a></li>
        <li><a href="/ccc"><span>CCC</span></a></li>
    </ul>
  </div>

Содержимое таба CCC

Скрипт, который при нажатии на линк посылает POST запрос, чтобы удалить элемент, а затем обновить содержимое

<script>
    $(function() {
      $('.ccc_del').live( 'click', function() {
           $.post( $(this).attr('href'),
                   { 'ccc_del' : $(this).attr('rel') } );
           $("#tabs").tabs('load', 2);
           return false;  // cancel link default action
         }
      );
    });
  </script>

И само содержимое

...
<table span="2" border="0">
  <tr>
      <td>3</td>
      <td align="right">222</td>

      <td align="right"><a href="/ссс/del" class="ccc_del" rel="3" >Удалить</a></td>
  </tr>
  <tr>
      <td>7</td>
      <td align="right">sdfsdfsdf</td>
      <td align="right"><a href="/ссс/del" class="ccc_del" rel="7" >Удалить</a></td>
  </tr>
...

Удаляется все прекрасно, а вот таб не обновляется.

А можно это всё куда-то запилить на одну гипертекстовую страницу?

Скрипт, который при нажатии на линк посылает POST запрос, чтобы удалить элемент, а затем обновить содержимое

Запрос, чтобы удалить элемент??? ***CONFUSED***

Какая строчка именно отправляет содержимое (я совершенно не шпрехаю в этих ваших жКверах)?

В куске /ссс/del ссс специально набрано кириллицей, чтобы силы зла не угадали (а из-за этого могут возникнуть проблемы с кодировкой. У меня, по крайнем мере, — возникли)?

sphericalhorse ★★★★★
()
Ответ на: комментарий от sphericalhorse

Запрос, чтобы удалить элемент??? ***CONFUSED***

Мне надо, чтобы отработал контроллер, которому передается ряд параметров, а потом обновленный список появился в табе. Что не так?

В куске /ссс/del ссс специально набрано кириллицей, чтобы силы зла не угадали (а из-за этого могут возникнуть проблемы с кодировкой. У меня, по крайнем мере, — возникли)?

Извините, это я уже в сонном бреду правил.

Какая строчка именно отправляет содержимое (я совершенно не шпрехаю в этих ваших жКверах)?

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

<script>
    $(function() {
      $('.ccc_del').live( 'click', function() {
           //отправляем запрос
           $.post( $(this).attr('href'),
                   { 'ccc_del' : $(this).attr('rel') } );
           //перезагружаем таб
           $("#tabs").tabs('load', 2);
           return false;  // cancel link default action
         }
      );
    });
  </script>
alabalaev
() автор топика
Ответ на: комментарий от anthill

В том-то и дело, что POST уходит, контроллер отрабатывает, а jquery никак не реагирует на попытку его обновить.

alabalaev
() автор топика
Ответ на: комментарий от alabalaev

Я думаю, что все дело в том, что скрипт, который пытается обновить таб, находится в подгруженном через ajax контенте таба. Прямых ограничений так не делать я не нашел, да и другие скрипты отлично работают. Может надо как-то хитро обращаться к самим табам в таком случае?

alabalaev
() автор топика
Ответ на: комментарий от anonymous
<script>
    $(function() {
      $('.ccc_del').live( 'click', function() {
           $.post( $(this).attr('href'),
                   { 'ccc_del' : $(this).attr('rel') } ).success($("#tabs").tabs('load', 2));
           
           return false;  // cancel link default action
         }
      );
    });
  </script>

Результат тот же.

alabalaev
() автор топика
Ответ на: комментарий от GateKeeper

Есть табличка, которая отображается /ccc. jQuery ее подтягивает, когда тыкаешь на таб. В табличке есть ссылка для каждой строчки, при нажатии на которую отправляется ряд параметров контроллеру, он что-то делает и, соотв., получает новую табличку, т.е. контент /ccc надо получиться заново. POST уходит, а .tabs('load', 2) не срабатывает. POST, на самом деле, может сам обрабатывать данные, которые ему приходят в результате. Не получится обновить таб целиком (что хотелось бы), попробую сделать так.

alabalaev
() автор топика
Ответ на: комментарий от alabalaev

а можно описание load'а посмотреть, как именно он подгружает данные?

anonymous
()
Ответ на: комментарий от alabalaev

в контроллере возвращай JSON вида result: true/false.

$.post(blabla, function(data) {
    if (typeof(data) == 'object' && data.hasOwnProperty('result') && data.result) {
        $(tabsSelector).tabs('load', 2);
    }
});
примерно так. Тогда у тебя обновлялка должна сработать при (и только при) успешном POST. Я вообще через $.ajaxSetup() + $.ajax() все делаю, можно обработать вплоть до конкретного HTTP-кода и прочие ништяки сделать (например, async отключить).

GateKeeper ★★
()
Ответ на: комментарий от GateKeeper
<script>
    $(function() {
      $('.ccc_del').live( 'click', function() {
              $.post( $(this).attr('href'),
                   { 'ccc_del' : $(this).attr('rel') },  
                   function(data) {
                    if (typeof(data) == 'object' && data.hasOwnProperty('result') && data.result) {
                      $("#tabs").tabs('load', 2);
                    }
                   }
              );
           
           return false;  // cancel link default action
         }
      );
    });
  </script>

Нет. Сам widget не реагирует. Возможно, что ему ничего не приходит, т.к. этот скрипт в подгруженном контенте.
alabalaev
() автор топика
Ответ на: комментарий от alabalaev

jQuery вообще пофигу, как и когда получен контент. Он даже с динамически подгружаемым жаваскриптом умеет работать. Вешай хендлер на load:

Supply a callback function to handle the load event as an init option.

    $( ".selector" ).tabs({
       load: function(event, ui) { ... }
    });


GateKeeper ★★
()
Ответ на: комментарий от GateKeeper

добавил такую штуку

  <script>
  $(document).ready(function() {
    $('#tabs').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(this).tabs('load', 2);
            event.preventDefault();
        });
    }
    });
  });
  </script>

положил в контент таба фейковый <a>

delegate сработал, т.к. при клике на ссылку ничего не происходит, но обновляться не обновляется...

Пробовал сделать .tabs('option', 'selected', 0). Так же ничего не переключается.

alabalaev
() автор топика
Ответ на: комментарий от GateKeeper

Конечно втыкал. Втыкал и в хэндлер, и в ф-цию на аджаксовом контенте. С алертами проблем нету, они всюду срабатывают. Не работает .tabs('load', 2). А точнее, ничего не меняется.

alabalaev
() автор топика
Ответ на: комментарий от alabalaev

<script>
    $(function() {
      $('.ccc_del').live( 'click', function() {
           $.post( $(this).attr('href'),
                { 'standard_del' : $(this).attr('rel') }  
           );
           $('#ui-tabs-3').load('/ccc');
           return false;  // cancel link default action
         }
      );
    });
  </script>

И все работает.

alabalaev
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.