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>

...

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 !

Solution

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
    }
});