JQuery tabs prevent navigation until confirm

Question

I have a series of tabs for a scheduler application. On one tab, I pre-populate form fields with info from their person record in the db and activate the next tab. When a user clicks the next tab, I ask them to confirm their personal information is correct before proceeding:

$calendarTab.on('click', function(event){
       event.preventDefault();
       disabled = $calendarTab.attr('aria-disabled');
       if(typeof disabled !== undefined && disabled !== 'true'){
            if(confirm('Is The Information Below Correct?')){
                  $tabs.tabs('disable', 1);
                  $tabs.tabs('option', 'active', 2);
            }
            else{
                $tabs.tabs('option', 'active', 1);
            }
        }
    });

This code works fine except for the event.preventDefault(); The page still displays the content from the next tab and will go back if the user cancels the confirm dialog.

While functional, it's sloppy for the page to behave this way.

Does anyone know why this is happening and how I can prevent navigation until the user confirms?

Thanks in advance.

Edit: Working Fiddle

Answer 1

You can capture the tabsbeforeactivate event and cancel it if you don't want to transition to the new tab. Something along these lines will work

   $tabs.on('tabsbeforeactivate', function(event, ui){
       if (ui.newTab.text() == 'Calendar') {
           disabled = $calendarTab.attr('aria-disabled');
           if(typeof disabled !== undefined && disabled !== 'true'){
                if(confirm('Is Your Contact Information Correct?')){
                      $tabs.tabs('disable', 1);
                }
                else{
                    event.preventDefault();
                }
            }
       }

    });

Note that you are adding the event handler to the tabs object, not to the individual tabs. I used the text of the tag to decide which one it was, but you could use an id, class, or data element also. Here is the link