Wie kann ich den Wechsel zwischen Boostrap-Registerkarten von einem Bestätigungsdialogfeld abhängig machen?

Question

Ich habe zwei Dinge ausprobiert, von denen ich dachte, dass sie funktionieren würden, und natürlich keine von beiden. Hier sind die zwei Möglichkeiten, die ich gerade versuche, mit etwas JSFiddle Beispielcode (ich benutze JQuery 2.2.1).

Das HTML-Beispiel:

<ul class="nav nav-tabs" id="myTabs"> 
    <li class="active"><a href="#about" data-toggle="tab">About</a></li> 
    <li><a href="#contact" data-toggle="tab">Contact</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="about"> 
    <div class="form-group"> 
     <label for="txtAbout">About me: </label> 
     <input type="text" class="form-control" id="txtAbout"> 
    </div> 
    </div> 
    <div class="tab-pane" id="contact"> 
    <div class="form-group"> 
     <label for="txtContact">Contact me: </label> 
     <input type="text" class="form-control" id="txtContact"> 
    </div> 
    </div> 
</div> 

Mein aktueller Versuch: https://jsfiddle.net/0noo2bwg/3/

var isDirty = false; 

$(".form-control").change(function() { 
    isDirty = true; 
}); 

$('#myTabs a').click(function (e) { 
    e.preventDefault(); 
    if (!isDirty) { 
    $(this).tab('show'); 
    } 
}); 

As (? Glück) ist offensichtlich in der Geige, hat e.preventDefault() nicht die Verbindung sogar zu stoppen, wenn isDirty ist true . Ich entfernte den Dialogcode hier heraus, da er das Ergebnis nicht beeinflusste.

Hier ist der andere Versuch (mit dem Dialog HTML und JS-Logik enthalten): https://jsfiddle.net/kLe75gtr/3/

var isDirty = false; 

$(".form-control").change(function() { 
    isDirty = true; 
}); 

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    if (isDirty) { 
    e.preventDefault(); 
    $('#dialog-confirm').dialog({ 
     resizable: false, 
     modal: true, 
     buttons: { 
     "Leave": function() { 
      $(this).dialog("close"); 
      isDirty = false; 
      $(e.target.text).tab("show"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    } 
}); 

e.preventDefault() hat zuerst passieren oder die Registerkarte wechselt, während der Dialog angesprochen wird. Hier wechselt $(e.target.text).tab("show") einfach nicht die Registerkarte. Möglicherweise weil es in der gleichen Funktion verhindert wird ... idk.

Hat jemand eine Idee, um eine davon zu arbeiten? Oder eine andere Route? Web Dev ist nicht meine Stärke, also vermisse ich vielleicht etwas Einfaches. Entschuldigung, wenn ich andere wichtige Informationen weggelassen habe, fing an zu trinken in der Hoffnung, dass meine Denkfähigkeit helfen würde.

Answer 1

Aktualisieren Sie die Funktion verlassen des Dialogs mit der folgenden Zeile.

$(e.target).click(); 

Ich habe die jsfiddle aktualisiert: https://jsfiddle.net/kLe75gtr/5/