How to use create Jquery Confirm Dialog before switching tabs

Question

I am using jQuery 1.9+

I tried to popup a Jquery dialog modal to allow users to confirm before switching tabs. I tried following codes:

$('#tabs').tabs({
  beforeActivate: function(event, ui) {

  $('<div> Confirm Switching Tab </div>').dialog({
      modal: true,
      title: "Confirm Action",
      buttons: {
          Yes: function(){
              $(this).dialog('close');
              return true;
          },
          No: function(){
              $(this).dialog('close');
               return false;
          }
      }
  });

 }
})

The code above did popup the confirm dialog, however it still open the tab because the beforeActivate event in fact returns before users click the dialog buttons to return true/false.

Then I come up with the following codes.

$('#tabs').tabs({
  beforeActivate: function(event, ui) {

   $('<div> Confirm Switching Tab </div>').dialog({
      modal: true,
      title: "Confirm Action",
      buttons: {
          Yes: function(){
              $(this).dialog('close');
              $( "#tabs" ).tabs( "option", "active", ui.newTab.index());
          },
          No: function(){
              $(this).dialog('close');

          }
      }
  });

  return false;
 }
})

The code above wont open the tab because I put "return false" at the end of the beforeActivate option. After beforeActivate is returned, dialog popups, if users click the Yes button on the dialog, then it will trigger switching tabs event again. However, the dialog will popup again. This is kind of endless.

My question is that how I can modify the codes above to do that. Or is there any better way to do it?

Thanks in advance.

Answer 1

The major issue is that, beforeActivate is triggered even when you're switching the tab programatically like

$( "#tabs" ).tabs( "option", "active", ui.newTab.index());

Causing an infinite loop as long as you keeps pressing yes - the dialog will never close (new dialogs will be opened keep on opened one after another).

---

One possible work around I can think of is to have a static dialog, and save a boolean flag using using data() to indicate how the event was triggered.

$('#tabs').tabs({
  beforeActivate: function(event, ui) {
    if (!$("#dialog").data("confirmed")) { // If event is not triggered by user
      event.preventDefault(); // prevent switching tabs
      $("#dialog").dialog("open").data("ui", ui); // open the dialog and pass the info
    }
  },
  activate: function(event, ui) {
    $("#dialog").data("confirmed", false);
  }
});
$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    Yes: function() {
      var ui = $(this).data("ui");
      // if user clicks yes, change the stored data to true to avoid re-opening dialog
      $(this).dialog('close').data("confirmed", true);
      $("#tabs").tabs("option", "active", ui.newTab.index());
    },
    No: function() {
      // if user clicks no, change the stored data so that dialog will be reopened
      $(this).dialog('close').data("confirmed", false);
    }
  }
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

  </div>
</div>
<div id="dialog" title="Confirm Action">Confirm Switching Tab
  <div>