बंद करें - केवल अगर उपयोगकर्ता के अंदर मैग्निफिश पॉपअप के अंदर फॉर्म में

Question

मैं केवल पॉप अप करने के लिए एक पुष्टिकरण बॉक्स प्राप्त करने का प्रयास कर रहा हूं यदि उपयोगकर्ता ने शानदार पॉपअप के अंदर फ़ॉर्म में परिवर्तन किया है जो इसकी सामग्री को iframe में दिखाता है।

<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); 
     };          
    } 
}); 

बदलें काम करने के लिए प्रतीत नहीं होता। मैंने फॉर्म को खुले अंदर बांधने की कोशिश की: जैसे हम अपनी बाकी की साइट पर करते हैं, लेकिन यह काम नहीं करता है।

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

whatever.asp में पेज कि सबमिट हो जाता है पर पर्चा नमूना के लिए HTML - अगर कुछ भी है कि पाठ बॉक्स में बदल गया है, मैं इस बात की पुष्टि करना चाहता हूँ पास प्रकट करने के लिए:

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

मुझे लगता है कि मुद्दा है कि कोड मूल पृष्ठ पर है और फिर iFrame में एक शानदार पॉपअप सामग्री खुलता है।

किसी भी मदद की सराहना की जाएगी!

मैं इन सभी विकल्पों के साथ खेल रहा हूं और कोई भी काम नहीं करता है। यहां मुद्दा है - "परिवर्तन" किसी फ़ॉर्म के लिए फायरिंग नहीं कर रहा है। "परिवर्तन" पॉपअप के लिए फायरिंग है, लेकिन अगर मैं कंसोल लॉग के साथ एक फॉर्म आइटम में परिवर्तन के लिए चेक लपेटता हूं, तो वे ठीक हैं, लेकिन फॉर्म परिवर्तन के अंदर कोसोल लॉग आग नहीं है। यहां मुद्दा के साथ फॉर्म आइटम तक पहुंचने के साथ होना चाहिए क्योंकि वे एक आईफ्रेम में हैं !!! इसलिए, मैंने को मोडल = सच्चाई का उपयोग करके डिफ़ॉल्ट बंद बटन का उपयोग नहीं किया, और ने आईफ्रेम के अंदर अपना खुद का बंद बटन बनाया है जिसे मैं प्रोग्रामेटिक रूप से बटन क्लास और अभिभावक पर क्लिक करके नियंत्रित करता हूं। $। MagnificPopup.close (); iframe के अंदर से - एक आकर्षण की तरह काम करता है।

Answer 1

मैंने जो विश्वास किया है, उसके लिए मैंने एक कोडपेन बनाया है जिसे आप पूरा करने की कोशिश कर रहे हैं।

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

प्रासंगिक कोड इस प्रकार है:

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

} 

क्या मैंने किया था पाठ इनपुट जब Open घटना आग से मूल्य के साथ contents चर भरने गया था। फिर, जब Close कहा जाता है, तो यह देखने के लिए जांच करता है कि पाठ इनपुट का मान contents के मान के समान है, जो प्रारंभ होने के बाद से नहीं बदला गया है।

पैरामीटर callbacks के भीतर पैरामीटर को घोंसला करना महत्वपूर्ण है, जो आपके मूल कोड में प्रकट नहीं होता है।

Answer 2

उपरोक्त कोड के अनुसार, मैंने आपके मामले के लिए उपयुक्त एक उदाहरण बनाया है। इसका मतलब है कि यह किसी भी पाठ इनपुट के साथ-साथ textarea के लिए भी काम करेगा।इस

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

फिर अपने javacripts में

तरह

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

उपयोग छिपे हुए इनपुट इस का उपयोग करें:

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

तो फोन:

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