How to parse XML and insert content into HTML form using jQuery ?

Question

Hello !

I have a simple XMl file with image tags:

XML:

<img src="images/image1" alt="My Image 1" />
<img src="images/image2" alt="My Image 2" />
<img src="images/image3" alt="My Image 3" />
<img src="images/image4" alt="My Image 4" />

I need to insert this content ("src" attrib) inside a <div> tag in my HTML form.

HTML:

<div id="photos">
</div>

Does anyone know how this can be done using jQuery ?

Thanks in Advance.

H.

Answer 1

what about something like:

<script type="text/javascript">
function imageData() {
    //first we need to load the XML data for that detail row
    //if the function is a success it will call the function called processDetail
    $.ajax({
       type: "GET",
       url: "PATH_TO_XML_GOES_HERE",
       dataType: "xml",
       success: getImages
     });
}

function getImages(xml) {
    //this function gets the results from the xml file
    //and inserts them in to the boxes
    $(xml).find("img").each(function()   {
        $("#photos").append(this);
    });
}
</script>

hacked form here: http://www.getdowntonight.co.uk/2009/08/using-xml-in-your-jquery-to-populate-input-boxes/

may not work, but looks like it gets you on your way.

Answer 2

Since your xml file contains valid html markup, why don't you just jam it into your div directly?

$('#photos').load('TheFile.xml')