Hi, I have a jquery ui tab that gets loaded via ajax and remote page:
<div id="tabs" style="width:1200px" class="ui-tabs">
<ul>
<li><a href="/bugs/loadTab1">View</a></li>
<li><a href="#tabs-2">Add Bug/Request</a></li>
</ul>...
<script type="text/javascript">
jQuery
(function($) {
$
('#tabs').tabs({
ajaxOptions
: {
error
: function(xhr, status, index, anchor) {
$
(anchor.hash).html("Couldn't load this tab.");
},
data
: {},
success
: function(data, textStatus) {
},
}
});
});
</script>
in the page that gets loaded is a table with rows of PHP data, andui dialog boxes. The problem is that when I reload the tab via .tabs("load",0);
(or via any means), the tab is reloading, but appending the div's that contain the Dialog's. Once for each time it's reloaded. So when the page is refreshed, I end up with duplicates of each dialog box.
transport.responseText.length
just to make sure somehow PHP wasn't spitting out more data, but it checks out. The tabs plugin is doing
something to append this stuff, and I can't find out how to
replace it...
I've also tried appending a random string to the URL that is grabbing the page with the dialog boxes on it to make sure it isn't a caching issue - it's not.
I am sure this isn't a problem specific to the tabs widget; I've tried creating a page just with the dialog boxes, but still when refreshed (via an ajax request), the dialogs are appended.
I've also tried blanking out the div that contains the dialog boxes before re-populating them, but I still have the same problem.
What would cause the dialog boxes to be appended instead of overwritten?
Much thanks.
http://pastebin.com/rGFgQVkf <-index page
http://pastebin.com/4uAWjeqG <-dialog page
http://pastebin.com/kmcNiHzc <-js