CODEWITHSUNDEEP
javascriptjqueryhtmlxml
Master345
Master345

Reputation: 2266

Read XML with jquery/javascript every 5 seconds

I have a html

index.html:

<html>

<head>
    <title>Facebook</title>

    <script type="text/javascript" src="../xdata/js/jquery.js"></script>
</head>

<body>
    Tasks (<span id="tasks">0</span>)
    Messages (<span id="messages">0</span>)
    Notifications (<span id="notifications">0</span>)


    <script type="text/javascript">
    $(document).ready(function() {
    var pagetitle = document.title;
    document.title = pagetitle+' NEW NOTIFICATON';
    });
    </script>
</body>

</html>

and a xml file

page.xml:

<?xml version="1.0" ?>
<page tasks="1" messages="3" notifications="3"/>

How do i make that every 5 seconds index.html to read page.xml and modify the title like in faceboook ("(1) Facebook") and also modify tasks, messages, notifications ...

I'm having problems at reading the xml. If anyone can help me?

PS - I prefer jQuery ... but JavaScript works as well

Upvotes: 3

Views: 2280

Answers (4)

Needhi Agrawal
Needhi Agrawal

Reputation: 1326

    Try this:
    (document).ready(function() {
        function getPage() {
           var page= $.ajax({
                type: "GET",
                url: "page.xml",
                dataType: "xml",
                async : false,
            }).responseXML;
       $(page).find('page').each(function(){
         var tasks = $(this).attr("tasks");
         var msgs = $(this).attr("messages");
         var notes = $(this).attr("notifications");
         $('#tasks').html(tasks);
         $('#messages').html(msgs);
         $('#notifications').html(notes);
      });
   }
});
    setInterval(getPage,5000);

Upvotes: 0

Daedalus
Daedalus

Reputation: 7722

The following was done in jquery, though you have a slight error with your xml file that lead to parsing issues.

Assuming your xml file is like this:

<?xml version="1.0"?>
<data>
    <page tasks="1" messages="3" notifications="3"/>
</data>

The following code will modify the page accordingly, using jquery of course:

$(document).ready(function() {
    function get_info() {
        $.ajax({
            type: "GET",
            url: "page.xml",
            dataType: "xml",
            cache: false,
            complete: function(doc) {
                var tasks = $(doc.responseText).find("page").attr("tasks");
                var msgs = $(doc.responseText).find("page").attr("messages");
                var notes = $(doc.responseText).find("page").attr("notifications");
                if (tasks != $('#tasks').text() ||
                    msgs != $('#messages').text() ||
                    notes != $('#notifications').text()) {
                    document.title = "Facebook" + ' NEW NOTIFICATON';
                }
                $('#tasks').text(tasks);
                $('#messages').text(msgs);
                $('#notifications').text(notes);
            }
        });

    }
    setInterval(function() {
        get_info();
    }, 5000);
});

I spent some time developing this, and I know for a fact it works.

Upvotes: 2

RhinoWalrus
RhinoWalrus

Reputation: 3089

Put your logic inside of a setTimeout method call:

setTimeout(function(){
    alert('I am displayed after 3 seconds!');
}, 3000);

Upvotes: 0

Vinit
Vinit

Reputation: 1825

    var tid = setTimeout(function_name, 5000);

function function_name() {
  // do some stuff...
  tid = setTimeout(function_name, 5000); // repeat
}
function abortTimer() { // to stop the timer
  clearTimeout(tid);
}

Upvotes: 0

Related Questions