使用 ColdFusion 在 HTML 表单中包含 AJAX 检索的选择输入

Question

我有一个 AJAX，它会加载一个下拉菜单，其中包含选定部门内的团队，然后是另一个包含该选定团队内的代理的下拉菜单。我希望能够提交表单并使用在最后一个下拉列表 (#form.selectAgent#) 中选择的代理来设置变量 (#empHistoryRACF#) 并运行查询。当我填写表格时，我能够看到两个带有 AJAX 查询内容的下拉列表，但它们的值没有在帖子中提交，尽管提交按钮（非 AJAXed）是。奇怪的是，我的应用程序的另一部分使用相同类型的代码执行相同的操作，并且运行良好。我尝试将应用程序的该部分注释掉，但 form.selectAgent 仍未定义。我正在使用 ColdFusion 10 和以下代码。

HTML 表单：

<form action="index.cfm" method="post" name="empHist">
<td colspan="5">
    <h2>Employee History (#empHistoryRACF#)</h2>
</td>
<td colspan="2" style="text-align: center;">
    <select name="employeeHistory" id="empHist" onchange="getTeamsHist(this.value)">
        <option value=""></option>
        <cfset length = structCount(deptStruct)>
        <cfloop from="1" to="#length#" index="i">
            <option value="#deptStruct[i]['DEPT_NAME']#">#deptStruct[i]['DEPT_NAME']#</option>
        </cfloop>
    </select>
</td>
<td style="text-align: center;">
    <div id="getTeamsHist"></div>
</td>
<td style="text-align: center;">
    <div id="getAgentsHist"></div>
</td>
<td style="text-align: right;">
    <input type="submit" name="submitHist" value="View Employee">
</td>           
</form>

getTeamsHist 和 getAgentsHist 的 AJAX：

function getTeamsHist(str) {
    var xmlhttp;

    if (str == "") {
        document.getElementById("getTeamsHist").innerHTML = "";
        return;
    }

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("getTeamsHist").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","ajax/get_teams_hist.cfm?ajaxDept=" + str, true);
    xmlhttp.send();
}

function getAgentsHist(str) {
    var xmlhttp;

    if (str == "") {
        document.getElementById("getAgentsHist").innerHTML = "";
        return;
    }

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("getAgentsHist").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","ajax/get_agents_hist.cfm?ajaxTeam=" + str, true);
    xmlhttp.send();
}

这里是 get_teams_hist.cfm：

<cfoutput>
<cfloop query="agentQuery">
    <cfloop list="#agentQuery.columnList#" index="col">
        <cfset agentStruct[currentRow]['#col#'] = evaluate(#col#)>
    </cfloop>
</cfloop>

<select name="selectAgent" id="selectAgent">
    <option value=""></option>
    <cfset length = structCount(agentStruct)>
    <cfloop from="1" to="#length#" index="i">
        <option value="#agentStruct[i]['AGENT_UID']#">#agentStruct[i]['AGENT_UID']#</option>
    </cfloop>
</select>
</cfoutput>

这里是 get_agents_hist.cfm：

<cfoutput>
<cfloop query="teamQuery">
    <cfloop list="#teamQuery.columnList#" index="col">
        <cfset teamStruct[currentRow]['#col#'] = evaluate(#col#)>
    </cfloop>
</cfloop>

<select name="selectTeam" id="selectTeam" onchange="getAgentsHist(this.value)">
    <option value=""></option>
    <cfset length = structCount(teamStruct)>
    <cfloop from="1" to="#length#" index="i">
        <option value="#teamStruct[i]['AGENT_TEAM']#">#teamStruct[i]['AGENT_TEAM']#</option>
    </cfloop>
</select>
</cfoutput>

这就是我尝试使用第二个选择中的内容的方式 - 它显示 selectAgent 未定义。如果我执行 cfdump var="#form#"，它也没有显示。

<cfif isDefined('form.submitHist')>
    <cfset empHistoryRACF = form.selectAgent>
<cfelse>
    <cfset empHistoryRACF = "">
</cfif>

Answer 1

首先，<form> 标记未正确嵌套在 HTML 文档中（不应位于 <tr> 和 <td> 之间）。这有时会导致问题——尤其是在使用 AJAX 加载的表单元素时，尤其是在 IE 中意外查看它时。尝试将您的 <form> 移到 <table> 之外，然后查看字段是否已发布。

另外，您的get_agents_hist.cfm 和get_agents_hist.cfm 文件似乎正在将查询转换为结构，只是为了遍历该结构并创建<options>。这工作量太大了。你应该只使用类似的东西：

<select name="selectTeam" id="selectTeam" onchange="getAgentsHist(this.value)">
   <option value=""></option>
    <cfoutput query="teamQuery">
      <option value="#teamQuery.AGENT_TEAM#">#teamQuery.AGENT_TEAM#</option>
   </cfoutput>
</select>

附带说明，在几乎所有情况下，您都不需要在 CFML 中使用 evaluate()。如果您发现自己认为自己需要它，那么可能有更好的方法来解决问题。

最后，您可能应该更改“getTeamsHist”和“getAgentsHist”div 的 ID，因为它们可能会与同名的全局范围的 JS 函数发生冲突。