Categories
Action Adding JavaScript

JavaScript for optimizers #13: Refresh page button

Let’s create another way to refresh with a refresh page button!

This blog post will take you through the process of adding a button that will refresh the page while ignoring the cache.

Business case: Refresh page button

We are going to apply the changes below:

We are adding a refresh page button
We are adding a refresh page button

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
let refreshLocation = document.querySelector(".entry-content");

//functions
function createRefreshButton(location) {
  let containerDiv = document.createElement("div");
  let refreshButton = document.createElement("button");
  let refreshButtonText = document.createTextNode("Hard refresh page");
  refreshButton.appendChild(refreshButtonText);
  refreshButton.classList.add("refreshButton");
  containerDiv.appendChild(refreshButton);
  location.prepend(containerDiv);
  document
    .querySelector(".refreshButton")
    .addEventListener("click", refreshPage);
}

function refreshPage() {
  location.reload(true);
}

//function call
createRefreshButton(refreshLocation);

Breakdown of the code

1. New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

location.reload(true) is a method that reloads the current URL. It is similar to the refresh button at the top of the browser.

2. Logic

//variables

In the first line of code, we open up a comment section for our variables.

let refreshLocation = document.querySelector(".entry-content");

In the second line of code, we get the element where we want to append our refresh button. We get this element with the query selector method. The selector gets the element with the entry-content class. We assign this element to the newly declared refreshLocation.

//functions

In the third line of code, we open up a comment for our functions.

function createRefreshButton(location) {

In the fourth line of code, we start our function in which we will create a refresh button. It takes the location for the new button as the argument. We start the function with the function keyword. This function gets the identifier createRefreshButton.

let containerDiv = document.createElement("div");

In the fifth line of code, we create a div element that will contain our button. This is done to get the margin right. We create this with the createElement method. This takes the string “div” as the argument to create a div type element. We assign this element to the newly declared variable containerDiv.

let refreshButton = document.createElement("button");

In the sixth line of code, we create the button that will be clicked for the page refresh. This is also created with the createElement method. It takes the string “button” as the argument to create a button type element. We assign this to the newly declared variable refreshButton.

let refreshButtonText = document.createTextNode("Hard refresh page");

In the seventh line of code, we create the textNode for our button. We do this with the createTextNode method. The string that is passed down as the argument will dictate the text. We assign this to the newly declared refreshButtonText.

refreshButton.appendChild(refreshButtonText);

In the eighth line of code, we append the text node to our button element using the appendChild method. This method takes the element that it needs to append as the argument.

refreshButton.classList.add("refreshButton");

In the ninth line of code, we add the refresh button class to our button so we easily add an event listener later on. We do this with the classList.add method. This method takes a string as the argument.

containerDiv.appendChild(refreshButton);

In the tenth line of code, we append our refresh button to the container div.

location.prepend(containerDiv);

In the eleventh line of code, we add the button to the DOM with the prepend method. This adds the element before all the children of the selected parent. It should now be visible on the website.

document.querySelector(".refreshButton").addEventListener("click", refreshPage);

In the twelfth line of code, we add an event listener to the button that fires the refresh page function on click.

}

In the thirteenth line of code, we close our createRefreshButton function.

function refreshPage() {

In the fourteenth line of code, we create the refresh page function.

location.reload(true);

In the fifteenth line of code, we set the body of this function. The body reloads the page while ignoring the cache. This is not supported by 100% of the browsers. According to MDN, it should be supported by all modern browsers.

}

In the sixteenth line of code, we close the refreshPage function with a curly bracket.

//function call

In the seventeenth line of code, we open up a comment section for our function calls.

createRefreshButton(refreshLocation);

The last line of code calls the createRefreshButton function with the parent location as the argument.

3. Exercise

The best way to learn JavaScript is to try it. 

I want you to change the code so the page refresh doesn’t ignore the cache.

You are adding a refresh page button that doesn't ignore the cache
You are adding a refresh page button that doesn’t ignore the cache

Can’t figure it out? Send me a message on LinkedIn, and I will help you out! Check out the solution.