Today, We want to share with you how to refresh a div using javascript without refreshing page.In this post we will show you auto refresh div using javascript, hear for Refresh DIV Contents without Reloading the Entire Page using jQuery we will give you demo and example for implement.In this post, we will learn about
Refresh a HTML div without page load AJAX with an example.
How to reload a div without reloading the entire page?
Contents
jQuery.load() is probably the simply way to load data asynchronously using a data selector, but you can also use any of the jquery ajax some methods (get method, post method, getJSON method, ajax, etc.)
$("#mydiv").load(location.href + " #mydiv");
Refresh a DIV Without Reloading the Page
Example 1: index.html
<!DOCTYPE html>
<html>
<head>
<title>Refresh a DIV Without Reloading the Page - www.pakainfo.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>Will refresh content in 5 seconds</p>
<div id="products" style="margin:5px 0;"></div>
</body>
<script>
$(document).ready(function () {
live_products_status();
});
var i = 1;
function live_products_status() {
$('#products').empty();
$.ajax({
type: 'GET',
url: '../../shop/shops.xml',
dataType: 'xml',
success: function (xml) {
$(xml).find('List').each(function () {
if ($(this).find('code').text() == i) {
$('#products').append(
'<div>' +
'<div><b>Name of Product: </b>' +
$(this).find('ProductName').text() + '</div> ' +
'<div><b>ProductType: </b>' +
$(this).find('ProductType').text() + '</div> ' +
'<div><b>Pcode: </b>' +
$(this).find('Pcode').text() + '</div> ' +
'</div>')
.hide().fadeIn(2000);
}
});
i = i + 1;
if (i >= 3) i = 1;
}
});
}
var reloadXML = setInterval(live_products_status, 5000);
</script>
</html>
The XML
here simple we will Copy the data and save it in file and name it shops.xml.
<?xml version="1.0"?>
<!-- Last edited by Dhara Bhuva @ https://www.pakainfo.com -->
<Library>
<List>
<code>1</code>
<ProductName>Angularjs Master</ProductName>
<ProductType>Computers</ProductType>
<Pcode>85260</Pcode>
</List>
<List>
<code>2</code>
<ProductName>Advanced Laravel Materials</ProductName>
<ProductType>Server Side</ProductType>
<Pcode>24556</Pcode>
</List>
<List>
<code>3</code>
<ProductName>Vuejs 4 Blue Product</ProductName>
<ProductType>Programming</ProductType>
<Pcode>48500</Pcode>
</List>
</Library>
I hope you get an idea about refresh table content without reloading page using javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.