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
}
});
精彩评论