UI Tabs stop functioning properly after AJAX request with error
Hello,
I have some UI Tabs set up using AJAX calls to populate the container,
set it up as suggested on the jQuery UI site.
In my AJAX options I have a handler for error event. I purposely broke
the remote page to test the error handling. When I click the tab that
calls the remote page my error callback runs as expected but now when
I try to select the other tabs they freak out! I either have to click
on them twice or they may load each others content inside them at the
same time. Very strange!
My application handles the error and returns the http status 500 so
the AJAX will know it took a crap.
Here is my code.
HTML:
<div class="AJAXErrorContainer" style="display:none"></div>
<div id="caseManagerWorkbench" class="ui-tabs ui-widget ui-widget-
content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-
header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-
active"><a href="index.cfm?fuseaction=casemanager.exhibits"
title="Exhibits">Exhibits</a></li>
<li class="ui-state-default ui-corner-top"><a href="index.cfm?
fuseaction=casemanager.checkwriter" title="Check Writer">Check Writer</
a></li>
<li class="ui-state-default ui-corner-top"><a href="index.cfm?
fuseaction=casemanager.comments" title="Comments">Comments</a></li>
<li class="spinnerContainer"></li>
</ul>
<div id="Exhibits"></div>
<div id="Check_Writer"></div>
<div id="Comments"></div>
</div>
JavaScript:
$(function() {
//builds the tab interface for viewing the submittal data
$("#caseManagerWorkbench").tabs({ ajaxOptions: {
async: false,
cache: false,
success: function() {
$(".AJAXErrorContainer").hide();
},
error: function() {
$(".AJAXErrorContainer").html("An error has occured
during the remote request, Please try again.");
$(".AJAXErrorContainer").show();
}
},
spinner: null,
select: function() {$(".spinnerContainer").html("<span
style='color:white;'><img src='images/ajax-loader-blue.gif' hspace='5'
vspace='4' align='absmiddle'> Loading...</span>");},
load: function() {$(".spinnerContainer").html("");}
});
});