पृष्ठ लोड के बीच चर बनाए रखें

Question

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

यहाँ मैं कोशिश की है:

  var clicked = false;

  $(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true;  return true;");

    if (clicked == true) {
      // show hidden fields
    } else {
      // don't show hidden fields
    }
  });

इस कोड में क्या गलत है पर कोई सुझाव?

Comments

मुझे नहीं लगता कि यह कुछ प्रकार के भंडारण के बिना किया जा सकता है। आपके जेएस चर सभी को साफ किया जाएगा। आपके पूरे दायरे को पुनर्नवीनीकरण किया जाएगा।

— डेव अल्परोविच

आप अपने पृष्ठ का अधिकांश भाग "आंशिक" क्यों नहीं रखते और उसे ताज़ा नहीं करते हैं?

— डेव अल्परोविच

आंशिक क्या है? क्षमा करें मुझे इसकी जानकारी नहीं है।

— निओफाइल

क्या आपने अजाक्स के माध्यम से फॉर्म जमा करने और जमा करने के बाद फ़ील्ड दिखाने पर विचार किया है?

— dannyshaw

क्या आप विस्तृत कर सकते हैं कि आपको ताज़ा करने के लिए पृष्ठ की आवश्यकता क्यों है ? अगर हम इसे टाल सकते हैं, तो आप preventDefaultउस submitघटना में जो आप चाहते हैं उसे करने में सक्षम हो सकते हैं (बजाय इसके कि clickआप उपयोग कर रहे हैं।)

— पेलेग

Answer 1

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

ऐसे कुछ तरीके हैं जिनसे आप मूल्य को किसी अन्य स्थान पर संग्रहीत कर सकते हैं ताकि आप इसे जावास्क्रिप्ट का उपयोग करके लोड पर आरंभ कर सकें

---

क्वेरी स्ट्रिंग

GETविधि का उपयोग करके एक फॉर्म सबमिट करते समय , url एक स्ट्रिंग स्ट्रिंग ( ?parameter=value&something=42) के साथ अपडेट हो जाता है । आप एक निश्चित मान के रूप में इनपुट फ़ील्ड सेट करके इसका उपयोग कर सकते हैं। यह सबसे सरल उदाहरण होगा:

<form method="GET">
    <input type="hidden" name="clicked" value="true" />
    <input type="submit" />
</form>

पृष्ठ के प्रारंभिक लोड पर, कोई क्वेरी स्ट्रिंग सेट नहीं है। जब आप यह फ़ॉर्म सबमिट करते हैं, तो इनपुट स्ट्रिंग के संयोजन nameऔर valueसंयोजन को स्ट्रिंग स्ट्रिंग में पास कर दिया जाता है clicked=true। इसलिए जब पृष्ठ उस क्वेरी स्ट्रिंग के साथ फिर से लोड होता है तो आप जांच सकते हैं कि बटन क्लिक किया गया था या नहीं।

इस डेटा को पढ़ने के लिए, आप पृष्ठ लोड पर निम्न स्क्रिप्ट का उपयोग कर सकते हैं:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

( स्रोत )

इसका उपयोग करने की क्षमता इस बात पर निर्भर करती है कि आपका फॉर्म वर्तमान में कैसे काम करता है, यदि आप पहले ही एक पोस्ट का उपयोग करते हैं तो यह समस्याग्रस्त हो सकता है।

इसके अलावा, डेटा के बड़े सेट के लिए यह इष्टतम से कम है। एक स्ट्रिंग के आसपास से गुजरना कोई बड़ी बात नहीं है, लेकिन एरे और डेटा की वस्तुओं के लिए आपको शायद वेब स्टोरेज या कुकीज़ का उपयोग करना चाहिए। जबकि विवरण ब्राउज़रों में थोड़ा भिन्न होता है, URI की लंबाई की व्यावहारिक सीमा लगभग 2000 वर्ण होती है

---

वेब भंडारण

एचटीएमएल 5 की शुरुआत के साथ हमें वेब स्टोरेज भी मिला, जो आपको पेज लोड के ब्राउज़र में जानकारी को सहेजने की अनुमति देता है। वह है localStorageजो लंबी अवधि के लिए डेटा को बचा सकता है (जब तक उपयोगकर्ता इसे मैन्युअल रूप से साफ़ नहीं करता है) और sessionStorageजो आपके वर्तमान ब्राउज़िंग सत्र के दौरान ही डेटा बचाता है। उत्तरार्द्ध आपके लिए यहां उपयोगी है, क्योंकि आप उपयोगकर्ता को बाद में वापस आने पर "क्लिक" सेट को सही नहीं रखना चाहते हैं।

यहां मैंने बटन क्लिक इवेंट पर स्टोरेज सेट किया है, लेकिन आप इसे सबमिट या कुछ और बनाने के लिए भी बांध सकते हैं।

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

जब आप पृष्ठ को लोड करते हैं, तो आप यह जांच सकते हैं कि क्या यह इस का उपयोग कर सेट है:

var clicked = sessionStorage.getItem('clicked');

भले ही यह मान इस ब्राउज़िंग सत्र के दौरान सहेजा गया हो, फिर भी यह संभव हो सकता है कि आप इसे पहले रीसेट करना चाहते हैं। ऐसा करने के लिए, उपयोग करें:

sessionStorage.removeItem('clicked');

यदि आप JS ऑब्जेक्ट या एरे को सेव करना चाहते हैं, तो आपको उसे स्ट्रिंग में बदलना चाहिए। युक्ति के अनुसार यह अन्य डेटाटिप्स को बचाने के लिए संभव होना चाहिए, लेकिन यह अभी तक ब्राउज़रों में सही ढंग से लागू नहीं हुआ है।

//set
localStorage.setItem('myObject', JSON.stringify(myObject));

//get
var myObject = JSON.parse(localStorage.getItem('myObject'));

ब्राउज़र समर्थन बहुत बढ़िया है इसलिए आपको इसका उपयोग करने के लिए सुरक्षित होना चाहिए जब तक कि आपको वास्तव में पुराने / अस्पष्ट ब्राउज़र का समर्थन करने की आवश्यकता न हो। वेब संग्रहण भविष्य है।

---

कुकीज़

वेब संग्रहण का एक विकल्प कुकी में डेटा को सहेज रहा है। कुकीज़ मुख्य रूप से डेटा सर्वर-साइड पढ़ने के लिए बनाई जाती हैं, लेकिन इसका उपयोग विशुद्ध रूप से क्लाइंट-साइड डेटा के लिए भी किया जा सकता है।

आप पहले से ही jQuery का उपयोग करते हैं, जो कुकीज़ को काफी आसान बनाता है। दोबारा, मैं clickयहां कार्यक्रम का उपयोग करता हूं, लेकिन कहीं भी उपयोग किया जा सकता है।

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

फिर पेज लोड पर आप कुकी को इस तरह पढ़ सकते हैं:

var clicked = $.cookie('clicked');

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

if(clicked === "true") {
    //doYourStuff();
    $.cookie('clicked', null);
}

(कुकीज़ को सेट / पढ़ने का एक गैर-jQuery तरीका यहीं पाया जा सकता है )

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

---

window.name

हालांकि यह मेरे लिए एक हैक की तरह लगता है जो शायद लोकलस्टोरेज / सेशनस्ट्रेज से पहले उत्पन्न हुआ था, आप window.nameसंपत्ति में जानकारी स्टोर कर सकते हैं:

window.name = "my value"

यह केवल तारों को संग्रहीत कर सकता है, इसलिए यदि आप किसी ऑब्जेक्ट को सहेजना चाहते हैं, तो आपको इसे उपरोक्त localStorageउदाहरण की तरह ही कड़ा करना होगा :

window.name = JSON.stringify({ clicked: true });

मुख्य अंतर यह है कि इस जानकारी को न केवल पृष्ठ ताज़ा बल्कि विभिन्न डोमेन पर भी रखा जाता है। हालाँकि, यह उस वर्तमान टैब तक ही सीमित है, जिसमें आप हैं।

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

Comments

ऊग, लिखने के बाद ही मैंने आपका भरपूर वर्णन पढ़ा, जिसमें कहा गया था कि "कोई कुकीज़ या स्थानीय भंडारण नहीं"। मैं इस टिप्पणी को दूसरों के लिए अक्षुण्ण रखूंगा, जिन्हें इसकी आवश्यकता हो सकती है, लेकिन आपको मेरे द्वारा अनुमान किए गए क्वेरी स्ट्रिंग का उपयोग करने की आवश्यकता होगी।

— स्टीफ़न मुलर

मूल रूप से मैं पहले से ही अपने वेब एप्लिकेशन के लिए बहुत सारे मामलों में लोकलस्टोरेज का उपयोग कर रहा हूं और मैं बहुत सारे लोकलस्टोरेज वैरिएबल के उपयोग से बचना चाहूंगा। हालाँकि मुझे इसके साथ होने के बाद लोकलस्टोरेज आइटम को हटाने का विचार पसंद है। यह एक ऐसी चीज थी जिसके बारे में मैंने नहीं सोचा था कि अपने लोकलस्टोरेज वैरिएबल का इस्तेमाल कब करूं।

— नियोप्ले

पोस्ट अनुरोध के मामले में आप एक्शन-डॉलर ("# फॉर्मिड") को संशोधित कर सकते हैं। Attr ("एक्शन", url + "और क्लिक किया गया = 1") और $ ("# फॉर्मिड") से GET या POST का भी पता लगाएं। "विधि") लेकिन यह हल नहीं हो सकता है कि रीलोड समस्या का पता कैसे लगाया जाए

— टेरो टोलेनन

@ TheNewbie जब से मैंने यह उत्तर लिखा है तब से कुछ समय हो गया है, लेकिन मैंने अभी एक नया विकल्प ( window.name) जोड़ा है । यह सिर्फ कुकीज़ / लोकलस्टोरेज का उपयोग किए बिना आपको वास्तव में क्या चाहिए।

— स्टीफन मुलर

मैं जोड़ना चाहता था कि स्थानीय और सत्र भंडारण नए ब्राउज़रों पर पूरी तरह से विश्वसनीय नहीं है। आमतौर पर window.name में एक गिरावट है।

— जावास्क्रिप्ट

Answer 2

उपयोग करने का प्रयास करें $.holdReady(),history

function show() {
  return $("form input[type=hidden]")
          .replaceWith(function(i, el) {
            return "<input type=text>"
          });
}

$.holdReady(true);
    if (history.state !== null && history.state.clicked === true) {
       // show hidden fields
       // if `history.state.clicked === true` ,
       // replace `input type=hidden` with `input type=text`
       show();
       console.log(history);

    } else {
        // don't show hidden fields
        console.log(history);
    }
$.holdReady(false);

  $(document).ready(function() {

    $("input[type=submit][value=Search]")
    .on("click", function(e) {
        e.preventDefault();
        if (history.state === null) {
          // do stuff
          history.pushState({"clicked":true});
          // replace `input type=hidden` with `input type=text`
          show();
          console.log(history);
        } else {
          // do other stuff
        };
    });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
    <input type="text" name="name" value="" />
    <input type="submit" value="Search" />
    <input type="hidden" />
    <input type="hidden" />
</form>

Answer 3

का उपयोग करना localeStorageया sessionStorageसबसे अच्छा दांव लगता है।

गोलाकार clickedदायरे में चर को बचाने के लिए इसे इस तरह से संग्रहीत करें:

if(localeStorage.getItem("clicked") === null)
    localeStorage.setItem("clicked", "FALSE"); // for the first time

$(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch';return true;");

    var clicked = localeStorage.getItem("clicked") == "FALSE" ? "TRUE" : "FALSE";

    localeStorage.setItem("clicked", clicked);

    if (clicked == "TRUE") {
      // show hidden fields
    } else {
      // don't show hidden fields
    }

});

Comments

मैं स्थानीय स्तर या सेशनस्टोर का उपयोग नहीं करना चाहता हूं।

— नियोफाइल

Answer 4

आप यह कोशिश कर सकते हैं:

 $("input[type='submit'][value='Search']").click(function(){
     form.act.value='detailSearch'; 
     clicked = true;  
     return true;
});

Comments

जब पृष्ठ पुनः लोड होता है, तब भी क्लिक किए गए मान को असत्य माना जाता है।

— निओफाइल

@ क्या आपको लगता है कि आप एक क्वेरी स्ट्रिंग पास कर सकते हैं? पेज रिफ्रेश होने से करंट एप्रोच काम नहीं करेगा।

— दोपहर