Geek Answers Handbook

How to call ajax again when the user clicks the back button to return to the last web page?

Below is my code.

HTML code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="body"> <div class="dropdown_div"> <select id="q_type" class="dropdown" onchange="getSubject(this.value)"> <option>Question1</option> <option>Question2</option> </select> </div> <div class="dropdown_div"> <select id="q_subject" class="dropdown"> <option>Subject1</option> </select> </div> </div>

JS code

 function getSubject(val){ $("option", $("#q_subject")).remove(); var option = "<option>Subject</option>"; $("#q_subject").append(option); $.ajax({ url: "api.path", type: 'POST', dataType: 'json', data: {id: id}, async: true, cache: false, success: function(response) { alert("Hi"); $("option", $("#q_subject")).remove(); var option = "<option>Subject1</option>"; option += "<option value=1234>Subject2</option>"; $("#q_subject").append(option); } }); }

How to use pushState in my code and let the user click the back button to return the last page and then still see the ajax data?

+5
source share
5 answers

First of all, you must save the data received from the ajax request to the local storage browser. Subsequently, in order to show the ajax result when the browser starts "backward", you must bind the operators that you call in the ajax.success() method to the ajax.success() window. To omit code duplication, it is best to use a declared function instead of an anonymous one.

 function success(response) { alert("Hi"); $("option", $("#q_subject")).remove(); var option = "<option>Subject1</option>"; option += "<option value=1234>Subject2</option>"; $("#q_subject").append(option); }

Save the data in localstorage and call the success function:

  $.ajax({ url: "api.path", type: 'POST', dataType: 'json', data: {id: id}, async: true, cache: false, success: function(response) { localStorage.setItem("response", response); success(response); } });

Call success() when the back button was pressed:

 window.onpopstate = function (e) { var res = localStorage.getItem('response'); success(res); }
+5
source

You can solve this problem using a local repository store or session. You will also need to have an onload function callback to check if there are any previous values ​​that you saved in local / session storage, if so, show this data in the selection box.

+1
source

I would prefer you to use sessionStorage, which expires when the browser window closes :)

  $.ajax({ url: "api.path", type: 'POST', dataType: 'json', data: {id: id}, async: true, cache: false, success: function(response) { sessionStorage.setItem("DataSaved", response); success(response); } });

And then

 window.onpopstate = function (e) { var res = sessionStorage.getItem('DataSaved'); success(res); }
+1
source

I solved this by including the code below immediately before the $ .get () function

$.ajaxSetup({cache: false});

It works! Try it :)

0
source

please tell me why this is not working?

 window.onpopstate = function (e) { var res = localStorage.getItem('response'); success(res); }
0
source

More articles:


All Articles