Question

我有AJAX，可以在选定的部门中加载团队的下拉菜单，然后在选定的团队中加载另一个团队。我希望能够提交表单并使用在最后一个下拉列表中选择的代理（＃form.selectAgent＃）来设置变量（#empHistoryRACF＃）＆amp;运行查询。当我填写表单时，我能够看到带有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函数发生冲突。

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

1 个答案: