All geek questions in one place

How to access the browser “backward” and “update” the AJAX content on the page (so that the content matches the form that loads it)

I am having trouble finding the answer to this question, I think, because the keywords are too general and related to other things.

I have an index page with a record search form (AJAX) used to load records into the main div on the page. When the first page loads, the form is set to a specific state based on who the user has loaded and the contents of the div, based on the same criteria. When the form is submitted, the contents of the main div are replaced via AJAX.

If the user presses the REFRESH button of browsers or switches to another page and presses the BACK button of the browser, the index page appears in the same state in which the user presses the BACK or REFRESH button, but the contents of the div are the original default value. This pretends that the items listed are the result of the current state of the forms.

Is there a way to determine if the page was displayed from aa BACK or REFRESH browser actions so that I can call the form to submit and update the content based on the current state of the search form ($ ('#. Search_form_submit_button') click ();)? Or what needs to be done for this?

Thank you very much appreciate!

+4
source share
2 answers

If the form has a default value, such as "or" Search here .. ", you can check if the default value has changed, and then submit the form:

// If the input value is different from the know default if($("#search_form_input").val() != "Search here..") { // Update the results on the page $('#search_form_submit_button').click(); }

And call it ready on the page - so inside $(function(){ /* content here */ });

Also, look at History.js - https://github.com/browserstate/History.js

It provides a truly complete history management system. It supports jQuery among several other libraries.

EDIT:

I will talk about some of the things that Renault mentioned in his comment.

You can use this small library of Session Variables to save page change data. Download the js file from this link and include it in the <head> your document:

 <script type="text/javascript" src="sessionvars.js"></script>

Then, when the user performs a search, save the search in the sessvars object, which is now available on all pages:

 sessvars.myObj = { searched: $("#Search_form_input").val() }

Then, when the page loads, check to see if sessvars.myObj.search matters. If this happens, search for this value:

 if(sesvars && sessvars.myObj && sessvars.myObj.searched) { $("#Search_form_input").val(sessvars.myObj.searched); $('#search_form_submit_button').click(); }
+3
source

See the jQuery Address plugin.

+1
source

Source: https://habr.com/ru/post/1343335/

More articles:


All Articles