How do I prevent the tab from changing

Question

I am able to get into the function it calls the prevent and I return false but the tab still switches? Any ideas of what I am doing wrong?

<ul class="nav nav-tabs" id="templateActionTab">
       <li id="menuTemplateTab" class="active"><a data-toggle="tab" href="#templateTab">Template</a></li>
       <li id="menuAction"><a data-toggle="tab" href="#actionTab">Action</a></li>
       <li id="menuScheduler"><a data-toggle="tab" href="#schedulerTab">Scheduler</a></li>
</ul>


$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {


  var isValidationValid = templateInstance.validateScreen();

  if(isValidationValid)
  {
    localStorage.setItem('activeTab', $(event.target).attr('href'));
    $(event.target).attr("href");
    return true;
  }
  else
  {

    event.preventDefault();
    return false;

  }


});

Is it related to your issue: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — laser, Feb 12 '17 at 18:40
Generally, prevent default is not enough, but you return false... so doing both... — laser, Feb 12 '17 at 18:42
Can you add event.stopPropagation for testing purposes and/or delete preventDefault() — laser, Feb 12 '17 at 18:45

score 0 · Answer 1 · answered Feb 12 '17 at 19:11

Ok it was really stupid I used shown instead of show now it is working...

 $(document).on('show.bs.tab', 'a[data-toggle="tab"]', function (event) {

        debugger;
        var isValidationValid = templateInstance.validateScreen();

        if(isValidationValid)
        {
            localStorage.setItem('activeTab', $(event.target).attr('href'));
            $(event.target).attr("href");
            return true;
        }
        else {

            event.preventDefault();
              return false;

        }


    });

How do I prevent the tab from changing

1 Answers1