how to refresh a div using javascript without refreshing page?

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?

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.

Related FAQ

Here are some more FAQ related to this Article: