Using jQuery To Display XML

Last week I wrote about how I displayed some gig listings on a web page (see ‘Web Development: Displaying Content From A Text File.’) I was left a comment asking me why I hadn’t used jQuery to do this instead. I admit that I’m still in the process of learning jQuery and haven’t yet fully covered topics such as AJAX. I would also like to make sure I’m proficient with Javascript first (It’s not one of my favourite languages and I don’t get much practice with it.) Finally, I wasn’t sure if it was worth including a library for the small bits of functionality that I wanted to achieve (see ‘Do You Really Need jQuery?‘) Of course jQuery can make coding easier by removing things like version checking, and so therefore it is worth adding to your toolbox. I’ve taken another look at my gig listings, did some research and have created another version that uses jQuery.

<!DOCTYPE HTML>

<html>

<head>

<title>jquery Gig Listings</title>

<script src=”jquery-1.11.1.min.js”></script>

<script>

$(document).ready(function() {

$.get(‘gigs.xml’, function(gigData, status){

if (status == ‘success’)

{

var gigs = $(gigData).find(‘gigs’);

if (gigs.size() != 0)

{

$(‘#gigs’).append(‘<dl id=”listing”></dl>’);

$(gigData).find(‘gigs’).each(function(){

var date = $(this).find(‘date’).text();

var location = $(this).find(‘location’).text();

$(‘#listing’).append(‘<dt>’+date+'</dt><dd>’+location+'</dd>’);

});

}

else

$(‘#gigs’).append(‘<p>Nothing Upcoming</p>’);

}

});

});

</script>

</head>

<body>

<div id=”gigs”>

</div>

</body>

</html>

I’ve also created another version that uses the AJAX method.

<!DOCTYPE HTML>
<html>
<head>
<title>jquery Gig Listings</title><script src=”jquery-1.11.1.min.js”></script>
<script>
$(document).ready(function() {
$.ajax({
type: “GET”,
url: “gigs.xml”,
dataType: “xml”,
success: function(xml) {
var gigs = $(xml).find(‘gigs’);
if (gigs.size() != 0)
{
$(‘#gigs’).append(‘<dl id=”listing”></dl>’);
gigs.each(function(){
var date = $(this).find(‘date’).text();
var location = $(this).find(‘location’).text();

$(‘#listing’).append(‘<dt>’+date+'</dt><dd>’+location+'</dd>’);
});
}
else
{
$(‘#gigs’).append(‘<p>Nothing Upcoming</p>’);
}
},
error: function(xhr, status, error) {
$(‘#gigs’).append(‘<p>Nothing Upcoming</p>’);
}
});
});
</script>
</head>
<body>
<div id=”gigs”>
</div>
</body>
</html>

There are usually multiple ways to do something in programming and there could be better solutions than what I have provided as I’m still learning as I go. As always, if you have any of your own solutions to share, handy tips or advice leave them in the comments.

Advertisements

Tags: , , , , , , ,

About wallcat

I have a strong passion for computing. In particular programming for which I am able to use a variety of languages including C++, Visual C#, Blitz Basic, Actionscript 2.0, Python and Lua. I also enjoy web-design and have some knowledge of HTML/CSS, PHP/SQL and Javascript. As well as programming I have a strong background in art and enjoy drawing in my spare time. When I’m not sat at my computer I like to keep fit by going to the gym or using my exercise ball.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: