Refresh DIV Contents without Reloading the Entire Page using jQuery

I have previously shared articles with examples on how to extract and read data from an XML file using jQuery . Here’s another example on how to dynamically create HTML <ul> and <li> using data extracted from an XML document with jQuery. With these posts came queries on how to refresh the contents of a DIV element without reloading the entire page using jQuery. It is an obvious question, as we extract data and display it on a DIV.

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 (the names library.xml) with few nodes in it. I’ll extract each node (with values) in every 5 seconds and display the contents in the DIV. That is, the DIV gets refreshed with new values, extracted from the XML file in every 5000 milliseconds.

See this demo
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: 'https://www.encodedna.com/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.

That’s it. Hope you like this article and its example. Thanks for reading.

See this demo

Previous - jQuery Fading Methods – fadeIn(), fadeout() and fadeToggle()Next - Read a JSON File and Push Values in an Array and Convert the Array to an HTML Table using jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: