How to use create Jquery Confirm Dialog before switching tabs -

How to use create Jquery Confirm Dialog before switching tabs -

i using jquery 1.9+

i tried popup jquery dialog modal allow users confirm before switching tabs. tried next codes:

$('#tabs').tabs({ beforeactivate: function(event, ui) { $('<div> confirm switching tab </div>').dialog({ modal: true, title: "confirm action", buttons: { yes: function(){ $(this).dialog('close'); homecoming true; }, no: function(){ $(this).dialog('close'); homecoming false; } } }); } })

the code above did popup confirm dialog, still open tab because beforeactivate event in fact returns before users click dialog buttons homecoming true/false.

then come next 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'); } } }); homecoming false; } })

the code above wont open tab because set "return false" @ end of beforeactivate option. after beforeactivate returned, dialog popups, if users click yes button on dialog, trigger switching tabs event again. however, dialog popup again. kind of endless.

my question how can modify codes above that. or there improve way it?

thanks in advance.

the major issue that, beforeactivate triggered when you're switching tab programatically like

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

causing infinite loop long keeps pressing yes - dialog never close (new dialogs opened maintain on opened 1 after another).

one possible work around can think of have static dialog, , save boolean flag using using data() indicate how event triggered.

class="snippet-code-js lang-js prettyprint-override">$('#tabs').tabs({ beforeactivate: function(event, ui) { if (!$("#dialog").data("confirmed")) { // if event not triggered user event.preventdefault(); // prevent switching tabs $("#dialog").dialog("open").data("ui", ui); // open dialog , pass 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, alter stored info true avoid re-opening dialog $(this).dialog('close').data("confirmed", true); $("#tabs").tabs("option", "active", ui.newtab.index()); }, no: function() { // if user clicks no, alter stored info dialog reopened $(this).dialog('close').data("confirmed", false); } } }); class="snippet-code-html lang-html prettyprint-override"><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 down 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 down 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, european union 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, european union congue orci lorem eget lorem. vestibulum non ante. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos. fusce sodales. quisque european union urna vel enim commodo pellentesque. praesent european union 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>

jquery jquery-ui jquery-dialog jquery-tabs