rapid-DEV.net

Below is example about using Jquery ajax to read text & attribute for each node of an internal xml file.

1. Example of the XML file included is below

<dates>
	<date value="2009-11-24">Tuesday, November 24</date>
	<date value="2009-11-25">Wednesday, November 25</date>
	<date value="2009-11-26">Thursday, November 26</date>
	<date value="2009-11-27">Friday, November 27</date>
	<date value="2009-11-28">Saturday, November 28</date>
	<date value="2009-11-29">Sunday, November 29</date>
	<date value="2009-11-30">Monday, November 30</date>
</dates>

2. Javascript jquery ajax call use to read text & attribute of the xml file above

function update_date_list()
{
    var dates = document.getElementById("ddl_date");
    var i = 0;
    jQuery.ajax({
		type: "GET",
		url: "date.xml",
		dataType: "xml",
		success: function(xml)
		{
			jQuery(xml).find('date').each(function(){
                dates.options[i] = new Option(jQuery(this).text(), jQuery(this).attr('value'));
				i++;
			});
		}
	});
}

3. For each xml node, we will use to create drop down list items

<select id="ddl_date" name="ddl_date">
	<option value="2009-11-24">Tuesday, November 24</option>
	<option value="2009-11-25">Wednesday, November 25</option>
	<option value="2009-11-26">Thursday, November 26</option>
	<option value="2009-11-27">Friday, November 27</option>
	<option value="2009-11-28">Saturday, November 28</option>
	<option value="2009-11-29">Sunday, November 29</option>
	<option value="2009-11-30">Monday, November 30</option>
</select>

To see the real resutl, let’s check it out and view page source.