[jQuery] getJSON used multiple times
I am trying to implement a related selects. When the user chooses a
client 2 other boxes get populated. When the document is ready I add a
change event to the company select box. When the company is selected
it fires off 2 methods each of which populate the other select boxes.
A look into firebug shows that both queries are running and the json
is being returned. The 1st drop down gets populated but the 2 one is
acting very odd. Even if I were to rip the code out of the 2nd
function and just stick in an alert() its not getting executed. I am
wondering if I am colliding with something, any help is appreciated.
$(document).ready(function() {
// add onChange event to company select box
$("#company").change(onCompanyChange);
});
function onCompanyChange(){
var clientId = $("#company option:selected").val();
populateKeywords(clientId);
populateShows(clientId);
}
function populateKeywords(clientId){
jQuery.getJSON("com/abccompnay/keywords.cfc",
{method:"getByClient",client_id:clientId}, function(j){
var options = "";
options += '<option value="" selected>All Keywords</option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].value + '">' + j[i].display +
'</option>';
}
$("select#keyword").html(options);
document.getElementById("keyword").disabled = false;
});
}
function populateShows(clientId){
jQuery.getJSON("com/abccompany/orders.cfc",
{method:"listShows",client_id:clientId}, function(x){
var options = "";
options += '<option value="" selected>All Shows</option>';
for (var y = 0; y < x.length; y++) {
options += '<option value="' + x[y].value + '">' + x[y].display +
'</option>';
}
$("select#shows").html(options);
document.getElementById("shows").disabled = false;
});
}