jQuery: Query an Xml document and output data

I back-dated my first piece of jQuery code, but have decided not to with my second.

Anyways, I had a hard time finding code, written in jQuery, to pull data from an Xml file and add it to a page. Combining a couple of tutorials online, I created the following (on April 27).

This was for a message, so I started out with the Xml file, creating something like this:

<?xml version="1.0" encoding="utf-8"?>
<messages>
	<system><![CDATA[Test system message.]]></system>
</messages>

I wanted multiple messages to be able to be stored, hence the format. 

Next I had to create the code to pull in the message that I wanted.

<!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>Untitled Document</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		try {
			$(document).ready(function(){
				$.ajax({
					type: 'GET',
					url: 'message.xml',
					dataType: 'xml',
					processData: false,
					success: function(data,message) {$('#wrapper')
						.append('<div id="systemMessage">' + $(data).find('messages system').text() + '</div>');}
				});
			});
		} catch (ex) {}
	</script>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

This is where it got tricky, since I couldn't find code that did this, just a number of individual pieces of it. Putting it all together, it worked as I wanted.

We needed to refresh the content as well, and with the help of a plug-in, we were able to make this data call when we wanted (on a timer) and refresh the contents of the div as appropriate.

Search
Links of Note
Recent Posts
categories
Support This Site

If my blog was helpful to you, then please consider visiting my Amazon Wishlist.