f:ajax doesn't work with element.click() if h:commandButton is hidden via display:none

Question

I have input text, and if enter key is pressed on this component following js for button programmatic click is executed:

document.getElementById('myform:saveNew').click();

The button jsf:

<h:commandButton value="test link" action="#{myBean.save()}" style="display:none;" id="saveNew">
                <f:ajax render="interests" execute="@this"></f:ajax>
</h:commandButton>

Currently if I click enter on the input text, the whole form is submitted and reloaded. I think that AJAX is not working in this case, while if I removed display:none; from the button (for testing) the AJAX and rendering is working fine.

have You tried if it works with Primefaces `` ? – Kuba Nov 24 '13 at 20:24 — Kuba, Nov 24 '13 at 20:24
@Kuba, primefaces is not an option. – Mahmoud Saleh Nov 24 '13 at 22:56 — Mahmoud Saleh, Nov 24 '13 at 22:56

score 0 · Accepted Answer · answered Nov 24 '13 at 19:20

one workaround i found to hide the button and keep ajax working is to use the following class instead the style display none:

.hidden_button{
    height: 0px !important;
    width: 0px !important;
    padding: 0px !important;
    border: none !important;
}

f:ajax doesn't work with element.click() if h:commandButton is hidden via display:none

1 Answers1