JQueryUI Tabs Selection and Validation

I am trying to validate tab content(using ajax validation) before switching to 开发者_如何转开发the next tab. So when the user clicks on the tab, the current tab content is sent to the server for validation. And when result from the server is received I switch to the next tab. Here is some code:

$('#tabs').tabs({
    select: function(event, ui) {
        ...
        validate(currentIndex, nextIndex);
        return false;
    }
});

function validate(currentIndex, nextIndex){
    $.ajax({
        ...
        complete: function(){
            $("#tabs").tabs('select', nextIndex);
        }
        ...
    }
}

You probably can see the problem already, it's infinite loop, because validation causes tab's select handler that causes validation and so on. How would I solve this without global variables?

Thanks.

Please take a look on this - official Jquery tabs documentation

Your validate function should not do anything except returning true or false.

$('#tabs').tabs(
{
    select: function(event, ui)
    {
        ...
        return validate(currentIndex, nextIndex);
    }
});

function validate(currentIndex, nextIndex)
{
    $.ajax(
    {
        ...
        success: function(data)
        {
            // example response: {"error": 0}
            if(!data.error) return true;
            else return false;
        }
        ...
    }
}

When your tabs('select'... function returns false, the tab won't switch, if true the tab will switch - so you don't have to do it in your validate function.

I'm not sure if this would work (haven't tried your code) but couldn't you use the .data(key,value) to add some sort of a "already validated" flag to check for? So you add an if statement which checks for this before entering the validation function again.