views:

359

answers:

3

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.

A: 

I 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.

SLaks
Thanks for the reply, Yes I'm using jQueryUITabs (http://docs.jquery.com/UI/Tabs). I have several nested tabs and I wanna achieve this during 'tabsselect bind event'$('#tabs > ul').bind('tabsselect', function(event, ui) {.....});Can you guide me please?
TalkativeGeek
Why don't you just disable the tabs?
SLaks
I tried disabling and its not working :(
TalkativeGeek
A: 

To answer your comment,

$('#tabs > ul').bind('tabsselect', function(event, ui) {
    if(inAjaxRequest)
        return false;
    //Do whatever you're already doing here
    return true;
});
SLaks
Replace `inAjaxRequest` with some code that you use to determine whether you want to let the user switch tabs.
SLaks
Thanks Again, thats where I got stuck beacuse I have both <code>tabsselect and tabsshow binding</code>. Right now, I'm not able to hold the control during the duration of <code> ajaxstart and ajaxstop</code>. It simply pass through and invokes <code>tabsshow</code> event which in turn shows the respective tab.
TalkativeGeek
As per jquery UI tabs documentation, switching can be prevented only for <code>return false;</code> from tabsselect binding. So, I just wannna(somehow) <code>return true;</code> if <code>ajax complete</code> else <code>false</code> and I'm not able to figure out the way to hold the control in between. I hope you understand my perception and logic. Can you please shed some light?
TalkativeGeek
What do you mean by "hold the control"?
SLaks
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.
TalkativeGeek
A: 

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.

SLaks