DEV Community

Cover image for JavaScript Location.reload() 🔄
Maxine
Maxine

Posted on • Updated on

JavaScript Location.reload() 🔄

Before, I write a single word about Javascript, allow me to say one thing, it's a beast.

Switching gears from Ruby to JS threw me for a loop, but after lots of practice and reading it all started to click. So, speaking of clicking, let's explore Javascript and all that can be done in a single click.

The beastly language was Phase four of Flatiron's curriculum, and with every phase comes a project. I was scrambling just to learn the language in 2 weeks, and now I had to make a single page application. oof. But, somehow, we managed, and here we are writing this blog post with some Javascript knowledge (that will be expanded upon over time), and a fully completed project.

When creating my first JS application I encountered setbacks, as most new programmers will when coding, and that's okay! My biggest piece of advice for this, disregarding the language, is to read documentation! Mozilla is what is used for Javascript, and thoroughly explains each and every concept there is. This will save you hours of time and frustration, and unlike some other documentation (I found) Mozilla is easy to read and understand.

Out of all the setbacks, I found that not having my application reload/refresh after I made a submission of some kind was very annoying. The last thing I wanted was for a user to be confused about their submission, or have to manually refresh it after, each time. Upon some googling and research came Location.reload(). This magic method reloads the current URL, similarly to a user manually refreshing the page. Exactly what I needed!

Adding it into your code is simple. Wherever your input or button tags exist, add it in! See the following from my code as an example:

Alt Text

And there you have it! An application that instantly reloads upon a click.

Top comments (3)

Collapse
 
linehammer profile image
linehammer

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser's cache. The true parameter forces the page to release it's cache.

The window.location.reload() will reload from the server and will load all your data, scripts, images, etc. again. So if you just want to refresh the HTML, the window.location = document.URL will return much quicker and with less traffic. But it will not reload the page if there is a hash (#) in the URL.

Collapse
 
haki9975 profile image
Elias Robert Hakim

Nice one, I didn't know about that method and I'm happy that you shared it. I know for a fact that I could have used that in my application.

Collapse
 
maxinejs profile image
Maxine

Add it in super quick lol!! If you need help slack me, but it's pretty easy.