我是新手使用cfajaxproxy,我试图选择一些复选框,然后遍历所有选中的复选框,并使用cfajaxproxy和jQuery将结果保存到数据库中。
标记是通过循环查询生成的,但这里是一个给我带来问题的区域样本:
<span id="1569_2627_text">I certify that the employee has been trained in the use of the following
equipment (please check all that apply):</span><br />
<input type="hidden" name="2627_max_length" id="2627_max_length" value="">
<input type="hidden" name="2627_min_value" id="2627_min_value" value="">
<input type="hidden" name="2627_max_value" id="2627_max_value" value="">
<input type="hidden" name="2627_regex_format" id="2627_regex_format" value="">
<input type="hidden" name="2627_system_type" id="2627_system_type" value="">
<input type="hidden" name="2627_app_type_version" id="2627_app_type_version" value="1569">
<input type="hidden" name="2627_question_type" id="2627_question_type" value="CM">
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8509" data-app_type_version="1569">
<span>Face Shield<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8510" data-app_type_version="1569">
<span>Neoprene Gloves<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8511" data-app_type_version="1569">
<span>Apron<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8512" data-app_type_version="1569">
<span>Boots<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8513" data-app_type_version="1569">
<span>Wizard Glove<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8514" data-app_type_version="1569">
<span>Insulated Mitt<span>
</label><br />
<label>
<input class="questionChoice" type="checkbox" name="2627"
value="8515" data-app_type_version="1569">
<span>Insulated Glove<span>
</label><br />
<button class="add_answer" value="2627" data-app_type_version="1569" disabled>Add answer</button>
这是我的cfajax代理标记:
<cfajaxproxy cfc="#APPLICATION.cfMapping#.Agency.Agency"
jsclassname="agency_object">
以下是每个复选框应运行的功能:
function saveResponses(question_no, answerValue){
var myagOBJ = new agency_object();
myagOBJ.setHTTPMethod('POST');
myagOBJ.setCallbackHandler(function(result) {
numOfCalls++;
alert(result+ ", call number: "+ numOfCalls);
});
myagOBJ.setErrorHandler(null);
myagOBJ.store_prepopulated_response(
agency_id = #SESSION.agency_object.get_id()#,
jQuery("select##site").val(),
question_no,
answerValue
);
}
这是循环遍历每个复选框的jQuery代码:
$("div##" + div + " [name=" + question_no + "]:checked").each(function() {
answerText = $(this).next().text();
answerValue = $(this).val();
identifier = question_no + "_" + answerValue;
if(answers["q_" + identifier] === undefined) {
formAppend();
answers["q_" + identifier] = answerValue;
alert("From Checkbox");
saveResponses(question_no, answerValue);
$("div##saved_answers table").append(
"<tr id=\"" + identifier + "\"><td><strong>" + formName +
"</strong><br>" + questionText + "</td><td>" + answerText +
"<br><button data-app_type_version=\"" + div +
"\"class=\"remove\" value=\"" + identifier +
"\">Remove</button></td></tr>"
);
}
});
它正在调用的cfc的方法是:
<cffunction name="store_prepopulated_response" access="remote" returntype="string" verifyclient="true">
<cfargument name="agency_id" type="numeric" required="true">
<cfargument name="site_id" type="numeric" required="true">
<cfargument name="question_no" type="numeric" required="true">
<cfargument name="response" type="string" required="true">
<cfreturn "Agency id: #agency_id#, Site ID: #site_id#, Question No: #question_no#, Resonse: #response#">
</cffunction>
我仍然只是测试一些东西以确保它有效,因此除了返回测试结果之外,很多函数实际上正在做任何事情。
当我运行这段代码时,它正好调用cfc并返回结果,但它调用它的次数太多了。
例如,如果我检查三个盒子,它将调用cfc方法7次,如果我检查两个盒子,它将调用cfc方法5次。我检查所有7个方框,cfc方法被调用了19次。
我的第一个想法是cfc被称为正确的次数,但是callbackhandler被调用的次数很多因为每个实例都会在返回结果时调用它的响应处理程序,所以我创建了一个全局实例agency_object,每次调用方法,但我得到相同的结果。
有人知道为什么会这样吗?
*(编辑)我刚刚给实际的cfc添加了一个带有调用计数的计数,它实际上是多次调用cfc方法。
答案 0 :(得分:1)
“因为callbackhandler不知道它应该处理哪个特定响应所有响应处理所有响应”
这就是回调处理程序的工作原理。他们应该处理所有的回复。问题是你正在创建多个回调处理程序,它们都做同样的事情;每个响应都发送给每个处理程序。
通过使用JavaScript 匿名函数(将saveResponses
作为方法参数传递)在function(){...}
函数中设置处理程序,您将为该类附加其他回调处理程序。如果您为每个请求创建和销毁对象,这可能是有意义的,但正如您的帖子的评论中所讨论的,您最好创建一个实例。使用这种方法,您也应该在此函数之外设置回调处理程序。
为了说明发生了什么,让我们看一下当您检查3个方框并运行saveResponses
时会发生什么:
saveResponses(...){
//...
myagOBJ.setCallbackHandler(function(result) {
numOfCalls++;
alert(result+ ", call number: "+ numOfCalls);
});
//...
}
处理程序的附加解释了3个复选框 - &gt; 7个电话。
saveResponse
方法, .each()
被多次调用;它会快速连续地循环jQuery选择器返回的每个项目,为每个项目运行一次处理程序。
这只会增加6个电话,所以有些事情仍然不对,但你可以看到这很快会成为一个巨大的问题。由于ajax请求的异步性质,第7个可能会进入。 真正发生的事情可能更像是:
saveResponses
致电
saveResponses
致电
saveResponses
致电
课程:在调用者之外声明/分配处理程序(在实例化类的位置附近最有意义)。
如果你真的想学习JavaScript - 你应该 - 拿起一份 JavaScript:好的部分。它非常简短,但写得非常好,使复杂的概念更容易理解。其中一些可能在你目前的技能水平上没有多大意义,但是首先关注的是什么是触手可及的(例如匿名函数),然后在你真正理解它们之后,转向更难的事情,比如模块。