How to refresh DIV content using jQuery

You can reload or refresh an entire web page automatically using jQuery. That’s simple. Now, how do you refresh only the contents inside a DIV element (or any element)? In jQuery, you can use the setInterval() function to refresh or load new contents inside a DIV element at a given interval. I’ll show you how this is done.

There are plenty of other examples on jQuery with XML and you can read all of it here.

Now, there can be multiple DIV’s with different contents on a single page and we can refresh all the DIV’s contents at a specified time interval. We can set different time intervals for different DIV and refresh each without reloading the page.

Here in my example, I have an XML file (library.xml) with few nodes in it. I’ll extract each node (with values) every 5 seconds and display the contents in the DIV. That is, the DIV gets refreshed with new values, extracted from the XML file every 5000 milliseconds.

See this demo

👉 Now, you can also do this using plain JavaScript. See this example here.

The XML

Copy the data and save it in file and name it library.xml.

<?xml version="1.0"?>
<!-- Last edited by Arun Banik @ https://encodedna.com -->
<Library>
  <List>
    <code>1</code>
    <BookName>Computer Architecture</BookName>
    <Category>Computers</Category>
    <Price>125.60</Price>
</List>
<List>
    <code>2</code>
    <BookName>Advanced Composite Materials</BookName>
    <Category>Science</Category>
    <Price>172.56</Price>
</List>
 <List>
    <code>3</code>
    <BookName>Asp.Net 4 Blue Book</BookName>
    <Category>Programming</Category>
    <Price>56.00</Price>
 </List>
</Library>

The Markup and the Script

<!DOCTYPE html>
<html>
<head>
    <title>Refresh a DIV Without Reloading the Page</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="books" style="margin:5px 0;"></div>
</body>

<script>    
    $(document).ready(function () {
        refresh_Div();
    });

    var i = 1;
    function refresh_Div() {
        $('#books').empty();

        $.ajax({
            type: 'GET',
            url: '../../library/library.xml',
            dataType: 'xml',
            success: function (xml) {

                $(xml).find('List').each(function () {

                    if ($(this).find('code').text() == i) {
                        $('#books').append(
                        '<div>' +
                            '<div><b>Name of Book: </b>' +
                                $(this).find('BookName').text() + '</div> ' +
                            '<div><b>Category: </b>' +
                                $(this).find('Category').text() + '</div> ' +
                            '<div><b>Price: </b>' +
                                $(this).find('Price').text() + '</div> ' +
                        '</div>')
                        .hide().fadeIn(2000);
                    }
                });

                i = i + 1;
                if (i >= 3) i = 1;
            }
        });
    }

    var reloadXML = setInterval(refresh_Div, 5000);
</script>
</html>

Try it

In the above script, the setInterval() method calls the refresh_Div() method every 5 seconds (5000 milliseconds). The method has an Ajax code that will extract XML data, node by node in every 5 seconds and append it to the DIV, without reloading the page.

Similarly, you can display images (like an automatic thumbnail slider) and show the images one by one on a DIV, without reloading the page and other contents.

See this demo

← PreviousNext →