Using jQuery and AJAX works for all functions except one, really bizarre issue (from my perspective).

Question

I am working on a classic asp form that has a number of dropdowns. Three of these are cascading, i.e. they rely in the previous dropdown. For almost everything this code works fine, one of them however is not playing nice.

To start off I have a script tag with the following in it:

    $(document).ready(function () {
        $("#AcademicLevel").change(getList);
        $("#CourseDeliveryTime").change(updateLocation);
        $("#ProgramType").change(updateEntryTerm);
    });

This works just fine for the first two elements of the form, AcademicLevel and CourseDeliveryTime, the third however does not take effect however. If I use Firebug's Console and run that same line of code, $("#ProgramType").change(updateEntryTerm);, it starts to work, sort of.

What happens is what confuses me. If the function it is pointing to, updateEntryTerm, has an alert() call in it, it works. If the alert is commented out, it does not work. The function is below:

    function updateEntryTerm() {
        $.ajax({
            type: "POST",
            url: "../Classic ASP and AJAX/jQueryExample.asp",
            dataType: "application/x-www-form-urlencoded",
            data: "Action=UpdateEntryTerm&acadLevel=" + $("#AcademicLevel").val() + "&courseTime=" + $("#CourseDeliveryTime").val() + "&programType=" + $("#ProgramType").val(),
            async: false,
            success: function (msg) {
                $("#EntryTerm").remove();
                $("#tdEntryTerm").append(msg);
                //alert(msg);
            } //,
            //error: function (xhr, option, err) {
            //    alert("XHR Status: " + xhr.statusText + ", Error - " + err);
            //}
        });
    }

I am lost on two different issues here, First why is the call to $("#ProgramType").change(updateEntryTerm); not working unless I run it in Firebug Console? Second, why does the function itself, updateEntryTerm, not work unless the alert() call is present?

Has anyone seem something like this before?

EDIT: The full javascript is here:

<script type="text/javascript" language="javascript">
//<![CDATA[

    $(document).ready(function () {
        $("#AcademicLevel").change(getList);
        $("#CourseDeliveryTime").change(updateLocation);
        $("#ProgramType").change(updateEntryTerm);            
        //alert("DOM loaded!");
        //$("#CourseDeliveryTime").change(updateEntryTerm);
    });

    // Function to get ProgramofInterest list
    function getList() {
        $.ajax({
            type: "POST",
            url: "../Classic%20ASP%20and%20AJAX/jQueryExample.asp",
            dataType: "application/x-www-form-urlencoded",
            data: "Action=GetList&Val=" + $("#AcademicLevel").val(),
            async: false,
            success: function (msg) {
                //$("label[id$=Two]").add("select[id$=Two]").remove();
                $("#ProgramofInterest").remove();
                $("#tdProgramOfInterest").append(msg);
            }
        });
    }

    function updateLocation() {
        $.ajax({
            type: "POST",
            url: "../Classic%20ASP%20and%20AJAX/jQueryExample.asp",
            dataType: "application/x-www-form-urlencoded",
            data: "Action=UpdateLocation&acadLevel=" + $("#AcademicLevel").val() + "&courseTime=" + $("#CourseDeliveryTime").val(),
            async: false,
            success: function (msg) {
                //$("label[id$=Two]").add("select[id$=Two]").remove();
                $("#ProgramType").remove();
                $("#tdProgramType").append(msg);
            } //,
            //error: function (xhr, option, err) {
            //    alert("XHR Status: " + xhr.statusText + ", Error - " + err);
            //}
        });
    }

    function updateEntryTerm() {
        $.ajax({
            type: "POST",
            url: "../Classic%20ASP%20and%20AJAX/jQueryExample.asp",
            dataType: "application/x-www-form-urlencoded",
            data: "Action=UpdateEntryTerm&acadLevel=" + $("#AcademicLevel").val() + "&courseTime=" + $("#CourseDeliveryTime").val() + "&programType=" + $("#ProgramType").val(),
            async: false,
            success: function (msg) {
                $("#EntryTerm").remove();
                $("#tdEntryTerm").append(msg);
                //alert(msg);
            } //,
            //error: function (xhr, option, err) {
            //    alert("XHR Status: " + xhr.statusText + ", Error - " + err);
            //}
        });
    }
//]]>
</script>

This is the code for the ProgramType form field that should be getting the change event:

    <td id="tdProgramType">
        <!--<span id="prefLoc">
            <select id="ProgramType" name="ProgramType" onchange="changeStartTerm()">
                <option value="" >&lt;select above options first&gt;</option>
            </select>
        </span>-->
        <%
            Dim outputProgramTypes                                    

            outputProgramTypes = outputProgramTypes + "<select name=""ProgramType"" id=""ProgramType""><option value=''>&lt;Select&gt;</option>"

            Set oRs=Server.CreateObject("adodb.recordset")

            'if Request.Form("AcademicLevel") = "undergraduate" and Request.Form("CourseDeliveryTime") = "Day" then
                strSQL = "SELECT LocationName, LocationCode FROM tbLocations ORDER BY LocationWeight ASC"
            'else
            '    strSQL = "SELECT LocationName, LocationCode FROM tbLocations WHERE LocationWeight < 3 ORDER BY LocationWeight ASC"
            'end if

            oRs.Open strSQL, conn

            Do while not oRs.EOF               
                outputProgramTypes = outputProgramTypes + "<option value = '" & oRS ("LocationCode") & "'>"
                outputProgramTypes = outputProgramTypes + oRs("LocationName") & "</option>"
                oRs.MoveNext
            loop

            outputProgramTypes = outputProgramTypes + "</select>"

            Response.Write(outputProgramTypes)
        %>
    </td>
</tr>

And this is the code from the post page that does the work of switching the items in the list:

<%

' Get the variables from the query string
dim act 
act = lcase(Request("Action"))
dim value 
value = Request("Val")

dim acadLevel, courseTime, programType
acadLevel = Request("acadLevel")
courseTime = Request("courseTime")
programType = Request("programType")

Dim oRs, conn, connect, strSQL

set conn=server.CreateObject ("adodb.connection")
connect = "Driver=SQL Server;Server=(local);Database=leads;UID=x;PWD=x;"
conn.Open connect

' Route based on the action
if act = "getlist" then
    GetProgramList(value)
elseif act = "updatelocation" then
    UpdateLocation acadLevel, courseTime
elseif act = "updateentryterm" then
    UpdateEntryTerm acadLevel, courseTime, programType
end if

' Gets the list of programs for the ProgramofInterest dropdown.
sub GetProgramList(val)
    dim outputPrograms

    outputPrograms = outputPrograms + "<select style=""width:431px;"" id=""ProgramofInterest""><option value=''>&lt;Select&gt;</option>"

    Set oRs=Server.CreateObject("adodb.recordset")

    Select Case val
        Case "undergraduate"
            strSQL = "SELECT ProgramCode, ProgramName FROM tbPrograms WHERE ProgramLevel = 'UG' ORDER BY ProgramWeight ASC, ProgramType ASC, ProgramName ASC"
        Case "graduate"
            strSQL = "SELECT ProgramCode, ProgramName FROM tbPrograms WHERE ProgramLevel = 'GR' ORDER BY ProgramWeight ASC, ProgramType ASC, ProgramName ASC"
        Case Else
            strSQL = "SELECT ProgramCode, ProgramName FROM tbPrograms ORDER BY ProgramWeight ASC, ProgramType ASC, ProgramName ASC"
    End Select

    oRs.Open strSQL, conn

    Do while not oRs.EOF               
        outputPrograms = outputPrograms + "<option value = '" & oRS ("ProgramCode") & "'>"
        outputPrograms = outputPrograms + oRs("ProgramName") & "</option>"
        oRs.MoveNext
    loop    

    outputPrograms = outputPrograms + "</select>"

    response.write(outputPrograms)  
end sub

sub UpdateLocation(level, time)
    Dim outputProgramTypes                                                  

    outputProgramTypes = outputProgramTypes + "<select name=""ProgramType"" id=""ProgramType""><option value=''>&lt;Select&gt;</option>"

    Set oRs=Server.CreateObject("adodb.recordset")

    'if Request.Form("AcademicLevel") = "undergraduate" and Request.Form("CourseDeliveryTime") = "Day" then    
    if level = "undergraduate" and time = "Day" then    
        strSQL = "SELECT LocationName, LocationCode FROM tbLocations WHERE LocationWeight < 3 ORDER BY LocationWeight ASC"        
    else
        strSQL = "SELECT LocationName, LocationCode FROM tbLocations ORDER BY LocationWeight ASC"
    end if

    oRs.Open strSQL, conn

    Do while not oRs.EOF               
        outputProgramTypes = outputProgramTypes + "<option value = '" & oRS ("LocationCode") & "'>"
        outputProgramTypes = outputProgramTypes + oRs("LocationName") & "</option>"
        oRs.MoveNext
    loop

    outputProgramTypes = outputProgramTypes + "</select>"

    Response.Write(outputProgramTypes)
end sub

sub UpdateEntryTerm(level, time, progType)
    Dim outputEntryTerms    

    outputEntryTerms = outputEntryTerms + "<select name=""EntryTerm"" id=""EntryTerm""><option value=''>&lt;Select&gt;</option>"

    Set oRs=Server.CreateObject("adodb.recordset")

    'if Request.Form("AcademicLevel") = "undergraduate" and Request.Form("CourseDeliveryTime") = "Day" and Request.Form("ProgramType") = "MAN" then
    if level = "undergraduate" and time = "Day" and progType = "MAN" then
        strSQL = "SELECT EntryTermName, EntryTermCode FROM tbEntryTerms WHERE ID < 7 ORDER BY EntryTermWeight ASC"
    else
        strSQL = "SELECT EntryTermName, EntryTermCode FROM tbEntryTerms WHERE ID = 7"        
    end if

    oRs.Open strSQL, conn

    Do while not oRs.EOF               
        outputEntryTerms = outputEntryTerms + "<option value = '" & oRS ("EntryTermCode") & "'>"
        outputEntryTerms = outputEntryTerms + oRs("EntryTermName") & "</option>"
        oRs.MoveNext
    loop

    outputEntryTerms = outputEntryTerms + "</select>"

    Response.Write(outputEntryTerms)
end sub

%>

Hopefully that helps you guys help me a little better. I didn't add the full form because it is massive, and contains a ton of legacy code.

Answer 1

I have never seen that but the problem seems to be simple; your event is *finishing before it's actually finished. Of course I am sure the solution is much more involved (and I am sorry I really have no idea?) but that is where I would start looking.

Answer 2

Two things I noticed:

1. Your url is not escaped (i.e. spaces are not %20), although I'm not sure whether jQuery would handle that.
2. Naming seems to suggest that #EntryTerm is a top level element of #tdEntryTerm. If so, removing it would obviously spoil posting data to the sub level element but leave the alert intact.

Other than that, you will have to post more code.

Answer 3

I finally figured out the issue here, and it was pretty simple in the end.

On document.ready I add a function call to the change event for one dropdown like so: $("#ProgramType").change(updateEntryTerm);

Later on when that dropdown needs to be updated I remove it, then add it back to the page with the updated list. That is the problem. After removing it, I never did the call to add the function call to the change event again.

Like I said very simple, just overlooked the process there.