how do I get a script file to loop through multiple sections of an xml file?
I'm working on this project where I'm trying to use jquery to read from an xml file and generate added code to a html index file by creating dropdown select menus and then allowing the user to display pictures according to what of the 2 category 'select' types they select on the dropdown list.
The program works as far as generating the select dropdown list but only generates the images for the first selected option. When I select the second drop down category nothing happens it simply shows the pics from the first category. When I go into firebug and display the html file after the script is run there are an extra set of <p> tags without anything in them. I traced through the script and can't find where the <p></p> is coming from. It's not on the initial html page. I have the script below for the xml and jq.
-----------
<?xml version="1.0" encoding="ISO-8859-1"?>
<gallery>
<picture class="House and Home">
<listing>Pics/HouseHome/h1.jpg</listing>
<listing>Pics/HouseHome/h2.jpg</listing>
<listing>Pics/HouseHome/h3.jpg</listing>
<listing>Pics/HouseHome/h4.jpg</listing>
</picture>
<picture class="Pets">
<listing>Pics/Pets/p1.jpg</listing>
<listing>Pics/Pets/p2.jpg</listing>
<listing>Pics/Pets/p3.jpg</listing>
<listing>Pics/Pets/p4.jpg</listing>
</picture>
</gallery>
----------------
$(function()
{
//alert("start");
var $cboType = $("#pictureType");
var $picHolder = $("#photoList");
$cboType.bind("bind",function()
{
// alert("hi");
$.get("data/gallery.xml", function(xmlData)
{
$(xmlData).find("picture").each(function()
// $(xmlData).get("picture[class='" + $cboType.val() + "']").find("picture").each(function()
{
$cboType.append("<option>" + $(this).attr("class") + "</option>");
});
});
});
$cboType.trigger("bind");
$picHolder.change(function()
{
$.get("data/gallery.xml", function(xmlData)
{
alert( $cboType.val() );
$picHolder.empty();
$(xmlData).find("picture[class='" + $cboType.val() + "']").find("listing").each(function()
{
$picHolder.append("<li><img src='" + $(this).text() + "'/></li>");alert($picHolder);
});
alert($picHolder);
});
});
$picHolder.trigger("change");
});
thanks