Javascript/Trinidad: autoSubmit on checkbox prevents keyup event from being heard

Question

When my user presses 'Enter' after clicking a checkbox, my form should act as though the 'Next' button was pressed. But, I am using PPR (partial page rendering) so that when it is clicked, my checkbox triggers a 'Next' button to get repainted. This is done by setting autoSubmit="true" on the checkbox and a partialTrigger on the button.

The problem is that with autoSubmit=”true” on my component, the javascript/jquery does not ‘hear’ the keyup event. I assume that this is because when the button that has the partialTrigger on it is repainted, my checkbox has lost focus. I have tried resetting the focus on the checkbox in an onclick method but it seems to fire too early. I set a timeout on it too, but that didn't work either. I have also tried programatically making a javascript call during the checkbox's valueChangeListener method, but this must be firing too early as well. Does anyone know why this is happening and what I can do?

Here is the code

$(document).ready(function(){ 
    $("input[id='subview:agree']").keyup(function (event) {
    if (event.keyCode == 13) {      
        processEnterKey();
    }
  });
 }); 

function processEnterKey() {
    $("button[id='subview:btnSubmit']").click();   
}

Checkbox:

<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
                          id="agree"
                          autoSubmit="true"
                          simple="true"
                          valueChangeListener="#{bean.agreementChangeListener}"/>                                         /

Button:

<tr:commandButton id="btnSubmit"
                  disabled="#{!bean.agreementAccepted}"
                  partialTriggers="agree" text="Next"
                  action="#{bean.termsOfUse_action}"
                  partialSubmit="false"
                  onclick="handleLoadingPleaseWait()"
                  blocking="true"/>

Here is the onclick method I used to try to set focus back to the checkbox so it could 'hear' the keyup:

$("input[id='subview:agree']").click(function (event) {
        if(document.getElementById('subview:agree').checked) {
        setTimeout(function(){document.getElementById('subview:agree').focus();},1000)
        }
 });

Here is the server-side code I put in the changeListener:

    FacesContext fctx = FacesContext.getCurrentInstance();
    ExtendedRenderKitService erks = null;

    //compose JavaScript to be executed on the client 
    StringBuilder script = new StringBuilder();
    script.append("document.getElementById(\"subview:agree\").focus();");

    erks = Service.getRenderKitService(
                     fctx, ExtendedRenderKitService.class);
    erks.addScript(fctx, script.toString());

Jasper de Vries · Answer 1 · 2015-07-09T08:02:04.720

If you want to submit the form from each imput by pressing enter you can simply use the defaultCommand attribute on your tr:form.

Documentation on <tr:form defaultCommand="..."/>

The id attribute of the command button whose action would be invoked by default for form submit on hitting enter on any of the input fields of the form.

So, setting it to btnSubmit should do the trick.

As this did not help for your scenario, you could try adding a onkeypress attribute to your checkbox:

<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
                          id="agree"
                          autoSubmit="true"
                          simple="true"
                          valueChangeListener="#{bean.agreementChangeListener}"
                          onkeypress="if (event.keyCode === 13){ this.click(); }"/>

For me this triggered submitting my form.

Thanks @Jasper de Vries. This is a great solution and it works like a charm elsewhere, but not in this scenario with the autosubmit. — cmac, Jul 08 '15 at 21:53
You could try `onkeypress="if (event.keyCode === 13){ this.click(); }"` on your checkbox. — Jasper de Vries, Jul 09 '15 at 08:02

Javascript/Trinidad: autoSubmit on checkbox prevents keyup event from being heard

1 Answers1