[SOLVED] Building taxonomy using jQuery mcdropdown control.
Ok. I have some HTML below. I am trying to build a taxonomy of Google Base's categories.
I have each of their primary categories in a separate file, such as animals.txt for the Animals category or arts_entertainment.txt for the Arts & Entertainment category.
When the user selects the primary category, I want to call a php script, named getcatdata.php, that will parse the text file and return the items to be placed in the categorymenu unordered list. The input category will always stay hidden but it's value will be updated with the value from the LI selected when the secondary category is selected from the mcdropdown. Right now, I'm just showing the value selected in an alert dialog but will be storing it to a db.
Can anyone help out with what to do here? I'm not getting anything returned in the data variable in the ajax call.
I hope this post isn't too long for anyone to help out...
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GoogleBase Cat Test</title>
<script type="text/javascript" src="js/jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery/mcdropdown/lib/jquery.mcdropdown.min.js"></script>
<script type="text/javascript" src="js/jquery/mcdropdown/lib/jquery.bgiframe.js"></script>
<link type="text/css" href="js/jquery/mcdropdown/css/jquery.mcdropdown.min.css" rel="stylesheet" media="all" />
<script language="JavaScript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu", {"allowParentSelect":"true",
"targetColumnSize":"1",
"select": function(){
alert(this.getValue()[0]);
},
});
$("select#product_category").change(function(){
$.get("getcatdata.php",{id: $(this).val(), ajax: 'true'}, function(data){
$("ul#categorymenu").html(data);
})
})
});
</script>
</head>
<body>
<label>Select Primary Product Category:</label>
<div class="margin-form">
<select id="product_category" name="prodcat">
<option value="animals" selected="selected">Animals</option>
<option value="arts_entertainment">Arts & Entertainment</option>
<option value="baby_toddler">Baby & Toddler</option>
<option value="business_industrial">Business & Industrial</option>
<!-- Several other categories co here, shortening it for this post -->
</select>
<label>Select Secondary Product Category:</label>
<input type="text" name="category" id="category" value="" />
<ul id="categorymenu" class="mcdropdown_menu" style="display: none;">
</ul>
</div>
</body>
</html>
[/code]
Here is the HTML returned by getcatdata when selecting animals:
[code]
<li rel="1.1">Live Animals</li>
<li rel="1.2">Pet Supplies
<ul>
<li rel="1.2.1">Amphibian Supplies</li>
<li rel="1.2.2">Bird Supplies</li>
<li rel="1.2.3">Bug Supplies</li>
<li rel="1.2.4">Cat Supplies
<ul>
<li rel="1.2.4.1">Cat Food</li>
</ul>
</li>
<li rel="1.2.5">Dog Supplies
<ul>
<li rel="1.2.5.1">Dog Food</li>
</ul>
</li>
<li rel="1.2.6">Ferret Supplies</li>
<li rel="1.2.7">Fish Supplies
<ul>
<li rel="1.2.7.1">Aquarium Supplies</li>
<li rel="1.2.7.2">Aquariums</li>
</ul>
</li>
<li rel="1.2.8">Horse Supplies</li>
<li rel="1.2.9">Rabbit Supplies</li>
<li rel="1.2.10">Reptile Supplies</li>
<li rel="1.2.11">Rodent Supplies</li>
</ul>
</li>
[/code]
And this is the contents of animals.txt:
[code]
Animals > Live Animals
Animals > Pet Supplies
Animals > Pet Supplies > Amphibian Supplies
Animals > Pet Supplies > Bird Supplies
Animals > Pet Supplies > Bug Supplies
Animals > Pet Supplies > Cat Supplies
Animals > Pet Supplies > Cat Supplies > Cat Food
Animals > Pet Supplies > Dog Supplies
Animals > Pet Supplies > Dog Supplies > Dog Food
Animals > Pet Supplies > Ferret Supplies
Animals > Pet Supplies > Fish Supplies
Animals > Pet Supplies > Fish Supplies > Aquarium Supplies
Animals > Pet Supplies > Fish Supplies > Aquariums
Animals > Pet Supplies > Horse Supplies
Animals > Pet Supplies > Rabbit Supplies
Animals > Pet Supplies > Reptile Supplies
Animals > Pet Supplies > Rodent Supplies
[/code]