ऑन-वन ​​सक्रिय करना केवल तभी अपडेट करें जब फ़ील्ड मान बदल गए हों

Question

जो मैं प्राप्त करने का प्रयास कर रहा हूं वह सहेजे गए परिवर्तनों के उपयोगकर्ता को चेतावनी देना है यदि वह किसी पृष्ठ को बंद करने या पहले सहेजे बिना इसे सेविगेट करने का प्रयास करता है।

मैं पॉप-अप पर OnBeforeUnload() संवाद प्राप्त करने में कामयाब रहा हूं ... लेकिन मैं नहीं चाहता कि यह किसी भी फ़ील्ड मानों को संशोधित नहीं करता है, तो मैं इसे बिल्कुल प्रदर्शित नहीं करना चाहता हूं। इस के लिए, मैं कहा जाता है इस छिपी हुई इनपुट फ़ील्ड का उपयोग कर रहा कि झूठी का डिफ़ॉल्ट मान के साथ शुरू होता है और जब किसी भी क्षेत्र संपादित किया जाता है सच को flips is_modified।

मैं कोशिश करते हैं और मूल्य परिवर्तन के लिए पता लगाने के लिए इस क्षेत्र के लिए is_modified परिवर्तन घटना बाध्य करने की कोशिश की ... और उसके बाद ही onbeforeunload को सक्रिय करें।

$('#is_modified').change(function() { 
    if($('#is_modified').val() == 'true') 
     window.onbeforeunload = function() { return "You have unsaved changes."; } 
}); 

लेकिन मैं क्या समझ से कि change() घटना केवल इन 3 चरणों के बाद काम करता है - एक क्षेत्र, ध्यान केंद्रित प्राप्त करता है एक मूल्य बदल गया है और क्षेत्र ध्यान केंद्रित खो देता है। छिपे हुए इनपुट फ़ील्ड के मामले में, मुझे यकीन नहीं है कि फोकस भाग कैसे प्राप्त और खो रहा है! इसलिए, Onbeforeunload समारोह कभी सक्रिय नहीं किया जा रहा है।

क्या कोई भी is_modified पर ट्रिगर बनाए रखने का एक तरीका सुझा सकता है?

धन्यवाद।

Answer 1

अपने तर्क को अलग तरीके से आज़माएं। मतलब, अपने onbeforeunload विधि में इनपुट फ़ील्ड के मान की जांच के लिए तर्क डालें।

window.onbeforeunload = function() { 
    if ($("#is_modified").val() == 'true') { 
     return "You have unsaved changes."; 
    } else { 
     return true; // I think true is the proper value here 
    } 
}; 

Answer 2

क्यों onbeforeunload कॉल एक समारोह अगर मूल्यों को बदल दिया है की जाँच करता है कि नहीं, और यदि हां "बिना सहेजे गए परिवर्तन" लौटने की पुष्टि?

Answer 3

हम अपने "बदले" ध्वज के रूप में Window.onbeforeunload का उपयोग करते हैं। यहाँ हम क्या कर रहे हैं, (lowpro का उपयोग) है:

Event.addBehavior({ 
    "input[type=radio]:change,input[type=text]:change,input[type=checkbox]:change,select:change": function(ev) { 
     window.onbeforeunload = confirmLeave; 
    } 
    ".button.submit-button:click": function(ev) { 
     window.onbeforeunload = null; 
    }, 
}); 


function confirmLeave(){ 
    return "Changes to this form have not been saved. If you leave, your changes will be lost." 
} 

Answer 4

IE9 में आप साधारण वापसी कथन (फिर से) जो किसी भी संवाद बॉक्स प्रदर्शित नहीं करेगा उपयोग कर सकते हैं। खुश कोडन ..

Answer 5

मैं एक ऐसी ही आवश्यकता तो निम्नलिखित jQuery स्क्रिप्ट के साथ आया था:

$(document).ready(function() { 
    needToConfirm = false; 
    window.onbeforeunload = askConfirm; 
}); 

function askConfirm() { 
    if (needToConfirm) { 
     // Put your custom message here 
     return "Your unsaved data will be lost."; 
    } 
} 

$("select,input,textarea").change(function() { 
    needToConfirm = true; 
}); 

उपरोक्त कोड, जाँच करता है needToConfirm चर अगर इसकी true तो यह चेतावनी संदेश प्रदर्शित करेगा। जब भी input, select या textarea तत्व मान बदल दिया गया है, needToConfirm चर true पर सेट किया गया है।

---

पुनश्च: फ़ायरफ़ॉक्स> 4 onbeforeunload के लिए कस्टम संदेश अनुमति नहीं है।
संदर्भ: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

---

अद्यतन: आप एक प्रदर्शन सनकी हैं, तो आप @KyleMit's सुझाव प्यार करेंगे। उन्होंने एक jQuery एक्सटेंशन only() लिखा जो किसी भी तत्व के लिए केवल एक बार निष्पादित किया जाएगा।

$.fn.only = function (events, callback) { 
    //The handler is executed at most once for all elements for all event types. 
    var $this = $(this).on(events, myCallback); 
    function myCallback(e) { 
     $this.off(events, myCallback); 
     callback.call(this, e); 
    } 
    return this 
};  

$(":input").only('change', function() { 
    needToConfirm = true; 
}); 

Answer 6

निम्नलिखित काम करता है अच्छी तरह से jQuery में:

var needToConfirm = false; 

$("input,textarea").on("input", function() { 
    needToConfirm = true; 
}); 

$("select").change(function() { 
    needToConfirm = true; 
}); 

window.onbeforeunload = function(){   
    if(needToConfirm) { 
    return "If you exit this page, your unsaved changes will be lost.";   
    } 
} 

और उपयोगकर्ता परिवर्तन सहेजने के लिए कोई फ़ॉर्म सबमिट करना है, तो आप फार्म की आईडी को यह (परिवर्तन #mainForm जोड़ सकते हैं वे 'फिर से प्रस्तुत करने):

$("#mainForm").submit(function() { 
    needToConfirm = false; 
}); 

Answer 7

$(window).bind('beforeunload',function() { 
return "'Are you sure you want to leave the page. All data will be lost!"; 
}); 

$('#a_exit').live('click',function() { 
    $(window).unbind('beforeunload'); 
}); 

से ऊपर मेरे लिए काम करता है।