Question

I am trying to get two change functions to run, one when one select box is changed, the other when another select box is changed.

$(document).ready(function() {      
        $("#area").change(function() { 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getFunctions.cfm?areaID=" + $(this).val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#functions").html(html)
                    }
                }); //end of AJAX call
        }); //end of area

        $("#function").change(function() {
            alert("Change"); 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getDefects.cfm?functionID=" + $(this).val() + "&areaID=" + $("#area").val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#defects").html(html)
                    }
                }
                );
        }); 
    });

I am only able to get the first function to run, but the second never does. I use firebug to just make sure there is not an error in syntax, but it never reaches the code. Anyone have any ideas what is happening?

Here are my select boxes in my html:

 <tr>
                        <td align="right">
                            Business Area:
                        </td>
                        <td align="left">
                            <cfselect name="area" id="area">
                            <option value="">Select Business Area</option>
                        <cfloop query="getAreas">
                            <option value="#getAreas.areaID#">#getAreas.areaDesc#</option>
                        </cfloop>
                            </cfselect>
                        </td>
                    </tr>
                    <!--- Business Function --->
                    <tr id="trFunction" style="display:none">
                        <td align="right">
                            Business Function:
                        </td>
                        <td align="left">
                        <div id="functions">
                            <select name="functionID" id="functionID">
                                <option value="">Select Business Function</option>
                            </select>
                         </div>
                        </td>
                    </tr>
                    <!--- Defect Type --->
                    <tr id="trDefect" style="display:none">
                        <td align="right">
                            Defect Type:
                        </td>
                        <td align="left">
                        <div id="defects">
                            <select name="defect" id="defect">
                                <option value="">Select Defect</option>
                            </select>
                         </div>
                        </td>
                    </tr>

And here are the queries:

<cfquery name="getFunctions" datasource=#application.datasource#>     
    SELECT *
    FROM lamFunctions
    WHERE status = 1
    AND areaID = '#url.areaID#'
    ORDER BY functionDescription        
</cfquery>

<cfoutput>
    <select name="functionID" id="functionID">
        <option value="">Select Business Function</option>
    <cfloop query="getFunctions">
        <option id="#functionID#" name="#functionDescription#" value="#functionID#">#functionDescription#</option>
    </cfloop>
    </select>   
</cfoutput>

<cfquery name="getDefects" datasource=#application.datasource#>     
    SELECT *
    FROM lamDefects
    WHERE status = 1
    AND areaID = '#url.areaID#'
    AND functionID like '%#url.functionID#%'
    ORDER BY defectDesc        
</cfquery>

<cfoutput>
    <cfif #url.functionID# eq 3>
        <select name="defect" id="defect" style="width:350px">
            <option value="">Select Defect</option>
        <cfloop query="getDefects">
            <option id="#defectID#" name="#defectDesc#" value="#defectID#">#defectDesc#</option>
        </cfloop>
        </select>
    <cfelse>
        <select name="defect" id="defect">
            <option value="">Select Defect</option>
        <cfloop query="getDefects">
            <option id="#defectID#" name="#defectDesc#" value="#defectID#">#defectDesc#</option>
        </cfloop>
        </select>
    </cfif>    
</cfoutput>

Answer 1

First thing that I see is that you are calling second change function on $(“#function”) whereas the Id of your second select statement is functionID. Second thing is that event handlers registered in document.ready function only apply to elements that are already loaded on the page. for elements that are added later you can use

$("#functionID").live('change', function(){
//handle event
});

but using change event with live caused some problems for me on different browsers (IE especially). so another option could be using livequery library of jQuery or you can register the event handler on callback of your first ajax request like

$("#area").change(function() { 
                $.ajax(
                {
                    type:"POST",
                    url: "./includes/AJAX/getFunctions.cfm?areaID=" + $(this).val(),
                    cache: false,
                    success: function(html)
                    {
                        $("#functions").html(html)
                        $("#functionID").change(function(){
                            //handle event here                       
                         });
                    }
                }); //end of AJAX call