Wednesday, May 1, 2024
HomeJavaThe way to reload/refresh a web page utilizing JavaScript and jQuery? Instance

The way to reload/refresh a web page utilizing JavaScript and jQuery? Instance


Hiya guys, in case you are questioning how you can reload or refresh an online web page then don’t be concerned JavaScript offers a number of methods to reload or refresh an HTML web page however the usual approach to do that job is by utilizing window.location object. This object offers a reload() methodology which instructs the browser to reload the web page. The browser can do it from its cache or from the server, which relies upon upon non-compulsory parameter i.e. reload(true) will reload the web page from the server however reload(false) will solely reload the web page from the browser’s cache, which can or could not signify the present model on the server.

You possibly can mix each
jQuery and JavaScript to wrap the web page refresh code as proven in our instance. Btw, this isn’t the one option to refresh a web page in JavaScript, you may as well use historical past.go(0) and location.replcace(locatoin.pathname) to reload the web page.

JavaScript and jQuery instance to reload a web page 

On this instance, I’ll inform you how you can reload a web page from each the server and browser’s cache utilizing jQuery and JavaScript. In our HTML we’ve two buttons, one for reloading pages from the server and the opposite for the refresh web page from the browser’s cache.

Although location.reload() will work in all browsers, you may as well use jQuery to wrap different code like attaching a click on handler to the 2 buttons. And, in case you are to be taught extra these free jQuery programs are additionally nice assets. 
How to reload/refresh a page using JavaScript and jQuery? Example

Right here is the total instance to your reference:

<html>
<head>
<title>The way to reload/refresh a web page utilizing jQuery</title>
</head>

<physique>

<h2>Reloading a web page utilizing jQuery and JavaScript</h2>

<button id="btn_reload">Reload from Server</button>
<button id="btn_refresh">Reload from Browser's cache</button>

<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(doc).prepared(operate() {

$("#btn_refresh").click on(operate(){
location.reload(false); //masses from browser's cache 

});

$("#btn_reload").click on(operate(){
location.reload(true); //masses from server

});

});
</script>

</physique>
</html>

That is all about how you can reload or refresh a web page in jQuery utilizing JavaScript. Simply do not forget that window.location.reload() will instruct the browser to reload the web page, which suggests downloading knowledge from the server, parsing, and displaying it. 

You can too reload a web page from the browser’s cache by utilizing the location.reload(false) methodology. You possibly can learn extra about jQuery strategies by becoming a member of these on-line jQuery programs for novices,  probably the greatest assets to be taught and use jQuery in real-world initiatives.

Different jQuery articles for you

  • 5 Books to be taught jQuery for Internet builders (books)
  • The way to get the present URL, Parameters, and Hash utilizing jQuery? (answer)
  • The way to modify a number of components in a single go? (jquery tutorial)
  • The way to discover all unchecked checkbox in jQuery? (tutorial)
  • jQuery Hiya World Instance (program)
  • The way to use a couple of jQuery UI DatePicker on the JSP web page? (instance)
  • The way to create tab-based UI utilizing jQuery? (instance)
  • The way to use a couple of jQuery UI DatePicker on the JSP web page? (instance)
  • The way to examine/uncheck checkboxes in jQuery? (tutorial)
  • The way to redirect a web page URL utilizing jQuery and JavaScript? (answer)
  • 20 jQuery Interview Questions for Java Internet Builders (listing)
  • The way to load jQuery on an online web page? (answer)

Thanks for studying this text. In the event you like this tutorial then please share it with your folks and colleagues. If in case you have any questions or suggestions then please drop a remark. 



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments