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;
                        });
                }

Reply via email to