Partial refresh do full refresh when using onkeyup

Question

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;
}

If a web form has a single field on it, the browser assumes pressing enter means you want to submit the whole form. Unfortunately that means you have to code around the misconception, in the way the solution advises. — Paul Stephen Withers, Sep 10 '18 at 08:38

score 1 · Accepted Answer · answered Sep 07 '18 at 10:25

1

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>

answered Sep 07 '18 at 10:25

Stanislaw Guzik

244
2
11

var k = thisEvent.keyCode; if (k == 13) { thisEvent.preventDefault(); return true; }else{ return false; } – Thomas Adrian Sep 07 '18 at 10:50
not sure what the difference between event and thisEvent. both seem to work, the preventDefault seem to work but need to be in the if statement – Thomas Adrian Sep 07 '18 at 10:51

Partial refresh do full refresh when using onkeyup

1 Answers1