首先:
此页面适用于在线药房
我们使用一个小脚本从保险公司检索一些数据,以确保用户实际上拥有保险。
在我们的一个页面上,我们有两个文本字段和一个按钮。文本字段向按钮发送一个.click()
以检索一些信息,但前提是它们都填充了正确类型的数据
这是有效的。
为了提高我们网站的可用性,我们正在创建一个不同页面的流量。前面描述的页面就是其中之一。我确信所需的信息总是在2个文本字段中,所以我使用JavaScript向按钮发送.click()
。但不知何故,$('ZK').click();
不起作用,但alert(); $('ZK').click();
起作用。
有谁能向我解释为什么第一个不起作用,第二个起作用?也许还有我该如何解决这个小问题?
.click()
是不是有什么没有活动之类的?
此页面内的代码:(非间接加载)
文本字段和按钮:
<INPUT onkeypress="return noenter()"
onkeydown="return isNumericKey(event)"
TYPE="TEXT"
class="ajaxsearch"
name="DOB" id="DOB"
value="<%=DOB%>"
MAXLENGTH="8"
style="width:60px;height:18px"
onkeyup="javascript:if ($(DOB).get('value').length==8 &&
$(DOB).get('value')!='ddmmjjjj')
{
var myFx=new Fx.Tween($(DOB));
myFx.set('color','#000066');
$('ZK').click();
} else {
var myFx=new Fx.Tween($(DOB));
myFx.set('color', '#cc0000');
};"> `
<INPUT url="?NC=<%=Rnd(Now)%>"
TYPE="BUTTON"
NAME="ZK" ID="ZK"
VALUE="Zoek mij"
class="button"
style="width:70px;height:22px">
调用脚本:
if ($('DOB').get('value').length==8
&& $('DOB').get('value')!='ddmmjjjj')
{
var myFx=new Fx.Tween($('DOB'));
myFx.set('color', '#000066');
//alert();
$('ZK').click();
} else {
var myFx=new Fx.Tween($('DOB'));
myFx.set('color', '#cc0000');
}
Ajax脚本&调用:
<script language="javascript">
window.addEvent('domready', function() {
$('ZK').addEvent('click', function(event) {
event.stop();
var req = new Request.HTML({
method: 'post',
url: '../ajax/a_bsn.asp',
data: {
'BSN':$('BSN').get('value'),
'DOB':$('DOB').get('value'),
'RequestType':'WWW',
'RXID':'<%=GUID%>'
},
update: $('RES'),
onRequest: function() {
$('RES').innerHTML = '<img width="16px" height="16px" src="../images/spinner.gif"/>';
}}).send();
});
////////
<% If (Len(BSN)=8 or Len(BSN)=9) and IsNumeric(BSN) and Len(DOB)=8 and IsNumeric(DOB) Then %>
if ($('BSN').get('value').length>7){
var myFx=new Fx.Tween($('BSN'));
myFx.set('color', '#000066');
} else {
var myFx=new Fx.Tween($('BSN'));
myFx.set('color', '#cc0000');
}
if ($('DOB').get('value').length==8 && $('DOB').get('value')!='ddmmjjjj'){
var myFx=new Fx.Tween($('DOB'));
myFx.set('color', '#000066');
// var $zk = $('ZK'); console.log($zk); $zk.click();
// alert('Uw gegevens worden ingevuld.');
setTimeout("$('ZK').click();",1);
//$('ZK').click();
} else {
var myFx=new Fx.Tween($('DOB'));
myFx.set('color', '#cc0000');
}
<% End If %>
////////
});
</script>
受Ajax 影响的Div
<DIV id="RES">
<INPUT TYPE="TEXT" ID="PNAAM" onkeypress="return noenter()" NAME="PNAAM" VALUE="<%=PNAAM%>" class="text_inv" style="width:375px">
</div>
最有可能的是,在其他错误中,您有一个以前的语句没有以分号结尾。尝试移除alert()
,并让;
进行测试。此外,如果您还没有,请检查您的控制台,因为您应该看到至少1个错误。
编辑后,我的初始答案不再有意义。
编辑:
您的点击处理程序和ajax调用被封装在domready
事件处理程序函数中。您的"调用脚本"也应该在domready中。根据您的最新编辑,domready
处理程序在ASP标记<%
之前关闭
这是你发布的:
}).send(); // --this is the end of ajax
}); // -- this is the end of the click handler
}); // -- this is the end of domready
<% If (Len(BSN)=8
所以你的通话脚本:
if ($('DOB').get('value').length==8 && $('DOB').get('value')!='ddmmjjjj') {
var myFx=new Fx.Tween($('DOB')); myFx.set('color', '#000066');
//alert();
$('ZK').click();
} else { var myFx=new Fx.Tween($('DOB')); myFx.set('color', '#cc0000'); }
在连接了点击处理程序后,需要进入domready
:
window.addEvent("domready", function(){
// Let's attach the click handler:
$('ZK').addEvent('click', function(event) {...do the ajax here etc...});
// the "call script" needs to be here
});
您需要等待文档结构加载。
顺便说一句,如果你停止在问题中移动代码,那会有所帮助——只需发布你目前正在使用的代码即可。
重用函数、选择器和变量。。。
window.addEvent('domready', function() {
var ZK = $('ZK');
ZK.addEvent('click', function(event) {
// make event safe and reusable via software call
event.stop && event.stop(); // don't call stop if not a real event.
// logic here
});
$('DOB').addEvent('keyup', function() {
// this == DOB
var value = this.get('value'); // get it once.
if (value.length && value.length === 8 && value !== 'ddmmjjjj') {
// do not call click! we can now fireEvent
ZK.fireEvent('click');
}
});
});
不要使用内联js。不要依赖$,对mootools 1.2.4+使用document.id
概括一下,不要去dom做合成.click()
-它不是最可靠的,你也不需要。
我们的首席程序员(他最初在大约8年前的某个地方创建了这个页面)认为将所有逻辑转移到函数中可能会更好。这样,如果必要的话,它们可以在代码的其他部分更容易地被触发。我们还删除了所有(旧的)内联脚本。
在这个解决方案中,使用了其他答案的某些部分。我要感谢所有其他的回答者和评论者的帮助。
代码的顶部现在看起来是这样的(经过测试并在浏览器中稳定工作):
function updateName(){
if (document.id('BSN').get('value').length>7 && document.id('DOB').get('value').length==8 && document.id('DOB').get('value')!='ddmmjjjj'){
var req = new Request.HTML({
method: 'post',
url: '../ajax/a_bsn.asp',
data:{'BSN':document.id('BSN').get('value'),'DOB':document.id('DOB').get('value'),'RequestType':'WWW','RXID':'<%=GUID%>'},
update: document.id('RES'),
onRequest: function() {
document.id('RES').innerHTML = '<img width="16px" height="16px" src="../images/spinner.gif"/>';
}
}).send();
}
}
function checkBSN(){
if (document.id('BSN').get('value').length>7){
var myFx=new Fx.Tween(document.id('BSN'));
myFx.set('color', '#000066');
updateName();
} else {
var myFx=new Fx.Tween(document.id('BSN'));
myFx.set('color', '#cc0000');
}
}
function checkDOB(){
if (document.id('DOB').get('value').length==8 && document.id('DOB').get('value')!='ddmmjjjj'){
var myFx=new Fx.Tween(document.id('DOB'));
myFx.set('color', '#000066');
updateName();
} else {
var myFx=new Fx.Tween(document.id('DOB'));
myFx.set('color', '#cc0000');
}
}
window.addEvent('domready', function() {
document.id('ZK').addEvent('click', function(event) {
event.stop && event.stop();
updateName();
});
document.id('BSN').addEvent('keyup', function(event) {
event.stop && event.stop();
updateName();
});
document.id('DOB').addEvent('keyup', function(event) {
event.stop && event.stop();
updateName();
});
<% If (Len(BSN)=8 or Len(BSN)=9) and IsNumeric(BSN) and Len(DOB)=8 and IsNumeric(DOB) Then %>
updateName();
<% End If %>
});