Контент Ajax загружается несколько раз с вкладками пользовательского интерфейса JQuery

Привет, я в основном вызываю отдельные php-страницы (и их формы) через AJAX на отдельных вкладках JQueryUI. Код примерно такой:

<div id="dock">
<ul>
<li><a href="/buddylity_dev/index.php?r=welcome/home">Home</a></li>
<li><a href="/buddylity_dev/index.php?r=welcome/profile">Profile</a></li>
<li><a href="/buddylity_dev/index.php?r=welcome/statistics">Statistics</a></li>
<li><a href="/buddylity_dev/index.php?r=ping/view">Pings</a></li>
</ul>
</div>

...

jQuery(function($) {
jQuery('#dock').tabs({'collapsible':false});
});

1) Теперь каждый раз, когда я нажимаю на вкладки, их содержимое загружается нормально, но предыдущее содержимое не уничтожается. В результате представьте, если вкладка была нажата (загружена) N раз - форма также отправляется N раз. Насколько я понял, здесь происходит несколько привязок, и, следовательно, несколько форм отправляются. Как я могу предотвратить это?

2) У меня есть отдельные формы в каждой вкладке. При выборе нескольких вкладок загружается несколько форм. Теперь, если я отправлю значение (через AJAX) в любой из форм, данные будут отправлены во все формы, которые были загружены ранее (проверено с помощью Firebug). Как я могу предотвратить это снова?

PS: Включение кэширования во вкладках частично решило проблему №1, но не помогло решить проблему №2.

PPS: я просмотрел довольно много подобных сообщений, но я все еще застрял :(

Спасибо !


ajax jquery-tabs
person crozzfire    schedule 23.04.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Судя по небольшому фрагменту кода, ваши проблемы могут возникнуть из-за использования одной и той же страницы (index.php) для каждой из вкладок. Проверьте это:

  • Каждая форма имеет отдельный идентификатор? Им следует.
  • Отключите кеширование как в «cache», так и в «ajaxOptions». Это гарантирует, что содержимое будет обновляться (и удаляться) при каждом нажатии.
  • Как ваши формы отправляются через AJAX? Независимо от метода, вы должны обрабатывать привязки форм для каждой вкладки, выбранной с помощью опции «загрузить».

Попробуй это...

$("#dock").tabs({
    load: function (event, ui) {
        //setup new content bindings here
    },
    cache: false,
    ajaxOptions: {
        cache: false
    }
});
person Paul    schedule 25.04.2011
comment
Спасибо, Пол. Я уже исправил методом .live(): $('body').live('tabsselect',function(event){ $('body').undelegate('#search_button','click'); $('body').undelegate('#update_button','click'); }); Спасибо за ответ, это тоже сработает. - person crozzfire; 25.04.2011
comment
Готово, извините, что так долго :) - person crozzfire; 25.05.2011