One of the disadvantages to getting an XML file with asynchronous JavaScript has been the limited ability to traverse the nodes, effortlessly displaying a refined result set in HTML. Although Internet Explorer 5+, Firefox 1+, Safari 1.3+ and Opera 9+ do provide basic properties and methods for accomplishing minor tasks, the process for browsing the XML is cumbersome.
Most developers prefer hitting a server-side script, passing it querystring parameters, and then sending back the results as plain text. Each time the user modifies the result set, another call to the server is executed, and the user must wait for the HTML contents to load. There is now an improved method with jQuery AJAX and jQuery custom expressions that does not require this server-side scripting, which is wonderful for smaller sets of results.
If you have never used jQuery, then I suggest you go to www.jquery.com, and brush up on the basics. Specifically, read up on selectors and traversing the DOM. Even though the documentation does not explicitly record this fact, DOM manipulation with jQuery can refer to either HTML nodes or XML nodes. The learning curve is not as steep since the implementations are similar.
Instead of walking through the code here, I have provided an example. The JavaScript file associated with the example has several comments and detailed instructions. For the purpose of this demonstration, my XML contains only ten results, yet, I have loaded much larger XML files into memory without suffering performance from the jQuery selectors.
I’ve been looking for an example of loading external xml w/jquery. Thanks!
Hi Spa, glad that I could help! I’ve got another jQuery tutorial coming soon :)
As said, great article. Looking forward to the next article.
Good stuff.THKS.
This is brilliant! You could parse an RSS file with this and do just about any cool effects-y thing with the content.
jquery’s endlessly amazing. :)
When I try this locally I get an Access is Denied error?? This is only in IE.
Alex, you cannot make an asynchronous request in IE locally. It is a security issue that the browser will not resolve. You will have to run the code in Tomcat or another Web server.
Brian
Hello,
Good example !
But, is it possible to get the tag name ?
With your code :
$(”title:lt(” + parseInt(curPos + itemsPerPage) + “)”,xmlDataSet).filter(”:gt(” + parseInt(curPos – 1) + “)”).each(function(i) {
strToAppend += “<strong>” + $(this).text() + “</strong>”;
you can get the contains of :
but how to get the tagname “title” ?
Thanks
Benoit
Hey Benoit,
I think I understand your question. If you wanted the tag name, then I’m pretty sure you could do $(this).nodeName instead of $(this).text().
Brian
Hi, i somewhat edited your code for it to go to the next page after setTimeout like so:
timeOut=setTimeout(’curItems += itemsPerPage;readThenShowXML();’, 10000);
Problem is when it goes to the last page and goes back to the top… it repeats the 1st page twice. The code for the last page is this:
timeOut=setTimeout(’curItems += itemsPerPage;readThenShowXML();curItems=-2;’, 10000);
do you know what’s wrong with it? I tried setting curItems to zero again but it goes to the 2nd page after the last page, then repeats it twice too.
Sorry for this loooonngg.. comment ^_^ Thanks.
Hi Rex,
Without seeing the entire codebase, the only thing I can come up with is that you need to clear your first timeOut before setting your next timeout. It is probably more complicated than that, but I hope that is a step in the right direction.
Yeah, this has been one of the best tutorials I’ve seen since I started tinkering with this. One thing I can’t seem to find anything on is how to get information out of an attribute in the xml. Say if you had and you wanted to be able to pull out that information and have it sit next to the title on the page.
var selectedSection is set earlier, for example selectedSection=”PB”.
XML structure is like this:
PB
I want to limit to only those tiles where VO selection = selectedSection.
This code is not working:
$(”Tiles/Tile”,xmlDataSet).find(’VOsection’, selectedSection)
.each(function(){
alert(”here is VOsection: “+$(”VOsection”, this).text());
should I use GREP or contains?
Hi Scott,
Try using something like the following instead:
$(”/Tiles/Tile”,xmlDataSet).each(function(){
if ($(this).attr(”VOSelected”) == selectedSection) {
// do something
}
});
Sorry for the late reply. I’m not sure I completely understood the question. Let me know if you have any further issues.
Thats just perfect, exactly what I needed – and I like the way you commented the code instead of writing a loong article!
Thanks, mate!
$(”book”,xmlDataSet).length
does not work under IE 6. Is there an work around to this? Thanks.
Hi andy,
I do not think jQuery works in any version of IE less than 6.
Sweet comprehensive tutorial, it took a bit of time to get to grips with but it was just what I have been looking for! Well Pleased…
[...]
Thnx pal, this is what I have been searching for. wonderful!!!!