How to reload page js

Preferred method to reload page with JavaScript? [closed]

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

which way to reload a current page (using a button) would you prefer?

As the URL of the page changes frequently AFAIK a ‘fallback function’ like

won’t work for me, right?

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Depends on what you want to do. The fourth and sixth methods there won’t reload any form data, they essentially make a separate visit to the page. Some versions of Firefox also have issues with the third method. Other than that, I’d go with the fifth as a personal preference. It seems the clearest.

You may also do:

wd represents window || document:

Not the answer you’re looking for? Browse other questions tagged javascript reload or ask your own question.

Linked

Related

Hot Network Questions

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to reload a page using JavaScript

How can I reload the page using JavaScript?

I need a method that works in all browsers.

12 Answers 12

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

JavaScript 1.2 and newer

JavaScript 1.1

JavaScript 1.0

See this MDN page for more information.

If you are refreshing after an onclick then you’ll need to return false directly after

I was looking for some information regarding reloads on pages retrieved with POST requests, such as after submitting a method=»post» form.

To reload the page keeping the POST data, use:

To reload the page discarding the POST data (perform a GET request), use:

Hopefully this can help others looking for the same information.

JavaScript window.location object can be used

window : in JavaScript represents an open window in a browser.

location : in JavaScript holds information about current URL.

The location object is like a fragment of the window object and is called up through the window.location property.

location object has three methods:

Refresh a page using JavaScript or HTML [duplicate]

How can I refresh a page using JavaScript or HTML?

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

window.location.reload(); in JavaScript

in HTML (where 1 = 1 second).

Here are 535 ways to reload a page using javascript, very cool:

Here are the first 20:

and the last 10:

If false, the page will be reloaded from cache, else from the server.

should work however there are many different options like:

You can also use

It works fine for me.

If it has something to do control updates on cached pages here I have a nice method how to do this.

This method requires at least one request even when no request is needed because it already exists in the local browser cache. But the overhead is less comparing to using no cache at all (to be sure the page will show the right updated content). This requires just a few bytes for each page request instead of all content for each page.

IMPORTANT: The version info request must be implemented on your server otherwise it will return the whole page.

Example of version string returned by www.yoursite.com/page/about?getVer=1&__[date] : skg2pl-v8kqb

To give you an example in code, here is a part of my library (I don’t think you can use it but maybe it gives you some idea how to do it):

If you are using version independent resources like javascript or css files, add versionnumbers (implemented with a url rewrite and not with a query because they mostly won’t be cached). For example: www.yoursite.com/ver-01/about.js

For me, this method is working great, maybe it can help you too.

Javascript Reload Page

In order to reload the page without fully reloading everything I’m using:

However, this doesn’t work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

Any fix for this that will reload the page (as above) without reloading the cached images and scripts?

5 Answers 5

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

As MDN says, the second parameter is a boolean indicating whether to bypass the cache or not. false keeps using the cache, as you wanted.

icktoofay explains the workaround so I’m just addressing this question:

However, this doesn’t work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

When the assign(url) method is invoked, the UA must resolve the argument, relative to the entry script’s base URL, and if that is successful, must navigate the browsing context to the specified url.

So the navigate operation only sees an absolute URL, so there is no difference assigning just a fragment vs assigning an absolute URL that is the same as the page URL with a fragment.

8 Fragment identifiers: Apply the URL parser algorithm to the absolute URL of the new resource and the address of the active document of the browsing context being navigated. If all the components of the resulting parsed URLs, ignoring any fragment components, are identical, and the new resource is to be fetched using HTTP GET or equivalent, and the parsed URL of the new resource has a fragment component that is not null (even if it is empty), then navigate to that fragment identifier and abort these steps.

When the user agent is required to scroll to the fragment identifier, it must either change the scrolling position of the document using the scroll an element into view algorithm defined in the CSSOM View specification, with the align to top flag set, or perform some other action, such that the indicated part of the document is brought to the user’s attention.

How to reload current page without losing any form data?

Can I reload current page without losing any form data? I used..

Here is my full code.

And at my JS file..

14 Answers 14

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can use various local storage mechanisms to store this data in the browser such as the Web Storage API, IndexedDB and WebSQL (deprecated) (and UserData with IE).

The simplest and most widely supported is Web Storage where you have persistent storage ( localStorage ) or session based ( sessionStorage ) which is in memory until you close the browser. Both share the same API.

You can for example (simplified) do something like this when the page is about to reload:

Web Storage works synchronously so this may work here. Optionally you can store the data for each blur event on the elements where the data is entered.

At page load you can check:

getItem returns null if the data does not exist.

Replace » localStorage » with » sessionStorage » in the code above if you want to store data only temporary.

I modified K3N’s code to work for my purpose, and I added some comments to help others figure out how sessionStorage works.

Find this on GitHub. Specially created for it.

This answer was extremely helpful to me, and saves the trouble of going through each field manually:

As some answers mention, localStorage is a good option and you can certainly do it yourself, but if you’re looking for a polished option, there is already a project on GitHub that does this called garlic.js.

I usually submit automatically my own form to the server and reload the page with filled arguments. Replace the placeholder arguments with the params your server received.

Agree with HTML5 LocaStorage. This is example code

You have to submit data and reload page (server side render form with data), just reloading will not preserve data. It is just your browser might be caching form data on manual refresh (not same across browsers).

You can use localStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) to save values before refreshing the page.

You can use a library I wrote, FormPersistence.js which handles form (de)serialization by saving values to local/session storage. This approach is similar to that linked in another answer but it does not require jQuery and does not save plaintext passwords to web storage.

The optional second parameter of each FormPersistence function defines whether to use local storage ( false ) or session storage ( true ). In your case, session storage is likely more appropriate.

The form data by default will be cleared from storage upon submission, unless you pass false as the third parameter. If you have special value handling functions (such as inserting an element) then you can pass those as the fourth parameter. See the repository for complete documentation.