Question

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.

Answer 1

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.