asked on

How can I add auto refresh to this ajax script

Hi,

I just need to know how I can add an auto refresh function to this script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load XML With jQuery</title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
    
    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1> Recommended Web Development Books </h1>');
        $('body').append('<dl />');

        $(d).find('book').each(function(){

            var $book = $(this); 
            var title = $book.attr("title");
            var description = $book.find('description').text();
            var imageurl = $book.attr('imageurl');

            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});
    </script>

</head>
<body>
</body>
</html>

Open in new window

The demo can be downloaded here.

http://net.tutsplus.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

morako

ASKER

Chris,

is this the correct implementation?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load XML With jQuery</title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
$(document).ready(function() {
     //call yourAjaxFunction every 5 seconds
     var autoRefresh = setInterval(yourAjaxFunction, 5000)
});

function yourAjaxFunction() {  
  
		$(document).ready(function()
		  {
			$.get('myData.xml', function(d){
			$('body').append('<h1> Recommended Web Development Books </h1>');
			$('body').append('<dl />');
	
			$(d).find('book').each(function(){
	
				var $book = $(this); 
				var title = $book.attr("title");
				var description = $book.find('description').text();
				var imageurl = $book.attr('imageurl');
	
				var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
				html += '<dd> <span class="loadingPic" alt="Loading" />';
				html += '<p class="title">' + title + '</p>';
				html += '<p> ' + description + '</p>' ;
				html += '</dd>';
	
				$('dl').append($(html));
				
				$('.loadingPic').fadeOut(1400);
			});
		});
	});

     //your AJAX code goes in here
}
    </script>

</head>
<body>
</body>
</html>

Open in new window

I am getting the results repeated which is good except I would like only new results to be added...

here is my link.. this example displays a static xml, but my implementation will be a php file with dynamic data. I like the way the previous data stays cashed which tells me that it would have less load on the server when talking about much more data. What are your thoughts?

The demo:
http://youportal.com/youportal/core/xml/index1.html

My php implementation
http://youportal.com/youportal/core/xml/index.html

Chris Stanyon

Yeah - the implementation of the auto-refresh is correct, although you don't need the document.ready block inside your function. You only need it wrapping the setInterval call.

As for only loading new data - that will be up to you to make sure the backend (i.e the xml file) is only pushing new data. That has nothing to do with the auto-refresh - it's more to do with how your back-end script gather data.

morako

ASKER

Coolness... ;-)

morako

ASKER

Thanks ... ;-)

SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

morako

ASKER

OK, let me look at this..

morako

ASKER

mplungjan very nice, thanks for the update.. Is there a way to reward you with points or something for your update?

morako

ASKER

mplungjan Thanks for the update, I appreciate it... ;-)

Michel Plungjan

I requested attention for you :)

morako

ASKER

mplungjan, do you know of a way that a list of results can be displayed and only load the newest result, as opposed to reloading all results. Something similar to a newsfeed like on facebook.

So for example the three books are listed and a new records loads, then another new record loads, and if there are 3 simultaneous records updated then the three can load, or something in that regards...

Any thoughts?

morako

ASKER

I will probably raise this question to 500 points if i am able to do it...

morako

ASKER

I think that will be a combination of php SQL and Ajax, but not sure any thoughts?

Michel Plungjan

The script I posted will replace the books. The other end would be a new question in the PHP zone

morako

ASKER

Coolness... Thanks

ASKER CERTIFIED SOLUTION