Question

I want to show an alert message if user click on second tan without submitting the form on the first tab, the problem I face of infinite alert messages that’s show when user click on tab,
here is the code I write

 $(function() {
    $('#tabs').tabs({
        selected:<?php echo $param ?>,

        select: function(e, ui) {

            var thistab = ui;
            runMethod();

        }

    });

});
function runMethod(){
    if( $.trim($("#generalImportNo").text()) == "")
    {
        alert("You should fill all main information first.")                     
        $('#tabs').tabs({selected:1 });

    }
}

I try to use stopPropagation but it doesn’t work, how can I prevent infinite event occuring ?!

Answer 1

Why don’t you do something like this:

...
select: function(e, ui) {
   var thistab = ui;
   return runMethod();
}
...
function runMethod(){
    if( $.trim($("#generalImportNo").text()) == "")
    {
       alert("You should fill all main information first.")                     
       return false;
    }
    return true;
}

If select event returns false then your tab won’t be selected. I can’t test right now, but that’s what I did a long time ago. Also you may find
$('#tabs').tabs({ disabled: [1, 2, 3], ... }); quite useful, it will prevent your users to click on unavailable tabs. To enable your tab through the code use $('#tabs').tabs('enable', tabIndexToEnable);

UPD: I created a quick DEMO, seems to work just fine.

UPD2: Here’s another one just to show that everything works fine.