Confirm Close - Only Wenn der Benutzer ein Formular im Magnific Popup eintippt

Question

Ich versuche ein Bestätigungsfeld zu erhalten, NUR wenn ein Benutzer das Formular im Magnify Popup geändert hat, das seinen Inhalt in einem iframe anzeigt.

<a href="#" class="opener-class" data-mfp-src="/whatever.asp" data-lightbox="iframe" data-plugin-options='{"type":"iframe"}'> 

Code:

$('.opener-class').magnificPopup({ 
    type:'iframe', 
    change: function() { 
     $.magnificPopup.instance.close = function() { 
     if (!confirm("Are you sure?")) { 
      return; 
     } 
     $.magnificPopup.proto.close.call(this); 
     };          
    } 
}); 

ändern scheint nicht zu funktionieren. Ich habe versucht, das Formular innerhalb von open zu binden: so wie wir es auf dem Rest unserer Seite machen, aber das hat auch nicht funktioniert.

$(':input', document.myForm).bind("change", function() { 
     //confirm here 
    } 
); 

HTML für Form-Beispiel auf der Seite in whatever.asp, die eingereicht werden - wenn überhaupt etwas in diesem Textfeld geändert wird, ich das bestätigen will nah erscheinen:

<form class="validate" action="/whatever.asp" method="post"> 
    <label>Notes</label> 
    <textarea class="form-control input-sm required" name="Notes" id="Notes" rows="3"></textarea> 
</form> 

Ich denke, die Frage ist, Der Code befindet sich auf der übergeordneten Seite und öffnet dann einen großen Popup-Inhalt in einem iFrame.

Jede Hilfe wäre willkommen!

Ich habe mit all diesen Optionen gespielt und keiner scheint funktioniert. Hier ist das Problem - die "Änderung" wird nicht für ein Formular ausgelöst. "Änderung" wird für das Popup ausgelöst, aber wenn ich die Prüfung für eine Änderung in einem Formularelement mit Konsolenprotokollen einbinden, sind sie in Ordnung, aber das COSOLE-Protokoll innerhalb der Formularänderung wird nicht ausgelöst. Das Problem hier muss mit Zugriff auf die Formularelemente sein, da sie in einem iframe sind !!! Also, ich beendete oben nur nicht mit der Standard-Schließen-Taste, mit modal = true, und erstellt meine eigene Schließen-Taste in der iframe, die ich programmgesteuert Kontrolle mich onclick auf die Schaltfläche Klasse und Eltern. $. MagnificPopup.close (); von innen der iframe - wirkt wie ein Zauber.

Answer 1

Ich habe einen CodePen für das gemacht, was ich glaube, dass Sie versuchen, zu erreichen.

http://codepen.io/gbhojraj/pen/VaVPRM?editors=1010

Der entsprechende Code ist wie folgt:

$('#open-popup').magnificPopup({ 
    type:'iframe', 
    callbacks: { 
     open: function() { 

      contents = $('#Notes').val(); 

      $.magnificPopup.instance.close = function() { 
       if(contents != $('#Notes').val()){ 
        if (!confirm("Are you sure?")) { 
        return; 
        } 
       } 
     $.magnificPopup.proto.close.call(this); 
    }; 

} 

Was ich tat, war die contents Variable mit dem Wert aus der Texteingabe, wenn das Open-Ereignis ausgelöst füllen. Dann, wenn Close aufgerufen wird, überprüft es, um zu sehen, ob der Wert der Texteingabe dem Wert contents entspricht, der sich seit seiner Initialisierung nicht geändert hat.

Die wichtige Sache ist, den open Parameter in callbacks zu schachteln, der nicht in Ihrem ursprünglichen Code erscheint.

Answer 2

Gemäß dem obigen Code habe ich ein Beispiel für Ihren Fall gemacht. Dies bedeutet, dass es für jede Texteingabe und auch für Textbereiche funktioniert.

$('#open-popup').magnificPopup({ 
    type:'iframe', 
    iframe: { 
    markup: '<form class="validate" action="/whatever.asp" method="post"><label>Notes</label><textarea class="form-control input-sm required" name="Notes" id="Notes" rows="3"></textarea></form>' 
    }, 
    callbacks: { 
    change: function() { 
     var $form = $(this.content[0]), 
      values = {}, 
      changed = []; 
     $form.find('input[type=\'text\'], textarea').each(function() { 
     values[this] = this.value; 
     }); 
     $form.on('change', function(e) { 
     var input = e.target, 
      index = changed.indexOf(input); 
     if (input in values) { 
      if (input.value !== values[input] && index === -1) { 
      changed.push(e.target); 
      } else if (e.target.value === values[e.target] && index !== -1) { 
      changed.splice(index, 1); 
      } 
     } 
     }); 
     $.magnificPopup.instance.close = function() { 
     if (changed.length && !confirm('Are you sure?')) { 
      return; 
     } 
     $.magnificPopup.proto.close.call(this); 
     }; 
    } 
    } 
}); 

Answer 3

Einsatz verdeckter Eingabe wie dieses

<input id="hf1" type="hidden" value="" /> 
<input id="hf2" type="hidden" value="" /> 

dann in Ihrem javacripts verwenden diese:

$('#hf2').val($('#Notes').val()); 
$('#Notes').on('change', function() { 
    $('#hf1').val($(this).val()); 
}); 

dann rufen:

$('#open-popup').magnificPopup({ 
    type:'iframe', 
    callbacks: { 
     open: function() { 

      $.magnificPopup.instance.close = function() { 
       if($('#hf1').val() != $('#hf2').val()){ 
        if (!confirm("Are you sure?")) { 
        return; 
        } 
       } 
     $.magnificPopup.proto.close.call(this); 
     } 
, iframe: { 
    markup: '<form class="validate" action="/whatever.asp" method="post">'+ 
      '<label>Notes</label><textarea class="form-control'+ 
      'input-sm required" name="Notes" id="Notes" rows="3">'+ 
      '</textarea></form>' 
      }  
    });