使用onkeyup时部分刷新做全刷新
Partial refresh do full refresh when using onkeyup
我有一个输入字段和一个包含相同代码和相同部分刷新的按钮,该按钮工作正常并进行部分刷新,但在输入字段中输入 "enter" 时会出现完全刷新。
我做错了什么
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:text escape="true" id="computedField1"
value="#{javascript:@Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:panel id="ref">
<xp:inputText id="inputText8" style="width:142.0px">
<xp:this.attrs>
<xp:attr name="placeholder" value="Sök produkter"></xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onkeydown" submit="true"
refreshMode="partial" refreshId="ref" execMode="partial"
execId="ref">
<xp:this.action><![CDATA[#{javascript:try{
viewScope.sq = getComponent("inputText8").getValue();
}catch(e){
doLog(e,this)
}}]]></xp:this.action>
<xp:this.script><![CDATA[var k = thisEvent.keyCode;
if (k == 13) {
return true;
}else{
return false;
}]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
<xp:button value="Sök" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="ref" execMode="partial" execId="ref">
<xp:this.action><![CDATA[#{javascript:try{
viewScope.sq = getComponent("inputText8").getValue();
}catch(e){
doLog(e,this)
}}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:panel>
<xp:br></xp:br>
</xp:view>
顺便说一句:onkeypress、onkeyup 和 onkeydown 的工作方式相同
更新解决方案
if(thisEvent.keyCode == 13) {
thisEvent.preventDefault();
return true;
}else{
return false;
}
当我尝试重现您的场景时,ajax 请求后紧接着是导致整页刷新的表单提交。这应该有帮助:
<xp:this.script><![CDATA[
event.preventDefault();
var k = thisEvent.keyCode;
if (k == 13) {
return true;
}else{
return false;
}]]>
</xp:this.script>
我有一个输入字段和一个包含相同代码和相同部分刷新的按钮,该按钮工作正常并进行部分刷新,但在输入字段中输入 "enter" 时会出现完全刷新。
我做错了什么
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:text escape="true" id="computedField1"
value="#{javascript:@Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:panel id="ref">
<xp:inputText id="inputText8" style="width:142.0px">
<xp:this.attrs>
<xp:attr name="placeholder" value="Sök produkter"></xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onkeydown" submit="true"
refreshMode="partial" refreshId="ref" execMode="partial"
execId="ref">
<xp:this.action><![CDATA[#{javascript:try{
viewScope.sq = getComponent("inputText8").getValue();
}catch(e){
doLog(e,this)
}}]]></xp:this.action>
<xp:this.script><![CDATA[var k = thisEvent.keyCode;
if (k == 13) {
return true;
}else{
return false;
}]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
<xp:button value="Sök" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="ref" execMode="partial" execId="ref">
<xp:this.action><![CDATA[#{javascript:try{
viewScope.sq = getComponent("inputText8").getValue();
}catch(e){
doLog(e,this)
}}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:panel>
<xp:br></xp:br>
</xp:view>
顺便说一句:onkeypress、onkeyup 和 onkeydown 的工作方式相同
更新解决方案
if(thisEvent.keyCode == 13) {
thisEvent.preventDefault();
return true;
}else{
return false;
}
当我尝试重现您的场景时,ajax 请求后紧接着是导致整页刷新的表单提交。这应该有帮助:
<xp:this.script><![CDATA[
event.preventDefault();
var k = thisEvent.keyCode;
if (k == 13) {
return true;
}else{
return false;
}]]>
</xp:this.script>