I want to prevent tab switching until Ajax call is complete. Is there any way to achieve this? Right now (by default) the moment I click on another tab, it gets switched to that tab. I wanna prevent this until Ajax call is successful/complete. FYI: I'm using Jquery Tabs-3 plugin. Please help me out.
views:
359answers:
3I assume that you're using jQuery UI Tabs; if you aren't, please link to what you are using.
If you are, you can disable a tab by calling .tabs('disable', index)
when you start loading, and enable it again by calling .tabs('enable', index)
after you finish loading. You can also pass an array of indices.
To answer your comment,
$('#tabs > ul').bind('tabsselect', function(event, ui) {
if(inAjaxRequest)
return false;
//Do whatever you're already doing here
return true;
});
To answer your other comment (By saying "hold the control", I mean to say that when 'tabsselect' even is triggered, next event which is 'tabsshow' shouldn't be triggered until ajax request gets complete/succeed
), you can't do that directly.
However, you could cancel the tabsselect
, but store the index of the tab that the user tried to switch to in a variable. Then, when the AJAX request finishes, check whether the variable holds a tab index (in case the user didn't switch tabs), and, if it does, switch to that tab. Make sure to reset the variable in case you make another AJAX request later.