primefaces blockui does not hide - jsf

I have a dialog that is shown for user input.
This dialog has some validations and when the validation fails the blockui goes away.
This works well on my laptop with everything on it.
But when I deploy the war file onto the remote server and test it my blockui does not "unblock" after validation error. I get my growl message stating which field is wrong and the growl goes away but the blockui keeps blocking my dialog. Not allowing the user to correct the input.
<p:commandButton id="bttAddUser" value="Submit" update=":contentView:lstUsers :growl" oncomplete="handleSubmitRequest(xhr, status, args, 'newUserDialog','newUserForm');" actionListener="#{userController.create}">
<p:blockUI id="addBlockUI" trigger="bttAddUser" block="newUserGrid"></p:blockUI>
</p:commandButton>
Both systems, my laptop and remote server have glassfish 3.1.2.2. I was trying to figure out if there is a way of doing this and force the unblock of the ui.
Any ideas?
EDIT:
So it seems that is not a network problem but something else:
I'm actually getting an error:
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
My dialog:
<h:form id="newUserForm">
<p:panelGrid id="newUserGrid" columns="2">
<h:outputText value="Email : " ></h:outputText>
<p:inputText value="#{userController.newUser.email}" required="true" requiredMessage="Please the email of the user" validatorMessage="Email is invalid" >
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</p:inputText>
<h:outputText value="Name : " ></h:outputText>
<p:inputText value="#{userController.newUser.name}" required="true" requiredMessage="Please the name of the user" ></p:inputText>
<h:outputText value="Role"></h:outputText>
<p:selectOneMenu id="newUserRole" required="true" value="#{userController.newUser.roleid}" requiredMessage="A role must be chosen">
<f:selectItems value="#{userController.listRoles}" var="_role" itemValue="#{_role}" itemLabel="#{_role.roleid}"></f:selectItems>
<f:converter converterId="misc.util.RoleConverter"></f:converter>
</p:selectOneMenu>
<h:outputText value="TimeZone"></h:outputText>
<p:selectOneMenu id="newUserTz" required="true" value="#{userController.newUser.tzone}" requiredMessage="TimeZone must be specified">
<f:selectItems value="#{userController.listTimeZone}" var="_tz" itemValue="#{_tz}" itemLabel="#{_tz}"> </f:selectItems>
</p:selectOneMenu>
<h:outputText value="Password"></h:outputText>
<p:password value="#{userController.newUser.password}" required="true" requiredMessage="Define a password"></p:password>
<f:facet name="footer">
<p:commandButton id="bttAddUser" value="Submit" update=":contentView:lstUsers :growl" oncomplete="handleSubmitRequest(xhr, status, args, 'newUserDialog','newUserForm');" actionListener="#{userController.create}">
</p:commandButton>
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
<p:blockUI id="addBlockUI" trigger="bttAddUser" block="newUserGrid" widgetVar="blockUI"></p:blockUI>
</p:panelGrid>
</h:form>
I get the error on Solaris but not in Windows. Both have glassfish 3.1.2.2 build 5.

Finally fixed this.
I had two primefaces jars in my WebApp:
One in domain/lib and the other one under WEB-INF/lib.
It seems that when using some functions of primefaces, it would return more than it should.
Post in Primefaces Forums

Related

Managing Required=true in JSF [duplicate]

This question already has an answer here:
Temporarily disable JSF validations
(1 answer)
Closed 6 years ago.
I have two panelgrids in my page.
In the first panel grid I have two input text with a button. This
button should valid only this input text.
In the second panelgrid i have 3 input text with a button which
should validate these 3 text only.
How can I ensure that on button click in thr first panelgrid , the
required=true gets ignored for all elements in the second panel grid.
Any help would be appreciated.
If you are using Primefaces you can use partial submit.
For your example:
<h:form>
<p:panelGrid id="grid1">
<p:inputText required="true" id="inp1" value="#{test.value1}"/>
<p:inputText required="true" id="inp2" value="#{test.value2}"/>
<p:commandButton partialSubmit="true" process="#this inp1 inp2" action="#{test.someAction()}" value="validation" update="grid1"/>
</p:panelGrid>
<p:panelGrid id="grid2">
<p:inputText required="true" id="inp3" value="#{test.value3}"/>
<p:inputText required="true" id="inp4" value="#{test.value4}"/>
<p:inputText required="true" id="inp5" value="#{test.value5}"/>
<p:commandButton partialSubmit="true" process="#this inp3 inp4 inp5" action="#{test.someAction()}" value="validation" update="grid2"/>
</p:panelGrid>
</h:form>
Or you can palce grids with buttons in separate forms. Beacuse by default ajax request posts (and validates) values only from current form.
<h:form>
<p:panelGrid id="grid1">
<p:inputText required="true" id="inp1" value="#{test.value1}"/>
<p:inputText required="true" id="inp2" value="#{test.value2}"/>
<p:commandButton action="#{test.someAction()}" value="validation" update="#form"/>
</p:panelGrid>
</h:form>
<h:form>
<p:panelGrid>
<p:inputText required="true" id="inp3" value="#{test.value3}"/>
<p:inputText required="true" id="inp4" value="#{test.value4}"/>
<p:inputText required="true" id="inp5" value="#{test.value5}"/>
<p:commandButton action="#{test.someAction()}" value="validation" update="#form"/>
</p:panelGrid>
</h:form>

p:ajax not updating p:inputText

I am unable to update a <p:inputText> based on the value entered in another <p:inputText> using <p:ajax>. I am using JSF 2 with PrimeFaces 5. The second <p:inputText> is not updating, the listener associated with <p:ajax> is being called and i am getting the correct values in the listener but its not updated on the view.
the view code is:
<p:dialog id="newStdDlg" header="Add new Student" widgetVar="newStdDlg" modal="true">
<h:panelGrid id="newStdDlgPanel" columns="2" cellpadding="5" style="width:100%;">
<p:outputLabel value="First Name *" />
<p:inputText id="studentfname" value="#{addStudentBean.student.firstName}">
<p:ajax event="change" update="studentUsrname" listener="#{addStudentBean.firstNameChange}" />
</p:inputText>
<p:outputLabel value="Last Name *" />
<p:inputText value="#{addStudentBean.student.lastName}"/>
<p:outputLabel value="Father's Name *" />
<p:inputText value="#{addStudentBean.student.fatherName}"/>
<p:outputLabel id="uLbl" value="Username (System Generated) *" />
<p:inputText id="studentUsrname" value="#{addStudentBean.student.user.username}" />
<p:outputLabel value="This temporary password would be mailed to user: " />
<p:outputLabel id="stdpassword" value="#{addStudentBean.student.user.password}"/>
</h:panelGrid>
<p:commandButton value="Create Student"
actionListener="#{addStudentBean.addNewStudentAction}"
style="margin-left:auto;margin-right:auto;display:block;"/>
</p:dialog>
and the listener of the session scoped managed bean is :
public void firstNameChange() {
System.out.println("In AddStudentBean().firstNameChange()..........");
System.out.println("The value of student.getFirstName: "+student.getFirstName());
System.out.println("updating system generated username as: "+student.getFirstName()+String.valueOf(new UserDAO().getUserCount()+1));
student.getUser().setUsername(student.getFirstName()+String.valueOf(new UserDAO().getUserCount()+1));
student.getUser().setPassword(KaaloUtils.getPassword());
}
Like Jaqen mentioned in comments the comments use h:form inside dialog.
If you want to update the component from ManagedBean you can do that by using org.primefaces.RequestContext's update method.
RequestContext.getCurrentInstance().update("COMPONENT_ID_TO_UPDATE")
If you feel like this method is too Cohesive, you can update from Facelet only, make sure remember to not place p:dialog in a h:from instead use h:form inside p:dialog .

Validator is called but error message is not displayed

when i click on the command button. validate method is getting called but the error message is not getting displayed..
here is my code..
<h:form id="form">
<h:body>
<p:panel style="width:500px">
<h:outputLabel for="year" value="Select Year: *" style="font-weight:bold" />
<p:selectOneMenu id="year" value="#{leaveBean.year}">
<f:selectItem itemLabel="Select One" itemValue="null" />
<f:selectItems value="#{leaveBean.yearDTO}" var="currentUser" itemValue="#{currentUser.name}" itemLabel="#{currentUser.name}" />
<f:validator validatorId="LeaveCardValidator" />
</p:selectOneMenu>
</p:panel>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails" id="button"/>
<h:message for="year" style="color:red"/>
You seem to expect that JSF auto-updates the <h:message> on every ajax request. This is untrue. Perhaps you're confusing with PrimeFaces <p:messages> or <p:growl> which have each an autoUpdate attribute which enables you to tell them to auto-update themselves on every ajax request.
You really need to make sure that the <h:message> is covered by the ajax update. Just give it an ID
<h:message id="yearMessage" ... />
and include it in the client ID collection of the ajax update
<p:commandButton ... update="updateList updateDetails yearMessage" />
An alternative would be to replace <h:message> by <p:messages autoUpdate="true">.
Not sure where are the updateList and updateDetails are located but in the example give above you should use update="#form" instead or in addtion like this:
update="updateList updateDetails #form"
so that the form will be rendered again...
just use one of these :
update the whole form in order to update the content of
<h:message />
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="#form" id="button"/>
or give the <h:message /> an id and id this id to the <p:commandButton/>
<h:message id="msg" for="year" style="color:red"/>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails,msg" id="button"/>

How to only show dialog after successfully validated text field

So I have form with 1 fields that need to be required
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form" onclick="displayDlg.show();"/>
</h:form>
<p:dialog header="Dialog" widgetVar="displayDlg" id="dialog">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
So when I click button Test, and not having anything inside the text-box, then an error message pop out.
I want that if the validation process success, then I want to display a dialog box that display name that you just type in. But if validation fail, then dont diplay the dialog. And I have a hard time making this happen. I try to put the dialog inside or outside the dialog, but no work. Please give me some advice
You could make use of the visible attribute of <p:dialog> and ajax-update the whole dialog.
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form :dialog" />
</h:form>
<p:dialog id="dialog" header="Dialog" visible="#{not empty displayName.name}">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
Additional benefit of having :dialog in the update is that it will update the entered name as well everytime you change it.

How to submit values in a pop-up panel?

I have bean struggling to understand how to use the rich:popupPanel component in the right way. There are (at least not that I could find) few post about how to use the rich:popupPanel and how to submit values from it.
To make matter worse the panel seams to add (when checking the html) a hard coded "_content" to its component id name (to the div generated). I have tried to use aj4:region tag to partial render the complete form. But that didn't seamed to work, cause nothing where posted to managed bean. So now I have one option left, where the panel has its own form, outside the main one on the page.
I can see that the evaluation of the form (popup) values is happening, but not the execution of the bean function that persist the values (I see the POST request of the command button). The only reason I can think of at the moment, is that the pop-up panel use another bean to persist the values that the main form on the page (both of them are session scoped).
I am thinking of omit the pop-up panel all together, since it seams so hard to make this work. Maybe its a well know secret, since it so few post about it. It behaves the same if if use componentController or only a a4j:commanLink.
How is it possible to submit values from a rich:popupPanel and invoke a backing bean function to persist the pop-up form values ?
Appreciate if someone can shed some light on this, greetings Chris.
I use Richfaces 4.0-final on Glassfish 3.1
<h:form id="main_form">
<!-- Command for popup -->
<a4j:commandLink actionListener="#{userController.prepareCreateSysRequest}" oncomplete="#{rich:component('popup_sys_user_req_form:popup_sys_user_req')}.show(); return false;"
execute="#this" value="Request New Sector/Category" />
...
<a4j:commandButton action="#{projectController.Create}" ...>
</h:form>
<h:form id="popup_sys_user_req_form">
<rich:popupPanel id="popup_sys_user_req" modal="true" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="New Project Request" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysRequestType}" required="true" requiredMessage="Request Type is required" title="Request Type">
<f:selectItems value="#{userController.getSysRequestTypeItems()}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest}" onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;" execute="#form" render="popup_sys_user_req_form" value="Send Request" />
</rich:popupPanel>
</h:form>
For what I have done I used to have the issue to got to submit twice only the first time.
To fix it the form got to be outside the popupPane. And also that the popupPanel should have the attibute domElementAttachment="form".
Example.
<h:form>
<rich:popupPanel id="shipmentItemUpdateDialog"
autosized="true"
domElementAttachment="form">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{shipmentBundle.shipmentItemDetailsHeader}" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:commandLink>
<h:graphicImage value="/core/images/modal/close.png"/>
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</f:facet>
<h:outputText for="shipmentItemName"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemName}"
/>
<h:inputText id="shipmentItemName"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.name}"
label="#{shipmentBundle.shipmentItemName}"
size="40" >
</h:inputText>
<h:outputText for="shipmentItemCode"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemCode}"
/>
<h:inputText id="shipmentItemCode"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.code}"
label="#{shipmentBundle.shipmentItemCode}"
size="40" >
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemAmount}"
/>
<h:inputText id="shipmentItemAmount"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.amount}"
label="#{shipmentBundle.shipmentItemAmount}"
size="4" >
<f:validateLongRange minimum="1"/>
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:selectBooleanCheckbox id="shipmentItemNeedsCooling"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.needsCooling}"
label="#{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:outputText for="shipmentItemDetails"
value="#{shipmentBundle.shipmentItemDetails}"
/>
<h:inputTextarea id="shipmentItemDetails"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.details}"
label="#{shipmentBundle.shipmentItemDetails}"
cols="38"
rows="5"
/>
</h:panelGrid>
<h:panelGrid columns="1" dir="LTR">
<h:panelGrid columns="2" dir="LTR">
<a4j:commandButton value="#{coreBundle.acceptButton}"
action="#{shipmentItemController.onUpdate()}"
render="shipmentItemsTable">
</a4j:commandButton>
<h:commandLink value="#{coreBundle.closeLink}"
immediate="true">
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</h:panelGrid>
<h:outputText value="#{coreBundle.requiredText}"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
I hope this helps.
I think you got it right.. think of the pop-up as a regular page. To submit and close the pop-up, do something like this:
<a4j:commandButton value="Save" onclick="#{rich:component('panelId}.hide();" render="..."/>
Hope this helps..

Resources