পৃষ্ঠা লোডের মধ্যে ভেরিয়েবল থাকা

Question

আমি আমার ফর্মটির সাবমিট বাটন প্রেস ক্যাপচার করার চেষ্টা করছি এবং ফর্মটি জমা দেওয়া থাকলে পৃষ্ঠাটি সতেজ হয় এবং আমি কয়েকটি লুকানো ক্ষেত্র দেখি। ফর্মটি আগে জমা দেওয়া হয়েছে কিনা তা আমি ক্যাপচার করতে চাই এবং যদি এটি পুনরায় লোডের সময় জমা দেওয়া হয় তবে আমি লুকানো ক্ষেত্রগুলি লুকিয়ে রাখতে চাই। আমি এটি অর্জনের জন্য একটি বৈশ্বিক পরিবর্তনশীল ব্যবহার করার চেষ্টা করছিলাম, তবে আমি এটি সঠিকভাবে কাজ করতে সক্ষম হয়েছি make

এখানে আমি চেষ্টা করেছি:

  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

আমি মনে করি না কোনও ধরণের স্টোরেজ ছাড়াই এটি করা যেতে পারে। আপনার জেএস ভেরিয়েবলগুলি সমস্ত শুকিয়ে যাবে। আপনার পুরো সুযোগ পুনর্ব্যবহৃত হবে।

— ডেভ আল্পেরোভিচ

আপনি কেন আপনার পৃষ্ঠার বেশিরভাগ অংশকে "আংশিক" রেখে তা সতেজ করেন না?

— ডেভ আল্পেরোভিচ

আংশিক কি? দুঃখিত আমি এটি সম্পর্কে সচেতন নই।

— নিওফিল

আপনি কি এজ্যাক্সের মাধ্যমে ফর্মটি জমা দেওয়ার এবং জমা দেওয়ার পরে ক্ষেত্রগুলি দেখানোর বিষয়ে বিবেচনা করেছেন?

— ড্যানিশাও

পৃষ্ঠাটি রিফ্রেশ করার জন্য কেন আপনার বিশদটি বর্ণনা করা যেতে পারে ? আমরা এটা এড়ানোর থাকে, তাহলে আপনি কি যদি আপনি শুধু চাই কাজ করতে সক্ষম হতে পারে preventDefaultউপর submitইভেন্টটি (পরিবর্তে clickআপনি ব্যবহার করছেন।)

— পেলগের

Answer 1

যেহেতু এইচটিটিপি রাষ্ট্রবিহীন, আপনি যখনই পৃষ্ঠাটি লোড করবেন তখন এটি আপনি জাভাস্ক্রিপ্টে যা সেট করেছেন তার প্রাথমিক মানগুলি ব্যবহার করবে। আপনি জেএসে একটি বৈশ্বিক পরিবর্তনশীল সেট করতে পারবেন না এবং পৃষ্ঠাটি আবার লোড করার পরে কেবল সেই মানটিকেই স্থির রাখতে পারবেন না।

আপনি অন্য কোনও জায়গায় মানটি সঞ্চয় করতে পারেন এমন কয়েকটি উপায় রয়েছে যাতে আপনি এটি জাভাস্ক্রিপ্ট ব্যবহার করে লোডে আরম্ভ করতে পারেন

---

অনুসন্ধানের স্ট্রিং

GETপদ্ধতিটি ব্যবহার করে কোনও ফর্ম জমা দেওয়ার সময় , ইউআরএল একটি কোয়েরি স্ট্রিং ( ?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');

( উত্স )

এটির ব্যবহারের দক্ষতা বর্তমানে আপনার ফর্মটি কীভাবে কাজ করে তার উপর নির্ভর করে, আপনি যদি ইতিমধ্যে একটি পোষ্ট ব্যবহার করেন তবে এটি সমস্যাযুক্ত হতে পারে।

তদ্ব্যতীত, বড় আকারের ডেটার জন্য এটি সর্বোত্তমের চেয়ে কম। স্ট্রিংয়ের পাশ দিয়ে যাওয়া কোনও বড় বিষয় নয় তবে অ্যারে এবং ডেটা অবজেক্টের জন্য আপনার সম্ভবত ওয়েব স্টোরেজ বা কুকিজ ব্যবহার করা উচিত। ব্রাউজারগুলিতে বিশদগুলি কিছুটা আলাদা হলেও ইউআরআই দৈর্ঘ্যের ব্যবহারিক সীমাটি প্রায় 2000 টি অক্ষর

---

ওয়েব স্টোরেজ

এইচটিএমএল 5 প্রবর্তনের সাথে সাথে আমরা ওয়েব স্টোরেজও পেয়েছি, যা আপনাকে পৃষ্ঠা লোড জুড়ে ব্রাউজারে তথ্য সংরক্ষণ করতে দেয়। এমন একটি রয়েছে localStorageযা দীর্ঘ সময়ের জন্য ডেটা সংরক্ষণ করতে পারে (যতক্ষণ না ব্যবহারকারী ম্যানুয়ালি এটিকে সাফ করে না) এবং এটি sessionStorageকেবল আপনার বর্তমান ব্রাউজিং সেশনের সময় ডেটা সংরক্ষণ করে। পরেরটি এখানে আপনার জন্য দরকারী, কারণ আপনি যখন ব্যবহারকারী পরে আসবেন তখন আপনি "ক্লিক" করা সেটকে সত্যে রাখতে চান না।

এখানে আমি বোতাম ক্লিক ইভেন্টের স্টোরেজ সেট করেছি, তবে আপনি এটি জমা দিতে বা অন্য কোনও কিছুতে বাঁধাই করতে পারেন।

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

তারপরে আপনি পৃষ্ঠাটি লোড করার পরে, এটি এটি ব্যবহার করে সেট করা আছে কিনা তা আপনি পরীক্ষা করতে পারেন:

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

যদিও এই মানটি কেবল এই ব্রাউজিং সেশনের সময় সংরক্ষিত হয়, আপনি এটি পূর্বে পুনরায় সেট করতে চান। এটি করতে, ব্যবহার করুন:

sessionStorage.removeItem('clicked');

আপনি যদি কোনও জেএস অবজেক্ট বা অ্যারে সংরক্ষণ করতে চান তবে আপনার এটি স্ট্রিংতে রূপান্তর করা উচিত। অনুমান অনুসারে অন্যান্য ডেটাটাইপগুলি সংরক্ষণ করা সম্ভব হওয়া উচিত, তবে ব্রাউজারগুলিতে এটি এখনও সঠিকভাবে প্রয়োগ করা হয়নি।

//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 = "my value"

এটি কেবল স্ট্রিং সংরক্ষণ করতে পারে, সুতরাং আপনি যদি কোনও বিষয় সংরক্ষণ করতে চান তবে আপনাকে উপরের localStorageউদাহরণের মতোই স্ট্রিংফাই করতে হবে :

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

প্রধান পার্থক্য হ'ল এই তথ্যটি কেবল পৃষ্ঠা রিফ্রেশই নয় বিভিন্ন ডোমেন জুড়েও বজায় রাখা হয়। তবে এটি আপনার বর্তমান ট্যাবে সীমাবদ্ধ।

এর অর্থ আপনি আপনার পৃষ্ঠায় কিছু তথ্য সংরক্ষণ করতে পারবেন এবং ব্যবহারকারী যতক্ষণ না সেই ট্যাবে থাকবেন ততক্ষণ আপনি একই তথ্য অ্যাক্সেস করতে পারবেন এমনকি যদি সে অন্য কোনও ওয়েবসাইট এবং পিছনে ব্রাউজ করে। সাধারণভাবে, আমি এটি ব্যবহার করার বিরুদ্ধে পরামর্শ দেব যদি না আপনার একক ব্রাউজিং সেশনের সময় ক্রস-ডোমেনের তথ্য সংরক্ষণের প্রয়োজন হয়।

Comments

ওহ, লেখার পরে কেবল আমি আপনার অনুগ্রহের বিবরণটি পড়েছি যা "কুকিজ বা স্থানীয় সঞ্চয়স্থান" নেই বলে জানিয়েছে। আমি অন্যদের জন্য এই মন্তব্যটি অক্ষত রাখতে পারি যার এটির প্রয়োজন হতে পারে তবে আমার মনে হয় আপনার কেবল ক্যোরিয় স্ট্রিংটি ব্যবহার করা দরকার।

— স্টিফান মুলার

মূলত আমি আমার ওয়েব অ্যাপ্লিকেশনটির জন্য ইতিমধ্যে অনেক ক্ষেত্রে লোকালস্টোরেশন ব্যবহার করছি এবং আমি অনেকগুলি স্থানীয় স্টোরেজ ভেরিয়েবলগুলি এড়াতে চাই। তবে আমি লোকালস্টোরেজ আইটেমটি এটি শেষ হয়ে গেলে এটি সরিয়ে ফেলার ধারণাটি পছন্দ করি। আমার লোকালস্টোরেজ ভেরিয়েবলটি ব্যবহার করার সময় এটি আমি ভাবিনি।

— নিওফিল

পোস্টের অনুরোধের ক্ষেত্রে আপনি অ্যাকশনটি পরিবর্তন করতে পারেন -অ্যাট্রিবিউট $ ("# ফর্মিড") att "পদ্ধতি") তবে এটি পুনরায়

— লোডের

@ নিউইউবি এই উত্তরটি লেখার পরে বেশ কিছুক্ষণ হয়েছে, তবে আমি একটি নতুন বিকল্প যুক্ত করেছি ( 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

পৃষ্ঠাটি পুনরায় লোড হওয়ার পরে, ক্লিকের মানটি মিথ্যা হিসাবে পাওয়া যায়।

— নিওফিল

@ নিউইউবি আপনি কি মনে করেন যে আপনি একটি ক্যোরি স্ট্রিং পাস করতে পারেন? পৃষ্ঠা রিফ্রেশ সহ বর্তমান পদ্ধতির কাজ হবে না।

— রেনাক্রে