I got a simple login form. I am using <p:ajax> to invoke a <p:blockUI> (see this question).
<h:commandButton id="anmeldung_button"
action="#{benutzerAnmeldung.anmelden}" value="Anmelden"
styleClass="btn btn-info btn-sm">
<p:ajax process="#form" update="#form"/>
</h:commandButton>
<p:blockUI id="block" block=":anmeldung" trigger="anmeldung_button" />
I am using <o:highlight /> to highlight invalid inputs. This works fine.
It is working with a <f:ajax> perfectly, too.
Apperently, it is not working with <p:ajax>.
How can I achieve this?
This is caused by <p:ajax> trying to refocus the active element after executing the oncomplete scripts via doEval() (as can be seen in handleReFocus() function in core.ajax.js script. However, when you submit the form by clicking the command button instead of pressing Enter while inside the input, then that active element becomes the command button itself, not the input text. You can confirm this by just using Enter key to submit the form. You'll see that the focus is done right.
There are in your particular case 2 ways to workaround this:
Make use of PrimeFaces' own autofocus facility via <p:focus> which is placed inside the form as below:
<h:form id="anmeldung">
<p:focus context="anmeldung" />
...
</h:form>
It also automatically takes into account invalidated input fields.
Set PrimeFaces.customFocus to true in JavaScript, so that handleReFocus() function won't do its job.
<script>PrimeFaces.customFocus = true;</script>
Related
I have an input Text box and 1 button on my screen. I want to enable button only when input Text has some value in it. I have implemented following code and it is working OK when i enter some value and it enables the button. But ajax call is not made when i remove string from input Text and hence button is enabled even when i do not have any value.
code that i tried is
<h:inputText id="inputText" value="#{bean.value1}" label="Value1" required="true"
requiredMessage="value is empty" class="form-control">
<f:ajax event="keyup" render="clearButton"></f:ajax>
</h:inputText>
try this code without the required true
<h:inputText id="inputText" value="#{bean.value1}" label="Value1" class="form-control">
<f:ajax event="keyup" render="clearButton"></f:ajax>
</h:inputText>
If this solved your problem you can see more about in http://docs.oracle.com/javaee/1.4/tutorial/doc/JSFIntro10.html
It's a problem with the life circle of JSF, when you set the required like true and the input have no value your method never will be called.
Also you can try put the tag immediate for ignore the validation phase.
I am facing an issue after validations in JSF
Scenario - I have 2 drop downs and 2 input fields on the form. On selection of first drop down second one will populate and also the values of 2 text fields are depends on the first drop down selection.
1) So when I select some value from first drop down, second drop down and the text fields are populating with proper values.
2) when I click on submit button with out selecting the value from second drop down it is showing validation message as expected.
3) Now I changed the value of first drop down after validation error/fails. The values in text fields is not changing as required (means the text filed values are still showing old values) but the second drop down values are changing as expected.
Note:- Issue is only after validation fails.
<span class="col1 smallRightPadding marginBtmAdDiag">
<rich:select defaultLabel="Select bldng" enableManualInput="true"
id="search_bldng"
value="#{testManagedBean.bldng.bldngID}"
required="true" requiredMessage="#{testHome.selectBldng}">
<f:selectItemsvalue="#{testManagedBean.lstBldng}" var="bldngVar"
itemValue="#{bldngVar.bldngID}" itemLabel="#{bldngVar.bldngCode}">
</f:selectItems>
<a4j:ajax execute="#this" event="selectitem"
listener="#{testManagedBean.populateFloor}"
render="search_floor,hidSelBldng,hidSelFloor,hidSelbldngID" />
</rich:select>
<h:inputHidden id="hidSelBldng" value="#{testManagedBean.bldng.bldngCode}" />
<h:inputHidden id="hidSelbldngID" value="#{testManagedBean.bldng.bldngID}" />
</span>
<rich:select defaultLabel="Select Floor" enableManualInput="true"
id="search_floor"
value="#{testManagedBean.floor.floorID}"
required="true"
requiredMessage="#{testHome.selectFloor}">
<f:selectItems value="#{testManagedBean.floorLst}"
var="flr" itemValue="#{flr.floorID}"
itemLabel="#{flr.floorName}">
</f:selectItems>
</rich:select>
<h:commandButton id="goButtonId" value="#{testHome.goButton}" styleClass="saveButton">
<a4j:ajax event="click" execute="#form" oncomplete="drawLayerFromBtn();"
listener="#{testManagedBean.viewReport}"
render="tableId,hidSelFloor"/>
</h:commandButton>
The Problem
It's the classic jsf-2 problem with resetting the local values on input fields after a validation error. After a validation failure, JSF doesn't reset the value of the fields that were caught in the previous validation error, hence the reason the you're still seeing the old values
To Solve
You basically need to reset the values on those (missing) textfields yourself. In a convenient place, maybe in populateFloor
if(ctxt.isValidationFailed()){
UIInput textField1 = (UIInput) FacesContext.getCurrentInstance().getViewRoot().findComponent("theTextFieldId")
textField1.resetValue();
}
The snippet above will execute only if the current request cycle is marked as failed, and then proceed to clear the local values of the textfield with id="textField1"
I'm using PrimeFaces dataTable and rowEditor in pretty default way:
<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
<p:ajax event="rowEdit" listener="#{payment.update}"/>
...
</p:dataTable>
I'd like a confirmation dialog to show itself on clicking to the 'check' button of rowEditor.
I know it's possible using JS confirm function (thanks to Show a confirm message before <p:rowEditor> updates the model on click of "OK" button):
<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>
But I would like the dialog to conform to the UI theme, confirmDialog component being the best candidate. Alas, I don't know how to use it here. I tried the following and it won't work (simply no confirmation occurres):
<p:ajax event="rowEdit" listener="#{payment.update}">
<p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Any ideas?
I think you can use in this case simple widgetVar and call show() or hide() functions. Here is your modified code:
<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>
I use PF 3.5 and can't find global parameter in p:confirmDialog. May be it is new feature. So I simple deleted it of my code. Here is modified confirmDialog:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" update="#form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Please try and adjust this confirm dialog code! May be unnecessary code for update form or hide()...
EDIT:
If you want to dynamically adjust text message of confirmDialog, you can adjust from server-side. Perhaps it is not best solution. I think the second way is it adjust from client-side by JQuery.
Server-side:
The ajax event is same. It call onRowEdit listener which adjust simple String attribute. For example the bean containt:
String myDialogMessage = "Default message";
//getter and setter
public void onRowEdit(RowEditEvent event) {
myDialogMessage="Are you sure?";
}
and the dialog containt message property:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}">
Client-side:
You can use repleaceWith function of JQuery:
<script>
jQuery("myDialog.p").replaceWith(....
</script>
Of course need to develop more business logic to client-side, more functions. Maybe the server-side solution is faster.
Please try it!
Based on your comment, I edited:
I find this in 4.0 user' guide:
When pencil icon is clicked, row is displayed in editable mode meaning
input facets are displayed and output facets are hidden. Clicking
tick icon only saves that particular row and cancel icon reverts the
changes, both options are implemented with ajax interaction. Another
option for incell editing is cell editing, in this mode a cell
switches to edit mode when it is clicked, losing focus triggers an
ajax event to save the change value.
So ajax event works when row is change. Here is dataTable events which can you catch:
I hope this answer help to you find solution!
I'm implementing some kind of frontend editor in my web page, using rich:editor. When clicking a link, the editor should open, and after saving editor's content, the editor should close again. I'm having trouble with onsave event for closing the editor. Here is my code.
This is the link that opens the editor, due to setting the property bean.show to true. It works ok:
<h:commandLink>
...
<f:setPropertyActionListener value="true" target="#{bean.show}" />
</h:commandLink>
This is the editor itself, only rendered when show evaluates to true:
<h:form>
<rich:editor value="..." onsave="showEditor(false)" rendered="#{bean.show}" />
</h:form>
The onsave event should close the editor by setting the show property to false again, but the editor stays open, because showEditor() is not called:
<a4j:jsFunction name="showEditor">
<a4j:param name="param1" assignTo="#{bean.show}" />
</a4j:jsFunction>
Am I doing something completely wrong? Or do you have any other ideas how to realize this? Any help is appreciated.
just double-checked: in version richfaces 4.x, there is no onsave attribute at all, but
oninit
onblur
onfocus
ondirty
onchange
like pointed out in the org.richfaces.component.UIEditor class. The same is true, if you want to use f:ajax to ajaxify the editor.
Right now, the "save"-icon in the editor just sends a form.submit() or something. So either try to add your jsFunction on that event or to introduce an own save-button.
Edit: Richfaces 4 uses the javascript based CKEditor, so if you want to overwrite their "save"-button, this forum entry regarding CKEditor's save implementation might be of your help.
Also a valueChangeListener might be a possibility solution to trigger your Bean.setShow(boolean show) property.
xhtml:
<rich:editor value="#{bean.editorValue}"
valueChangeListener="#{bean.valueChanged}" />
method in managed bean:
public void valueChanged(ValueChangeEvent e) {
// do the code to close the window here
}
The valueChangeListener also works in Richfaces 4.3, but maybe starting within the javascript of the CKEditor is the better choice.
Hope, that helps... L.
in my page , i'm trying to display a confirmation dialog after clicking a button .In the confirmation dialog i used the attribute message to display it , this message is taken value after clicking the button . So i did it like that :
<p:commandButton value="Delete" update="testPlanetree" id="deleteBtn"
disabled="#{projectTestManagementMB.disable}" oncomplete="deleteConfirmation.show()"
action="#{projectTestManagementMB.testFn}"/>
<p:confirmDialog id="confirmDialog" message="#
{projectTestManagementMB.deleteConfirmationMsg}"
header="Confirming Deleting Process" severity="alert"
widgetVar="deleteConfirmation">
<p:commandButton id="confirm" value="Yes Sure" update="messages"
oncomplete="deleteConfirmation.hide()" />
<p:commandButton id="decline" value="Not Yet"
onclick="deleteConfirmation.hide()" type="button" />
</p:confirmDialog>
ProjectTestManagementMB Managed Bean :
private String deleteConfirmationMsg;//with getters and setters
public void testFn(){
deleteConfirmationMsg="do you want to delete ...";
}
The problem is that the deleteConfirmationMsg never take the value "do you want to delete ..." (is always empty)
Any idea will be appreciated
The <p:confirmDialog> has already generated its HTML representation on the very first HTTP request returning the page with the form and the dialog. It's merely hidden by CSS and is supposed to be shown/hidden by JS. When you change the confirm message afterwards in a bean action method, then it won't be reflected in the generated HTML output as long as you don't ajax-update it.
So, in order to get the changed message being reflected, you'd need to update the HTML representation of the <p:confirmDialog> in the client side before showing it in the oncomplete. You can for this use the update attribute of the command button which should show the dialog.
<p:commandButton ... update="confirmDialog testPlanetree">
try this i should works :
<p:commandButton value="Delete" update="testPlanetree" id="deleteBtn" actionListener="#
{projectTestManagementMB.testFn}"
disabled="# {projectTestManagementMB.disable}"
oncomplete="deleteConfirmation.show()" />