I have a simple Form with an inputText and a commandButton.
<h:form>
<h:inputText id="xyz" value="#{viewImpl.field}" onfocus="clearText(this)" onblur="setDefaultText(this)" />
<h:commandButton action="#{viewImpl.method}"/>
</h:form>
If I press on the commandButton the form is submitted correctly.
But if I hit enter, still being in the inputText-Field the page reloads, but the method is not called (server is in debug mode with activated breakpoints).
Important: This only happens in IE 8. It works perfectly fine in Firefox.
Any clue on how I can fix this?
Thanks alot!
This is a known problem with one-field forms in IE. Pressing the enter key won't trigger the first-next button of the form and hence its name=value pair won't appear in the request parameter map and hence JSF can't identify the button in order to queue the action event.
One of the ways to fix this is to add a second but invisible input field to the very same form.
<input type="text" name="dummy" style="display: none;" />
This will cause IE to send the name=value pair of the first-next button as well.
Related
I have a form with a few different text fields which the user needs to fill in to be able to go to the next step. The next step of the page is accessed by clicking a commandbutton "Next" and should only be enabled when all of the fields are valid (validated on the server).
The problem is that the user can click the "next step" button directly after changing a field with valid input to invalid input, without loosing focus on the field, causing the validation to not get triggered in time to prevent the user to go to the next step.
Here is an example of one of the fields, together with the commandbutton doing the submit.
<p:inputTextarea id="lineFreeText" value="#{line.freeText}" rows="1" disabled="#{facesContext.validationFailed and component.valid}"
maxlength="#{itemConstant.MAX_FREE_TEXT_LENGTH}" counter="freeTextCounter"
counterTemplate="{0}/#{itemConstant.MAX_FREE_TEXT_LENGTH}" rendered="#{showFreeText and !line.hasItemForm()}" validator="freeTextValidator" validatorMessage="#{messages.freeTextRequired}" requiredMessage="#{messages.freeTextRequired}">
<p:ajax event="change" process="#this" listener="#{cartController.saveLine(line)}" update="#form cartForm lineFreeText lineEditedSymbols lineFreeTextMessage #([id$=nextStepBtn])" />
</p:inputTextarea>
<h:commandButton value="#{messages['checkout.nextStep']}" id="nextStepBtn" rendered="#{cartController.size() gt 0 and !clientContext.OCIRequest}"
onclick="$('.jqRealNextStepButton').click();" style="border: 2px solid #008091; padding: 0.5em;"
styleClass="ju-button" disabled="#{clientContext.client.visitor or checkoutDeliveryDateController.disableNextButton() or totalMinAmountNotMet or facesContext.validationFailed or not facesContext.postback}"
title="#{clientContext.client.visitor ? messages.disabledForVisitor : tooltip}">
<f:ajax execute="#this" />
</h:commandButton>
I want the commandbutton to cancel the submit when there's an on going ajax happening, so that the validation can finish before the form is submitted, enabling me to prevent users from inputting invalid data and continuing. Is there an easy way to accomplish this?
Cheers
The solution was to change the commandbutton to the primefaces one, and remove the onclick pointing to another commandlink, which executed the backend-logic to traverse to the next page. When I put the action-method in the <p:commandbutton/> the ajax-events were properly queued.
I have the following problem I have a CommandButton of primefaces that does well its function which is to save an accounting movement, but when you try to enter a second movement the button does not work to such an extent that it does not warn you if the required fields are empty.
Note that if I give the cancel button that only has a JS to hide and show some labels there is if the button works again.
I need that button to continue working without having to hit the cancel button.
I'm going to leave a partial code that includes the TAG of the form and the buttons warn if you need to also put the fields.
<h:form id="form_agregar_movimiento" prependId="false" >
...
<p:commandButton styleClass="Tamano-Texto-Datos Boton-Afirmativo"
value="Agregar"
action="#{movimientosController.agregarNuevoMovimiento()}"
update=":growl_mensaje_eventos :dataTable_listar_movimientos form_agregar_movimiento"
/>
<p:commandButton styleClass="Tamano-Texto-Boton Boton-Negativo"
value="Cancelar"
onclick="js_ocultar('agregar_movimiento_contenedor'); js_mostrar('movimiento_contenedor_botonAgregarMovimiento');"/>
</h:form>
594/5000
Hi guys, I have solved the problem, I noticed that other forms presented the same problem and testing by ending with #form as recommended and the "prependId = true" and additional add the attribute resetValues="true" and with And the buttons come back to work without problems.
Note: in the example that this function did not work for me but it was for something else, I had a RequestContext.getCurrentInstance().Execute() which calls a JavaScript and it was giving me an error in the browser, I corrected it and works correctly.
Thanks for the tips that have left me
<h:form>
<h:selectOneMenu value="#{productBean.productName}">
<f:selectItem itemValue="" itemLabel="..." />
<f:selectItems value="#{productBean.pizza}" var="pizza" itemValue="#{pizza.name}" itemLabel="#{pizza.name}" />
<f:ajax listener="#{productBean.valueChanged(productBean.productName)}" render="pizzaResult pizzaButton" />
</h:selectOneMenu>
<h:commandButton value ="Dodaj do zamówienia" disabled="#{productBean.isDisabled}" id="pizzaButton" onclick="#{productBean.order}"/>
<h:outputText id="pizzaResult" value="#{productBean.message}" />
</h:form>
This is my JSF form. I used valueChanged listener to make button diabled in ome cases and it works good. But I don't get why it triggers also the buttons onclick. How to do something which enable me to use button ONLY after clicking it?
I noticed that when I delete the disabled option it works good:/ But why I cannot trigger the action when button is enabled in the moment?
onclick is a client side attribute so you shouldn't try to bind it to managed bean method calls and it looks as though you did onclick=#{productBean.order} (apart from the missing quotes). This may be the cause of your problems.
OK i did that. The problem is that the button may appear as enabled (disabled="false") but its client side change and server don't know about it and application thinks that the button is still disabled. Even it looks like enabled button it won't work with action="#{something}".
You have to let server know about the change. THe only thing i did is adding the #ViewScoped to the managed bean. Now the action of disabling and enabling the button is also being seen by the server and works perfectly.
However i have a question. Client side verifaction is a bad idea. Disabled button is the only thing which prevent user from sending empty itemValue or product(in my case) which is unavailable (is_available = 0 in DB). The question is: Is it enough to ensure that it will be safe?
edit: Unfortunately after clicking the button the buttons appear enabled even though the oneSelectMenu is turned to the first, empty value. After changing the list it works again as previously, and after clicking again the situation takes time again.
I have a jsf page where I have several 's. When I press enter I want a particular button to be clicked - and this button is hidden. Is there a way to do this without using JS?
I know if i place the button as the first button on the page, it will be clicked by default - but it does not seem to work.
Here is the sample code. I want the "hiddenButton" to be clicked on Enter.
<h:form>
<h:commandButton id="button1" action="#{bean.action1}" />
<h:commandButton id="button2" action="#{bean.action2}" />
<h:commandButton id="button3" action="#{bean.action3}" />
<h:commandButton id="hiddenButton" action="#{bean.hiddenAction}" style="display:none;"/>
<h:form>
Is there a way to do this without using JS?
Not if you want to support all browsers.
I know if i place the button as the first button on the page, it will be clicked by default - but it does not seem to work.
This works only in Firefox, not in Chrome (Webkit) or IE. If you replace display:none by visibility:hidden, then it'll also work in Chrome, but still not in IE.
So, if you want to support all browsers, JS is your best bet. There may be better solutions depending on the concrete functional requirement, which you didn't tell anything about in the question.
I have a JSF/PrimeFaces form page set up to edit some configuration details. At the bottom are Submit and Cancel buttons implemented as CommandButton. The Cancel button looks like this:
<p:commandButton
action="priorPage.xhtml?faces-redirect=true"
value="Cancel" />
The problem is that the view bean still winds up doing more processing on the data that's been entered into the form than I'd like. It isn't updating anything in the database, but if (say) I enter a string into a field that's looking for a numeric in the bean, it still produces errors.
Part of my solution is, of course, to get the bean to gracefully handle that sort of bad data, and I'm working on it. But I'd also like to tweak that button so that it just takes the user to the prior page. Is there some attribute I can set that will prevent the form from being processed at all?
The <p:commandButton> submits the form. You don't want to submit the form. You should then not use the <p:commandButton>, but just <p:button>.
<p:button value="Cancel" outcome="priorPage.xhtml" />
See also:
Difference between h:button and h:commandButton