I am try get xml feed every 10 sec or add the new xml feed to the existing displayed results . Can someone show me how i can do that using ajax and json call backs.
Also, if I want to take a step further and want to paginate it by breaking down into 5 results per pages how would I do that?
If someone could show me some working examples would be really great
My code is below.. please feel free to expand
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Xml Ajax</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
$.ajax({
type:"GET",
url:"sample-xml-feed.xml",
dataType:"xml",
success:parseXml
});
});
function parseXml (xml) {
$(xml).find("Tutorial").each(function() {
$("#output").append($(this).attr("author") +"<br/>")
});
}
</script>
<body>
<div id="output"></div>
</body>
</html>
XML BIT below
<?xml version="1.0" encoding="utf-8"?>
<RecentTutorials>
<Tutorial author="The Reddest">
<Title>Silverlight and the Netflix API</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>XAML</Category>
</Categories>
<Date>1/13/2009</Date>
</Tutorial>
<Tutorial author="The Hairiest">
<Title>Cake PHP 4 - Saving and Validating Data</Title>
<Categories>
<Category>Tutorials</Category>
<Category>CakePHP</Category>
<Category>PHP</Category>
</Categories>
<Date>1/12/2009</Date>
</Tutorial>
<Tutorial author="The Tallest">
<Title>Silverlight 2 - Using initParams</Title>
<Categories>
<Category>Tutorials</Category>
<Category>Silverlight 2.0</Category>
<Category>Silverlight</Category>
<Category>C#</Category>
<Category>HTML</Category>
</Categories>
<Date>1/6/2009</Date>
</Tutorial>
<Tutorial author="The Fattest">
<Title>Controlling iTunes with AutoHotkey</Title>
<Categories>
<Category>Tutorials</Category>
<Category>AutoHotkey</Category>
</Categories>
<Date>12/12/2008</Date>
</Tutorial>
</RecentTutorials>
What about running your AJAX request inside a setInterval()?
setInterval(function() {
$.ajax({
type:"GET",
url:"sample-xml-feed.xml",
dataType:"xml",
success:parseXml
});
}, 10000); // 10 seconds
For the pagination your parseXml() function should take care of the logic. Keep a counter variable somewhere and as soon as it reaches a 5th result, append to a new container and reset the counter.