How to Refresh Page Using JavaScript & jQuery

This tutorial helps to reload and refresh the webpage using JavaScript and jQuery. We will use JavaScript methods to reload the page and refresh the page. The jQuery AJAX is also used to refresh the page.

Sometimes, We need to reload the web page or refresh the page manually or automatically.

You can refresh the page manually using the ctrl+R keyboard, But with programming, we need to use any client-side programming Like JavaScript.

Checkout Other tutorials:

I will explain three ways of JavaScript to reload the page. JQuery is also used to reload the page using the JavaScript method and AJAX.

We will cover the following topics in this tutorial:

How to Manually Reload Page in JavaScript
Automatically Refresh Page using JavaScript
Auto Refresh Page Using history.go() in JavaScript
Auto Refresh The Page Using window.location.href
Refresh Page Timer Using HTML Meta
Refresh Page Using JavaScript seTimeout()
How to Refresh partial Page Using jQuery Ajax
How To Refresh Whole Page Using Ajax

How to Refresh The Page in JavaScript

JavaScript is a very powerful client-side scripting language. Here, I am showing the number of ways to reload and refresh the page.

How to Manually Reload Page in JavaScript

I am using the button HTML element and attached the click event to trigger the reload page functionality using JavaScript. The user needs to click the button manually.

<title>Refresh or Reload a Page Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row"><input id="reload_page" type="button" value="Reload Page"></div>

We will write the jQuery method to refresh the page. We will attach the click event on "#reload_page" button.

<script>
    $(document).ready(function() {
      // RELOAD PAGE ON BUTTON CLICK EVENT.
        $('#reload_page').click(function () {
            location.reload(true); 
        });
    });
</script>

We have used location.reload() method to reload the page. The location.reload() method reloads the resource from the current URL. Its optional parameter and Boolean type, So when it is set to true, the page always be reloaded from the server. When false or not specified, The Page will be reloaded from the browser cache.

Automatically Refresh Page using JavaScript

We can reload the page automatically using the timer, The JavaScript has setInterval method to execute a method in a given interval.

<script>
    $(document).ready(function() {
        // auto refresh page after 1 second
        setInterval('refreshPage()', 1000);
    });

    function refreshPage() { 
        location.reload(); 
    }
</script>

We have used setInterval() method in the above code. The setInterval() method takes two parameters – the first one is a method name, that has the code to refresh or reload the page. The second one is a time interval, which will use to call the function repeatedly.

Auto Refresh Page Using history.go() in JavaScript

The JavaScript window object has a history property that can be used to refresh the page. This window object returns the read-only property of the History object. The window.history property help to manipulate the browser session history. I am using history.go() method to reload the currently active page bypassing '0' param. This method takes an integer number param that is used to navigate to the back and next page as well.

<script>
    $(document).ready(function() {
        // auto refresh and reload page
        history.go(0);
    });
</script>

Auto Refresh The Page Using window.location.href

The window.location property has href property, The window.location.href returns the URL of the current page. We can also use location.href property to reload and refresh the page. We can target another page as well to reload if you want the current page then set the href self-property.

<script>
    $(document).ready(function() {
        window.location.href = window.location.href;
    });
</script>

Refresh Page Timer Using HTML Meta

The HTML page has a meta tag to refresh the page, You can set the time in the second and target page that will reload at the given interval. You can skip the URL param if you reloading the same page.

<meta http-equiv="refresh" content="5; URL=http://localhost/js_test/reload.html">

The above code will reload the whole page(http://localhost/js_test/reload.html) every 5 seconds.

Refresh Page Time Using JavaScript

You can also refresh the page at the given time interval using JavaScript.

<script>
setTimeout(function(){
   window.location.reload(1);
}, 5000);
</script>

The above code will reload the whole page(http://localhost/js_test/reload.html) every 5 seconds.

How to Refresh Page Using AJAX

Let’s discuss the number of ways to reload the page using jquery Ajax. The AJAX helps to reload the whole page and partial page content.

The first way to reload is the whole page which means you have to refresh the entire page. The second way to refresh is to use partial loading and it loads only those areas that have been changed.

jQuery has the AJAX functionality to reload or refresh the page. The AJAX helps to refresh the whole page or a particular area on the page. We can refresh div, table or button content etc.

The content of the page can be reloaded by using different jQuery Ajax methods. These methods are load(), get() and post(), etc.

How to Refresh DIV Using jQuery AJAX

You might need to refresh a web page after making certain changes to that page. The changes could be, adding a new plugin/extension, change in the code, etc.

$.ajax({
type: 'POST',
    url: post_url, 
    data: post_data,
    success: function(res) {
            $('#event').html(res).delay(2000);
    }
});

In the above code, we are refreshing the div content of '#event' using ajax. We can use the same code to repeatedly refresh the '#event' content using setInterval method.

AJAX Refresh Page Using jQuery

You can also refresh the whole page using jQuery but it will display the page is loading to the end-user, You can reload the whole using layout concepts Like you can create a header, footer, content three partial files. You can reload content div using AJAX that will look like Async refreshing page.

$.ajax({
  url: 'http://example.com/refresh.php',
  success: function(data) {
      $('#container').html(data).delay(2000);
  }
});

Ajax submit form without Reloading Page

You can also submit an HTML form without reloading the page. You’ll need a create an HTML form, submit form using JavaScript, and a server-side language (such as PHP, Python, or Node.js) to save or process data.

Html Form:

<form id="myForm">
    <!-- Your form fields go here -->
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="button" onclick="submitForm()">Submit</button>
</form>

Javascript:

function submitForm() {
    var formData = new FormData(document.getElementById("myForm"));

    // Create an XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Configure it: specify the type of request and the URL
    xhr.open("POST", "submit_form.php", true);

    // Set up a callback function to handle the response
    xhr.onload = function() {
        if (xhr.status === 200) {
            // Handle the success response
            console.log(xhr.responseText);
        } else {
            // Handle the error response
            console.error('Form submission failed!');
        }
    };

    // Send the request with the form data
    xhr.send(formData);
}

I am using PHP, We need a script (e.g., submit_form.php) to process the form data and return a response.

Conclusion

The page refresh functionality is very common in web applications. Javascript and jQuery provide many ways to reload pages, and enable developers to efficiently refresh content, ensuring real-time updates and enhanced interactivity.