I think I should have been a bit clearer on my original post. I have the
js code already in a js file.
The jQuery code I have is as follows:
-
$('select[name^="categories"]').change(function(){
var base_url = 'http://'+window.location.host;
var script_url = base_url + "buildDropdown";
var index = $(this).attr('name').split('_');
console.log(index);
$.ajax({
url: script_url,
data: {
categoryID: $(this).val()
},
type: "POST",
success: function(data){
$('select[name="subcategories_' +
index[1] + '"').html(data);
}
});
});
The HTML snippet looks like the following:
-
-
<td><select
name="categories_0">
-
<option
value="8">Pay</option>
-
<option
value="9">Property</option>
-
<option
value="10">Shares</option>
-
<option
value="0">Select
Category...</option>
-
</select></td><td><select
name="subcategories_0">
-
<option
value="0">Select
Subcategory</option>
-
</select></td>
The issue I am currently having is
that the following jQuery code:
$('select[name="subcategories_' + index[1] + '"').
html(data);
gives the following error on the
developer javascript console in chrome:
Uncaught TypeError: Cannot read
property 'init' of undefined
(anonymous function)
jQuery.extend.each
jQuery.fn.jQuery.each
$.fn.extend.datePicker
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
Could you please advise.
I am not sure how to specify the id of
the element name in the ajax success call.