开发者

Ajax content getting loaded multiple times with JQuery UI Tabs

Hi I am basically calling individual php pages (and their forms) via AJAX in separate JQueryUI tabs. The code is something like:

<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&开发者_Python百科gt;

...

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

1) Now every time I click on the tabs, their content gets loaded fine but the previous content does not get destroyed. As a result, imagine if a tab was clicked (loaded) N times - a form is also submitted N times. As far as I have understood, multiple bindings occurs here and hence the multiple form submits. How can I prevent this?

2) I have separate forms in each tab. When multiple tabs are selected, multiple forms get loaded. Now if I submit a value (via AJAX) in any one of the form, the data is submitted across all the forms which were previously loaded (Checked with Firebug). How can I prevent this again ?

PS: Enabling caching in tabs partially solved problem #1, but does not help with problem #2.

PPS: I went through quite a few similar posts but I am still stuck :(

Thanks !


From the little bit of code there, it looks like your problems may arise from using the same page (index.php) for each of the tabs. Check these:

  • Does each form have a separate ID? They should.
  • Disable caching in both 'cache' and 'ajaxOptions'. This will make sure content is refreshed (and removed) with each click.
  • How are your forms submitting via AJAX? Regardless of the method, you should handle your form bindings for each tab select through the "load" option.

Try this...

$("#dock").tabs({
    load: function (event, ui) {
        //setup new content bindings here
    },
    cache: false,
    ajaxOptions: {
        cache: false
    }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜