Auto-Refresh Specific HTML element Without Reloading page Using jQuery
What Will I Learn?
- You will learn how to select html element from jQuery selector
- You will learn how to load another page using load() method
- You will learn auto refresh or load specific elenent
Requirements
- You have basic about HTML
- You have basic about JavaScript
- To practice this tutorial you should also have a text editor software, browser and you should install or host jQuery file. Or you can also add jQuery CDN if you don't want to install
- Webserver
In this tutorial I use Mozilla Firefox for Browser and Visual Studio Code for text editor.
Difficulty
- Basic
Tutorial Contents
Auto-Refresh Specific HTML element is the most commonly used by web developers. For example a website that displays the price of crypto which is the result of grab from another website. We must refresh the component displaying the price in seconds, because as we know that the crypto price changes in seconds.
jQuery has provided a method to do this. It is setinterval() method. With this method you can the time of refresh. For example you can set to refresh evey 1 second, 0.5 second, or in other time count. For more detail lets follow steps bellow :
Open your text editor software.
Create two new php file. One file for main file save as
load.phpand the other one is the data file save asdata.php. If you use XAMPP save it at xampp/htdoc. While you use Linux Apache Server save it at var/www.We will create current time auto refresh in every second. Open the
data.phpfile then adddate("Y-m-d h:i:sa")to display current time,
<?php
echo date("Y-m-d h:i:sa");
?>
- Now open the
load.html.Then add the HTLM element as usual
<html>
<head>
<title>AUTO REFRESH</title>
</head>
<body>
</body>
</html>
- As we know, to use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in
<head>element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- Create an element that you will display your load file. For example here I create
<h3>element.
<h3></h3>
- To write the jQuery Script we should open
<script>tag. You can put it in element or in<body>element.
<script></script>
- Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.
$(document).ready(function(){
});
- Select the element that you auto-load the file in it, . In this tutorial I use
<h3>element. In this case we use The element Selector to get HTML element.
$("h3")
- Add load() method to load the
data.phplike this
$("h3").load("data.php");
Save the file and try to run
load.phpon your localhost
if it appears as above you have successfully load data from other pages. But you need to know the time data shown here is not auto refresh. meaning it only displays the time when the first page is openedTo make seconds on clock running, we have to create auto refresh using jquery method. To refresh an element we can use
setInterval()method.
setInterval(function(){
$("h3").load("data.php");
}, 1000);
1000: time refresh, it is in milisecond. So, In this tutorial, the data time fromdata.phpwill refresh in every second. You can change the time up to you to make you more understand about this tutorial.
Save and run the
load.phpfile on your browser. Look the difference from the previous one before using setInterval() method. Now the page appear current time in every second, in other word the page now appear the current time. Not time when First open page like previous.
Finish, Here the full code :
load.php
<html>
<head>
<title>AUTO REFRESH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<center>
<h3></h3>
</center>
<script>
$(document).ready(function(){
setInterval(function(){
$("h3").load("data.php");
}, 1000);
});
</script>
</body>
</html>
data.php
<?php
echo date("Y-m-d h:i:sa");
?>
DOWNLOAD FILE HERE
Curriculum
- How to create a toggle button to show and hide an element
- How to Create Filter Lists using jQuery
- How to Create Filter Tables using jQuery
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Salam kenal
Jangan lupa vote balek ya
Hey @sogata I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x