Good idea i like it. I might use this for a project

JQuery is so powerful & dynamic.

I think I’m in love.

Keep these JQuery tuts coming!

Great Tip!

seems like these tutorials are getting lame. if you don’t have to write a full article, don’t publish it. And certainly don’t spend time in your already über short drivel telling me how quick and short this will be.

This might be a basic question (I’m still getting my feet wet with Javascript), but why is the $book variable preceded by a dollar sign? I suspect it has something to do with the jQuery function.

Interesting how jQuery does it. I actually find jQuery a little too cryptic for my tastes. It feels too easy to jam so much into a single line; code becomes harder to read. Mootools and Prototype both have pretty ways of accessing AJAX.

Ps. You got a run-away em tag making the rest of the page in italics.

Just what I was after! Thanks guys! I like the format of having some smaller ‘evening tips’ style tuts! Keep up the good work!

Great tip jQuery is brilliant for little things like this

Thanks for the tip!

BTW, I think maybe you didn’t close an em tag or something? Everything’s in italics!

Wow thanks! This is actually very very valuable code!

Holy Moly! I love this stuff! I am just learning jquery and I can’t get enough of it. It is winning the javascript war in my books!

Thanks a ton for all your great tips! I REALLY appreciate it!

this would of been helpful this morning when I was dealing with this. For now on I check nettuts before going into work.

When did the comments go italicized?

I get terribly excited when I see jQuery on my RSS feed. When it turns out to be useful? That’s double the excitement. Great tutorial!

What’s the point of using XML? Couldn’t you just as easily hard code that or stick it in a database?

*Confused*

Also, where are those weekly PHP tutorials?

@Dan – Ahh, sorry about that. It’s been fixed.

@The Other Dan – In this situation – yeah, you could just hard-code it. But what about if you were pulling from an RSS file…or something similar? The example is intentionally simple – but the uses are widespread.

@Brian – It isn’t required…but is usually considered to be a good practice. It reminds us that we’re dealing with jQuery.

Man this is very useful. Right now I’m working on a flash calendar that runs off an xml page. Now, I could be super accessible and create a non flash version that runs off the same sheet using JQuery.

awesome..simple and to the point, definately not for the novice javascripter as the explanation is low. But i loved it.

“This might be a basic question (I’m still getting my feet wet with Javascript), but why is the $book variable preceded by a dollar sign? I suspect it has something to do with the jQuery function.”

definately a typo, obviously a php developer

rock on

Great, now a tut that will help to parse xml as html.

Interesting stuff. I’ve never done this with jQuery and XML – I’m sure it’ll come in use some time in the near future.

Just one thing – that second book – ASP.NET – what’s that?

Any plans for ASP.NET tutorials on the site?

I love you for this great post ;D

Cool gonna try iy out soon!

@Shane – I’d love to have ASP.NET tutorials. It’s my framework of choice. But, I’m not sure that there is enough of a demand for it. If enough people asked for them, I would absolutely get some up.

Some simple asp.net tutorials would be ace, I like this how would extending this work though so that it could fall over ok without js??

Cheers

Damien

Several things…

First: you don’t need the full $(document)…bit, just pass the function to an empty jQuery call:
$(function() {
// … do stuff when the DOM is ready …
}

Second: the loading icon should be attached to the body BEFORE you do anything. Then load the XML, parse it, drop the content into your DL and remove the loading animation. Adding the loading animation at the same time you’re adding the content to which it is a metaphor for loading makes the loading icon unneccessary as you’re seeing it AFTER the content has been loaded and added to the page.

Third: accessing an attribute, storing it in a variable and then retrieving the value is far more expensive than just accessing the attribute. Several of the variable definitions are unnecessary.

Fourth: instead of wasting time building a string, passing it to jQuery, having jQuery expand it and append each item, just append the items as necessary.

Here’s a cleaned-up version:

$(function() {
$.get(’myData.xml’, function(d){
$(’body’).append(’Recommended Web Development Books’);

$(d).find(’book’).each(function(){
var book = $(this);

$(’dl’)
.append(” + book.attr(’title’) + ”)
.find(’dd’)
.append(”)
.append(” + book.attr(’title’) + ”)
.append(” + book.find(’description’).text() + ”);
});
});
});

Sorry, forgot to escape my gt/lt:

$(function() {
$.get(’myData.xml’, function(d){
$(’body’).append(’<h1>Recommended Web Development Books</h1><dl></dl>’);

$(d).find(’book’).each(function(){
var book = $(this);

$(’dl’)
.append(’<dt>’ + book.attr(’title’) + ‘</dt><dd></dd>’)
.find(’dd’)
.append(’<img class=”bookImage” alt=”" src=”‘ + book.attr(’imageurl’) + ‘” />’)
.append(’<p class=”title”>’ + book.attr(’title’) + ‘</p>’)
.append(’<p>’ + book.find(’description’).text() + ‘</p>’);
});
});
});

Hello,

nice tut, but it’s not working in IE and it’s a shame for jQuery that XML parsing is not working well for IE. I’ve talked to some jQuery folks @IRC and they told me the same thing … it’s kind of shortage … and for that there exists a class named: XML2JSON (www.fyneworks.com/jquery/xml-to-json/)

@Khaled – I just checked the demo in IE7 and IE6. It works just fine. Am I missing something? Anybody else notice anything?

Don’t try the demo on nettuts … try it on your pc … download the demo and try it on your pc without a server

What about CData? I’m using an xml file for my flash content and cdata in order to have some formatting – I’d then like to use the xml content as alternative content for the flash. But it seems that any js xml retriever fails when it hits the Cdata. Any Tips?

Demo works fine for me.

If this were put to actual use I might have added a css class to the dl element to prevent from accidentally selecting multiple occurrences.

Could someone talk me/us through the process of parsing a Flickr xml feed using this principle? I am trying without much success. With this extra example in the thread I am sure many people would benefit. Thanks a lot.

This script has “done the job” for me (on a non-wordpress site btw). But as (as usual!) I wish I understood it better. Still, a walkthrough of using jQuery to manipulate a Flick feed would be a great tutorial. And definitely more “real world” useful than your example above, although I understand it was a quick tip

Link: http://www.nulldevice.de/2008/05/flickr-rss-feed-plugin-for-jquery-and-wordpress/

According to my experience jQuery can’t handle XML with namespaces(namespaces handling is a must when it comes to web services related interactions). Currently Firefox and IE handle XML with namespaces in two different ways and jQuery can’t handle that. I have blogged about this problem here(http://mpathirage.com/why-most-popular-javascript-libraries-doesnt-support-xml-with-namespaces/). And the solution is available here(http://mpathirage.com/solution-to-xml-namespace-problem-in-getelementsbytagname/).

When i clicked on this i didn’t think it would be helpful but it actaually was thanks NETTUTS

Using this right now – making a template for TF!! … Thanks Jeffrey!

Here’s Michael T’s code from above reformatted slightly so it works with the rest of the demo:

$(function()
{
$.get(’myData.xml’, function(d)
{
$(’body’).append(’Recommended Web Development Books’);

$(d).find(’book’).each(function()
{
var book = $(this);

$(’dl’)
.append(” + ” + ”)
.append(’ ‘ + book.attr(’title’) + ‘ ‘ + book.find(’description’).text() + ‘ ‘);
});
});
});

Or … not. Looks like the form validation script ate it.

What about saving data into a XML file?
Or isn’t that possible with just client-based scripts?

I do not believe this

Awesome tutorial! But what would it take to add a set of navigational buttons via the xml file?

This is a very nice tip. But do anyone know how to access XML namespaces?

nice. But if data return is xml (not in a file), how do U process ? I test in IE6, if I read a xml file, no prob, but when I test on data return, it’s xml, too, but nothing appear

Thanks for ur solution

this is wonderful tutorial i will put acopy of this lesson on
my site here
http://www.as7ap4you.com

@mattems and Brian

I don’t think adding a dollar sign in front of the variable is a typo. I thought it was too when I first saw this practice, and it does seem php related, but I’ve seen it being used in jQuery scripts pretty frequently. It’s just is an easy way of distinguishing between variables.

Most variables will be a string or a number maybe, but by adding the dollar sign, you can be clear that it’s a jQuery object being stored there (if you stick to the practice). You can still access all your usual jQuery functions, but from an easier to read (and more visually appropriate with the $) variable.

e.g.
var $navitem = $(”#nav li:first”);
$listitem.fadeOut(”slow”);

Great tutorial, I had a hard time doing something similar on my page to make a easy updatable catalog of cd’s, so that anyone could add their cd to the list. You’ve just made my life easier.

online demo works but not offline ie7

Hi there,

Thanks for the tutorial, but I was wondering is it possible to load XML generated by a servlet? So there is no myData.xml just a URL?

What if the xml doc has 100 items and you only want the top 10?

Fix for IE
http://stackoverflow.com/questions/436670/local-html-file-ajax-call-and-jquery-woes

Thanks!

I tried 3 different jQuery samples and all failed in IE until this one.

Cheers!

Like Ben, I would like to use this with a remote address. Is this possible? It doesn’t seen to work when I replace the local file with a URL.

Hi thanks nettuts nice tutorial – question how do you add links in ht XML file to show up? is this the namespace issue or something else.

All I want ot do is make the books as links…

any help would be appreciated.

Yes online demo works fine in IE7 but not offline. Why?

Awesome bro. Thanks a lot for sharing. Keep doing the good work..

With Regards,
Sagar S. Ranpise

please let me know how to fetch the particular data from the xm. for example 2nd element from book note. please help its urgent

This is Great!
here’s a quick question..
I’m very VERY new to all this…
say if I have three buttons…each with ID 1, 2, and 3.
I have an xml file with 3 different pieces of info each with an id of 1, 2, and 3 as well. How would I make a string that takes the id of the button…matches it to the ID of the xml…then spits out the corresponding info?

Jeffery, thank you for this great tip, it helped me out tremendously. I’ve got it working within my project, but there’s still a couple concepts I don’t quite understand.

For example, why is the “d” necessary? What’s it stand for, what value is it and what’s exactly going on there?

In your tip you say:
“I’ll use the variable “d” to represent the information that was pulled from the XML file.”

Could “d” be any other letter or word as well? Why do we need “d” to represent the file?

The other question I have concerns this: “.append($(html));”
I know what’s going on there for the most part, except I don’t understand why you need two pairs of parenthesis. Why is the extra pair necessary? (For example, would it work to just write “.append(html);” ?

Making Michael T’s and Mike’s script just a little bit better:

replace:
$(d).find(’book’).each(function()

with:
$(’book’, d).each(function()

great post!

i want to ask about this case, btw, if it’s not much trouble:

say i have:

lorem ipsum dolor hello world! lorem ipsum dolor et

thisimage

lorem ipsum dolor lorem ipsum dolor et

i need to process each tag sequentially and output it in a similar way that a browser may output basic html tags (like anchors, spans, etc inside p tags)

can i do that by just using for/each? or should i restructure my xml ?

thank you in advance!

oops, tags not allowed, here it is:

lorem ipsum dolor hello world! lorem ipsum dolor et

thisimage

lorem ipsum dolor lorem ipsum dolor et