jQuery: Refreshing A Web Page With location.reload()
How do you refresh a web page in jQuery? Having trouble finding the answer? Here’s a hint: jQuery is a JavaScript library, so what’s in JavaScript is also in jQuery. We’ll explain below, but for now, here’s another question:
Are you interested in learning more about jQuery, about JavaScript, and about web design in general? There are many, many online courses covering these and other subjects — check them out now!
First: What Is jQuery?
The world of web design and of programming in general can be a maze of jargon, acronyms, and names that all too often look like the leftover tiles in a Scrabble game. People tend to toss names around without explanation, as if everyone should know what they mean, until it can be next to impossible to know what you’re looking at.
So what is jQuery? It’s a JavaScript library — a set of software routines that add new capabilities to standard JavaScript. JavaScript, of course, is a programming language that is frequently used to add features to web pages, and the capabilities that jQuery adds to JavaScript are generally used for things that go on in the user’s browser — that is, “on the client side” (as opposed to “on the server side”).
Using jQuery
The jQuery library is actually a large file of JavaScript code. It is open-source, so you can download it, if you want to use a local copy. it is also hosted at several sites which allow free access, including sites provided by Google, Microsoft, and Amazon. When you use jQuery in a web page, it is generally easiest to simply link to the publicly-available jQuery library at one of these sites:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
The general syntax for using a jQuery command is:
$(selector).do_something(argument1,argument2,...);
The selector is an expression which selects the HTML element(s) on which you will use the command. do_something() is a jQuery method. Methods can have arguments, and they can include functions; the functions can be JavaScript commands or other jQuery methods.
Refreshing A Page
There are times when you’ll want to refresh a web page. The user can generally refresh a page manually with a browser menu command, toolbar selection, or keyboard command (such as F5). But if you want to specifically include a page refresh in the page itself, you have to program it in.
You could include HTTP-EQUIV=”refresh” in the META tag for the page, of course, but that gives you only limited control over reloading, and the user has no access to it from the page.
Bringing jQuery In
What does jQuery have to offer? Remember — jQuery is an add-on to JavaScript, written in JavaScript, so if the capability already exists in JavaScript, jQuery will simply use it — and that’s what happens in this case.
Here’s the JavaScript page-refresh command:
location.reload();
It’s pretty simple: “location” means “this location” or “the current page”, and “reload()” just means reload. The reload() method actually takes either of two optional arguments: “true” reloads the page from the server, and “false” reloads the page from the browser’s cache. The default (with no argument) is to reload from the cache.
Refreshing In jQuery
How do you use location.reload() in jQuery? Since it’s a JavaScript command, you can use it in a jQuery method’s function, like this:
$(select_something).do_something(function() {
location.reload();
});
In jQuery, anything from a very simple single function to a fairly elaborate series of functions, in jQuery or standard JavaScript, can go between the wavy brackets of the (function() […}) structure.
Putting It To Use
Here’s a minimal example which incorporates the reload() command into a jQuery button-handling routine:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ref_butn").click(function(){
location.reload();
});
});
</script>
</head>
<body>
<button id="ref_butn">Refresh the page!</button>
</body>
</html>
First, we link to one of the publicly-available online jQuery libraries. Then, down in the body of the page, we create a button, using a standard HTML <button> tag:
<button id="ref_butn">Refresh the page!</button>
All it does is create a button, give it an ID, and place some text on it. In fact, since this is a minimal example, that’s all the user sees on the page.
Running The jQuery Code
Now let’s look at the jQuery code:
$(document).ready(function(){
$("#ref_butn").click(function(){
location.reload();
});
});
Notice the first and last lines?
$(document).ready(function(){
...
});
The rest of the jQuery code runs within the function of the ready() method. That’s a common way to run jQuery code: first you check to see if the page is fully loaded by selecting the page ($(document)) and using the ready() method, then you do everything else within the ready() method’s function — which will only run when the page is loaded.
What The jQuery Code Does
Here’s the code that actually runs inside the ready() method’s function:
$("#ref_butn").click(function(){
location.reload();
});
It selects the button by ID ($(“#ref_butn”)), then it uses the jQuery click() method, which responds to the button being clicked. The location.reload() command runs within the click() method’s function. That’s actually pretty simple
(Notice that the location.reload() command is running inside the click() method’s function, so it’s basically a function within a function – a not unusual situation in jQuery.)
Timing It
You can trigger the refresh in other ways — for example, with the JavaScript setTimeout method:
setTimeout(function() { location.reload() },1500);
The setTimeout() method sets the time (in milliseconds) before the associated function will be executed. In the above code, the function is location.reload() — the page will reload in 1500 milliseconds (1.5 seconds).
Buttons And setTimeout
You can combine the jQuery button click() function with setTimeout() and location.reload():
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ref_butn").click(function(){
location.reload();
});
$("#ref_in_five").click(function(){setTimeout(function() {
location.reload()
},5000);
});
});
</script>
</head>
<body>
<button id="ref_butn">Refresh the page now!</button>
<button id="ref_in_five"> Wait 5 seconds, then refresh!</button>
</body>
</html>
It works in the same way as the above example, except that there are now two buttons, each with its own ID. The first button, “Refresh the page now!”, still refreshes the page immediately, but the second button , “Wait 5 seconds, then refresh!”, which uses the setTimeout() method, will refresh after 5000 milliseconds — five seconds.
The jQuery library includes a broad range of useful methods, as does JavaScript itself. To find out more about becoming a web developer and working with jQuery, JavaScript, PERL, Python, and other web development tools, look into the wide variety of online classes that are available. We think you’ll be very pleased with what you see!
Recommended Articles
Featured course
Last Updated April 2021
jQuery Hands-On Practical Course! Learn jQuery from Basics & Create 20 amazing real-world jQuery Projects | By Crypters Infotech
Explore CoursejQuery students also learn
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.