Cancel tab selection in jQuery

I have created some tool that has 4 pages. I order to navigate between the pages I am using jQuery "tabs" (in the heade开发者_C百科r of each page).

Is there a way to cancel the clicking operation after some tabs was clicked? For example: If the page wasn't saved the user will get a propper warning: "click YES in order to continue without saving or click NO in order to stay in the unsaved page".

Thanks in advance. Mike

If you are referring to the jQuery UI tabs widget, you can supply a select event when you initialize the tabs, or bind an event handler using the tabselect event type:

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

or:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});

For more information about the jQuery UI Tab widget, see the documentation.

In the event handler you should be able to perform whatever checks you require, and stop the tab from changing using event.preventDefault();

I think you could put a confirm dialog first in the click action. and only continue with the rest of the code if the result from the dialog was true.

In order to cancel or abort the tab's ajax request do something like this

$('#tabs').tabs({
    ajaxOptions: {
        timeout: 10000,
        error: function() {
            // If error occurs while trying to load a page via AJAX, abort the tabs
            $('#tabs').tabs('abort');
        }
    }
});

For more information go here.