Chiudi conferma - Solo se i tipi utente in forma all'interno Magnifica Popup

Question

Sto tentando di ottenere una casella di conferma da visualizzare SOLO se un utente ha apportato modifiche al modulo all'interno del popup magnifico che mostra il suo contenuto in un iframe.

codice

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

:

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

Il cambiamento non sembra funzionare. Ho provato a legare il modulo all'interno aperto: come facciamo sul resto del nostro sito, ma anche questo non ha funzionato.

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

HTML per il modulo di esempio nella pagina in whatever.asp che viene presentato - se qualcosa è cambiato in quel testo, voglio la conferma vicino appaia:

<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> 

Credo che il problema è che il codice si trova sulla pagina madre e quindi apre un magnifico contenuto popup in un iFrame.

Qualsiasi aiuto sarebbe apprezzato!

Ho giocato con tutte queste opzioni e nessuna sembra funzionare . Ecco il problema: il "cambiamento" non sta sparando per un modulo. "change" sta sparando per il popup, ma se eseguo il check per un cambio in un elemento del modulo con i log della console, vanno bene, ma il registro cosole all'interno del modulo non viene attivato. Il problema qui deve essere con accedere agli elementi del modulo poiché sono in un iframe !!! Così, ho finito up non solo utilizzando il pulsante di chiusura di default, utilizzando modal = true, e creato il mio pulsante di chiusura all'interno del iframe che ho di programmazione controllarmi onclick sulla classe bottone e genitore. $. MagnificPopup.close (); dall'interno dell'iframe - funziona come un incantesimo.

Answer 1

Ho creato un CodePen per quello che credo tu stia cercando di realizzare.

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

Il codice in questione è il seguente:

$('#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); 
    }; 

} 

Quello che ho fatto è stato riempire la variabile contents con il valore dal metodo di scrittura quando il Open generato l'evento. Quindi, quando viene chiamato il numero Close, verifica se il valore dell'input di testo è uguale al valore di contents, che non è stato modificato dopo l'inizializzazione.

L'importante è annidare il parametro open entro callbacks, che non appare nel codice originale.

Answer 2

Secondo il codice di cui sopra, ho fatto un esempio adatto al tuo caso. Ciò significa che funzionerà per qualsiasi input di testo e textarea.

$('#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

uso di input nascosto come questo

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

poi nei tuoi javacripts utilizzare questo:

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

quindi chiamare:

$('#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>' 
      }  
    });