बैक बटन एक डायनामिक फॉर्म

Question

हैंडल करें मेरे पास टेक्स्ट फ़ील्ड की एक सरणी है। उपयोगकर्ता (जावास्क्रिप्ट के माध्यम से) फ़ॉर्म में टेक्स्ट फ़ील्ड की मनमानी संख्या जोड़ सकता है। फॉर्म सबमिट करने और बैक बटन दबाने के बाद फॉर्म केवल उन फ़ील्ड के साथ प्रदर्शित होता है जो मूल रूप में प्रस्तुत किए जाने पर मूल रूप में होते थे (कोई भी जोड़ा गया टेक्स्ट फ़ील्ड गुम हो जाता है)। जब उपयोगकर्ता ने इसे सबमिट किया था तो बैक बटन को राज्य में फॉर्म प्रस्तुत करने की अनुमति देने का सबसे अच्छा तरीका क्या है? किसी भी विचारों का स्वागत है, कुछ बातें मैं कोशिश की है इस प्रकार हैं:

• एक कुकी में प्रपत्र डेटा रखो (इस कारणों लेकिन मुझे के लिए सबसे बड़ा हत्यारा एक जोड़े के लिए महान काम नहीं करता है कुकीज़ हैं कि आकार में 4K)
• एक सत्र
• में प्रपत्र डेटा रखो तक ही सीमित AJAX के माध्यम से फार्म जमा करें और फिर इतिहास का प्रबंधन

मदद के लिए धन्यवाद। मैंने अपनी वेबसाइट पर http://fishtale.org/formtest/f1.php पर एक टेस्ट फॉर्म पोस्ट किया है।

<form action="f2.php" method="post"> 
<input type="text" name="text[]" id="text1"/> 
<input type="submit" name="saveaction" value="submit form" /> 
</form> 

<a href="f2.php" id="add_element">Add Form Element</a> 

<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script> 

<script type="text/javascript" > 
    $('#add_element').click(function (event) { 
     event.preventDefault(); 
     $('#text1').after('<input type="text" name="text[]" />'); 
    }); 
</script> 

यह एक प्रश्न मैंने कुछ समय पहले पोस्ट के समान है, Best Way For Back Button To Leave Form Data, हालांकि, इस फार्म के तत्वों उपयोगकर्ता द्वारा संशोधित कर रहे हैं: इसके अलावा यहां एक सरल व्यवहार मैंने कहा प्रदर्शन रूप है।

Answer 1

मुझे इसके लिए एक पूर्वलेखित लाइब्रेरी नहीं मिल रही है, लेकिन मुझे यकीन है कि इसे पहले हल किया गया है।

1. उपयोग command pattern इसलिए प्रत्येक विधि है जो नियंत्रण जोड़कर पेज के यूआई को संशोधित करता है यह भी एक AJAX विधि invokes उस पर विधि लागू (शाब्दिक जावास्क्रिप्ट प्रतिनिधित्व) पुश करने के लिए: यदि मैं यह करने के लिए अपने आप को किया था मैं इस दृष्टिकोण ले जाएगा सर्वर के सत्र में संग्रहीत एक कतार।

2. शरीर चालू होने के बाद, उपयोगकर्ता के सत्र के लिए सर्वर के सत्र से पूछने के लिए एक AJAX विधि का उपयोग करें, जिस पर उपयोगकर्ता चालू है पृष्ठ के लिए कमांड कतार के लिए। यदि कोई पुनर्प्राप्त किया जाता है, तो उपयोगकर्ता के द्वारा किए गए उसी क्रम में पृष्ठ के UI को पुनर्निर्माण करने के लिए कतार के प्रत्येक सदस्य को केवल eval किया जाता है।

इस दृष्टिकोण से ध्यान रखें कि आप केवल नियंत्रणों के जोड़ों को रिकॉर्ड नहीं कर रहे हैं, बल्कि हटा भी रहे हैं। आपको उपयोगकर्ता इनपुट नियंत्रणों के लिए अलग-अलग राज्य धारकों की आवश्यकता होगी, जैसे टेक्स्ट बॉक्स (आपको सर्वर-साइड सत्र की आवश्यकता होगी AJAX विधि पहुंच के साथ)।

Answer 2

आप वेब पेज के शीर्ष पर अपना खुद का बैक बटन बना सकते हैं और इसे मानक वेब ब्राउजर बैक बटन से बड़ा और सुंदर बना सकते हैं।

हुड के तहत आपका कोड पता कर सकता था कि पिछला राज्य क्या था और इसे वापस कर दिया गया था या यदि कोई पिछली स्थिति नहीं थी तो आप शायद ब्राउज़र के बैक फ़ंक्शन को कॉल कर सकते हैं?

Answer 3

<input type="hidden"> (name के साथ या फ़ॉर्म के बाहर, तो यह सबमिट नहीं किया गया है) जिसमें आप अतिरिक्त फ़ील्ड जोड़ने और उनके मूल्यों की एक एन्कोडेड सूची संग्रहीत करते हैं? जबकि ब्राउज़र को 'बैक' पर नए जोड़े गए फ़ील्ड याद नहीं होंगे, यह प्रारंभ से फ़ॉर्म में छिपे हुए फ़ील्ड के मानों को याद रखेगा।

यहाँ एक उदाहरण है कि दस्तावेज़ अनलोड पर अतिरिक्त क्षेत्रों की बचत होती है और तैयार पर उन्हें पुन: प्राप्त करता है:

<input type="hidden" id="remembertexts" /> 

<form action="http://www.google.com/" method="get"> 
    <div id="texts"> 
     <input type="text" name="text[]" value="" /> 
    </div> 
    <div> 
     <input type="submit" /> 
     <input type="button" id="addtext" value="+" /> 
    </div> 
</form> 

<script type="text/javascript"> 

    // Add new field on button press 
    // 
    $('#addtext').click(function() { 
     addInput(''); 
    }); 

    function addInput(text) { 
     $('#texts input').eq(0).clone().val(text).appendTo('#texts'); 
    }; 

    // Store dynamic values in hidden field on leaving 
    // 
    $(window).bind('beforeunload', function() { 
     var vals= []; 
     $('#texts input').each(function() { 
      vals.push(encodeURIComponent(this.value)); 
     }); 
     $('#remembertexts').val(vals.join(';')); 
    }); 

    // Retrieve dynamic values on returning to page 
    // 
    $(function() { 
     var extratexts= $('#remembertexts').val().split(';').slice(1); 
     $.each(extratexts, function() { 
      addInput(decodeURIComponent(this)); 
     }); 
    }); 
</script> 

नोट्स:

• आप window.onbeforeunload के बजाय form.onsubmit उपयोग कर सकते हैं अगर आप केवल करने के लिए इसकी आवश्यकता है सबमिशन पर मूल्य याद रखें। onunload काम नहीं करता है क्योंकि कुछ ईवेंट पहले से ही पुराने फॉर्म मानों को संग्रहीत कर लेते हैं।

• फ़ायरफ़ॉक्स में छिपी हुई इनपुट की स्थिति महत्वपूर्ण है। किसी कारण से, यदि आप इसे गतिशील रूप से जोड़े गए फ़ील्ड के नीचे डाल देते हैं, तो फ़ायरफ़ॉक्स इस बारे में भ्रमित हो जाता है कि यह कौन सा इनपुट है और मूल्य को याद करने में विफल रहता है।

• यह उदाहरण ओपेरा में काम नहीं करता है। इसे ओपेरा में काम करने के लिए बनाया जा सकता है, लेकिन यह दर्द है। ओपेरा के भार और अनलोड घटनाओं की कॉलिंग असंगत है इसलिए आपको इसके बजाय ऑनसबमिट का उपयोग करना होगा, या छिपे हुए क्षेत्र को मतदान अंतराल पर सेट करना होगा, या कुछ। इससे भी बदतर, जब ओपेरा पिछले फॉर्म-फील्ड मानों को याद करता है, तो वास्तव में ऑनलोड के बाद इसे तब तक भर नहीं आता है! यह पहले से ही कई, कई फॉर्म-स्क्रिप्टिंग समस्याओं का कारण बनता है। यदि आप ओपेरा संगतता की आवश्यकता है तो फॉर्म मानों को समाप्त होने तक आप अपने ऑनलोड में एक छोटा टाइमआउट डालकर उस पर काम कर सकते हैं।

Answer 4

बैक बटन के उपयोग को अवरुद्ध करें। जब बैक बटन दबाया जाता है, तो नए फ़ील्ड वाले उपयोगकर्ता के लिए पिछले पृष्ठ को फिर से प्रस्तुत करना, या तो स्पष्ट रूप से अगर यह समझ में आता है, या छुपा हुआ है। इस तरह उपयोगकर्ता सामान्य रूप से बैक बटन का उपयोग करने में सक्षम होता है और आपके पास 'पिछले' पृष्ठ की उपस्थिति पर पूर्ण नियंत्रण होता है।

अपने विशिष्ट उपयोग मामले में, आपको केवल उन सभी फ़ील्ड के साथ पृष्ठ प्रस्तुत करना होगा जो सबमिट किए गए मानों के साथ दृश्यमान और भरे हुए हैं।

यह किसी भी विज़ार्ड प्रकार की प्रक्रिया के लिए पालन करने के लिए एक अच्छा पैटर्न है जहां आप उपयोगकर्ता को भरने के लिए फॉर्म का अनुक्रम प्रदान करते हैं और वे पिछले फॉर्म पर वापस जाने का विकल्प चुन सकते हैं।

इसे पूरी तरह से स्पष्ट करने के लिए, मैं सुझाव दे रहा हूं कि आप फॉर्म सबमिशन को ट्रिगर करने के लिए this advice on capturing the onUnload event का उपयोग करें (ताकि आप दर्ज मूल्य प्राप्त कर सकें) और पिछले पृष्ठ को फिर से प्रस्तुत करने के लिए "बैक" प्रदर्शित होगा (मानों के बिना)। एकमात्र विकल्प अजाक्स का उपयोग प्रत्येक बार जब उपयोगकर्ता फ़ील्ड छोड़ देता है, दर्ज किए गए मान भेजने के लिए उपयोग करता है, और उसके बाद प्रत्येक पृष्ठ को AJAX के माध्यम से सर्वर के साथ जांच करने के लिए अतिरिक्त मान पुनर्प्राप्त करने के लिए जांचें।

• Mastering the Back Button with Javascript
• Don't Let the Door Hit You
• Cross Browser unload Event and the Back Button
• Persisting portlet forms data in WebSphere Portal V5.1
:

यहाँ कुछ अतिरिक्त पृष्ठों है कि वापस बटन के समारोह पर नियंत्रण लेने और रूपों डेटा लागू करने के लिए अनलोड घटना का उपयोग कर चर्चा कर रहे हैं

Answer 5

अच्छा बी में rowsers आप इसे द्वारा तोड़कर पूरी तरह से काम कर सकते हैं।

फ़ायरफ़ॉक्स 1।5 एक ही ब्राउज़र सत्र के लिए, अपने जावास्क्रिप्ट राज्यों सहित पूरे वेब पृष्ठों के लिए मेमोरी कैशिंग में उपयोग करता है। विज़िट किए गए पृष्ठों के बीच पिछड़े और आगे जाने के लिए कोई पृष्ठ लोडिंग की आवश्यकता नहीं है और जावास्क्रिप्ट राज्य संरक्षित हैं। source

यह Opera और WebKit भी में समर्थित है।

1. onunload, onbeforeunload का उपयोग न करें: हालांकि डोम कैश आप नियमों का पालन में ही संभव है।

2. Cache-control: no-store या must-revalidate का उपयोग न करें।
   PHP में आपको session.cache_limiterpatently_ridiculous से बदलना होगा (मुझे लगता है कि वे इसे nocache) none पर वर्तनी कर सकते हैं।

   session_cache_limiter('none'); 
   

3. दुर्भाग्य से HTTPS भी बाहर है।

यदि आप पृष्ठ को पुनः लोड करने के लिए ब्राउज़र को मजबूर नहीं करते हैं, तो वे नहीं करेंगे। वे डीओएम और उसके मूल्यों को अपरिवर्तित रखेंगे, ठीक उसी तरह RFC 2616 suggests।

---

हालांकि, आप जगह डेटा छिपाया जा के लिए देख रहे हैं, वहाँ अविश्वसनीय रूप से चतुर हैक - window.name can store megabytes of data। यह सर्वर पर नहीं भेजा गया है, और यह विंडोज़ के बीच साझा नहीं है।

वहाँ भी 4.

Answer 6

चरण 2 हैं Flash कुकी और एचटीएमएल 5 localStorage IE8 और सफारी में कार्यान्वित किया जाता है: स्क्रिप्ट फ़ॉर्म संसाधित मूल्यों एक सरणी और दुकानों एक सत्र चर में है कि सरणी में प्रवेश डालता है (या टेक्स्ट/डीबी/जो भी आपको उचित लगता है)।

चरण 1: उस सत्र को आउटपुट करने वाली स्क्रिप्ट एक जावास्क्रिप्ट (जो बदले में फॉर्म भरती है) जोड़ती है यदि वह सत्र चर पाया जाता है (और यह सत्र चर को भी साफ़ करता है)।