Search code examples
javascriptajaxxpagesssjspartial-refresh

Partial refresh do full refresh when using onkeyup


I have an input field and a button containing the same code and same partial refresh, The button works fine and do the partial refresh but when entering "enter" in the input field there is a full refresh.

what am I doing wrong

<?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>

btw: onkeypress, onkeyup and onkeydown works the same way

UPDATE SOLUTION

if(thisEvent.keyCode == 13) {
    thisEvent.preventDefault();
    return true;
}else{
    return false;
}

Solution

  • When I try to reproduce your scenario, ajax request is immediately followed by form submit that causes full page refresh. This should help:

    <xp:this.script><![CDATA[
        event.preventDefault();
        var k = thisEvent.keyCode;
        if (k == 13) {
            return true;
        }else{
            return false;
        }]]>
    </xp:this.script>