Forum:

Updating a form in primefaces when a selection is made in the datatable

Greenhorn

Posts: 20

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have a prime panel to display employee information and a datatable next to it, the datatable is getting populated and I am tyring to update the panel with that employee information when a row is selected. I am using dataTable and onRowSelect is getting the information that I want from the Backing bean but I can never get the inputtext fields to populate???
This is the page:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/composite">

<h:head>
        <title>Add Employee</title>
    </h:head>
    <h:body>
        <ui:composition template="./WEB-INF/templates/mainTableTemplate.xhtml">

<ui:define name="top">
                top
            </ui:define>

<ui:define name="left">
                <p:menu type="sliding" maxHeight="125">
                    <p:submenu label="Employees">
                        <p:menuitem value="Add" url="./addEmployee.xhtml" icon="ui-icon ui-icon-home"/>
                        <p:menuitem value="Edit" url="./editEmployee.xhtml" />
                        <p:menuitem value="View" url="./viewEmployees.xhtml" />
                    </p:submenu>

<p:submenu label="Schedule">

<p:menuitem value="View" url="./faces/viewSchedule.xhtml" />
                    </p:submenu>

</p:menu>

</ui:define>

<ui:define name="content">
                <h:form>
                    <p:growl id="growl" showDetail="true" />
                    <p:panel header="Employee Information" widgetVar="employeePanel">
                        
                        <h:panelGrid columns="4" id="lastNamePanel">

<h:outputText value="Last Name: *" />
                            <p:inputText value="#{listEmployeeBean.selectedEmployee.lastName}" required="true" label="last" id="last"/>

<h:outputText value="First Name: *" />
                            <p:inputText value="#{listEmployeeBean.selectedEmployee.firstName}" required="true" label="First Name"/>

<h:outputText value="Email: *" />
                            <p:inputText value="#{employeeBean.emailAddress}" required="true" label="Email Address"/>

<h:outputText value="Password: *" />
                            <p:password value="#{employeeBean.password}" feedback="true" required="true" label="Password" minLength="6" />
                        </h:panelGrid>
                        <HR></HR>
                        <h:panelGrid columns="4">
                            <h:outputText value="SSN: *" />
                            <p:inputMask value="#{employeeBean.ssn}" required="false" label="Social Security Number" mask="999-99-9999"/>

<h:outputText value="DOB: *" />
                            <p:calendar value="#{employeeBean.dob}" navigator="true" required="true" label="Date Of Birth" yearRange="1909" />

<h:outputText value="Hire Date: *" />
                            <p:calendar value="#{employeeBean.hireDate}" required="true" label="Hire Date"/>

<h:outputText value="Term Date: *" />
                            <p:calendar value="#{employeeBean.termDate}" required="false" label="Term Date"/>
                        </h:panelGrid>
                        <h:panelGrid columns="2">

<h:outputText value="Hours In Work Week: *" />
                            <p:inputText value="#{employeeBean.workHoursPerWeek}" required="true" label="Work Hours Per Week" size="5"/>

</h:panelGrid>
                        <HR></HR>
                       <h:panelGrid columns="4">
                            <h:outputText value="Phone 1: *" />
                            <p:inputMask value="#{employeeBean.phone1}" required="true" label="Phone 1" mask="(999)-999-9999"/>

<h:outputText value="Phone 2: *" />
                            <p:inputMask value="#{employeeBean.phone2}" required="false" label="Phone 2" mask="(999)-999-9999"/>

<h:outputText value="Cell Phone: *" />
                            <p:inputMask value="#{employeeBean.cellPhone}" required="false" label="Cell Phone" mask="(999)-999-9999"/>

</h:panelGrid>
                        <HR></HR>
                        <h:panelGrid columns="2">
                            <h:outputText value="Address 1: * " />
                            <p:inputText value="#{employeeBean.address1}" required="true" label="Address1" size="56"/>
                            <h:outputText value="Address 2: * " />
                            <p:inputText value="#{employeeBean.address2}" required="true" label="Address2" size="56"/>
                        </h:panelGrid>

<h:panelGrid columns="4">
                            <h:outputText value="City: *" />
                            <p:inputText value="#{employeeBean.city}" required="true" label="City"/>

<h:outputText value="State: *" />
                            <p:inputText value="#{employeeBean.state}" required="true" label="State" size="3"/>
                            <h:outputText value="Zip Code: *" />
                            <p:inputText value="#{employeeBean.zipCode}" required="true" label="Zipcode"/>

<h:outputText value="" />
                            <h:outputText value="" />

</h:panelGrid>

<f:facet name="complete">
                                    <h:outputText value="" />
                                </f:facet>
                            </p:ajaxStatus-->
                        </h:panelGrid>
                    </p:panel>

</h:form>
            </ui:define>

<ui:define name="right">
                <h:form>
                    <p:dataTable var="employee" value="#{listEmployeeBean.employees}" paginator="true" rows="10"
                             selection="#{listEmployeeBean.selectedEmployee}" selectionMode="single"
                             rowSelectListener="#{listEmployeeBean.onRowSelect}"
                             
                             id="employeeInfo"
                             onRowSelectUpdate="lastNamePanel"
                             dblClickSelect="false">

<f:facet name="header">
                        Select a row to see the employee detail
                    </f:facet>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Last Name"/>
                        </f:facet>
                        <h:outputText value="#{employee.lastName}"/>
                    </p:column>

<p:column>
                        <f:facet name="header">
                            <h:outputText value="First Name"/>
                        </f:facet>
                        <h:outputText value="#{employee.firstName}"/>
                    </p:column>
                    </p:dataTable>
                </h:form>
                
            </ui:define>

<ui:define name="bottom">
                bottom
            </ui:define>

</ui:composition>
    </h:body>
</html>

And this is my backing bean:

Brendan Healey

Ranch Hand

Posts: 218

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

About 10 times a week I see someone on here or somewhere else who have multiple forms on a single
page and every time they're in trouble.

Use one form with prependId="false" and everything will start to become a lot simpler. Read up about
naming containers also.

Brendan.

David Norris

Greenhorn

Posts: 3

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Right and never mind separating concerns like putting parameters and returned data in separate forms.
While we're at it lets get rid of templates too. Just put everything in one page.

Why should primeFaces force me to stuff everything into one form? If it would not break this feature then maybe you wouldn't see this 10 times a week. It's not our fault PF breaks it.

Other frameworks work perfectly with multiple forms.

Brendan Healey

Ranch Hand

Posts: 218

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi David, my response was probably a little unhelpful, although I was genuinely trying to assist. I
stand by my original comment in that the use of multiple forms, whilst permissible (when not nested)
tends to cause more problems than it solves. I think it unlikely that PrimeFaces is causing the
problems you're experiencing, although there are some idiosynchracies related to referring to
component ids from within a p:datatable (i.e. you have to use form:compid when you otherwise
wouldn't need to). If you are still experiencing problems perhaps we could try and narrow down the
problem with a minimalist code structure?

Regards,
Brendan.

sardar waqas ahmed

Greenhorn

Posts: 16

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

please tell me i have two form and cant update the command button whic is disable in form 2.i try alot but cant find a solution my code is below.

<h:form id="FamilyInfo">

<h:panelGrid columns="6" cellpadding="7" cellspacing="2"
id="grid3" columnClasses="a,b,c,d"
rowClasses="plainRow,shadedRow">

<h:outputLabel value="Marital Status : " class="field-title" />
<p:selectOneMenu required="true" id="maritalstatus"
value="#{personalInfoBean.maritialStatusPerson}">
<f:selectItem itemLabel="Select Maritial Status"></f:selectItem>
<f:selectItem itemLabel="Single" itemValue="Single" />
<f:selectItem itemLabel="Married" itemValue="Married" />
<f:selectItem itemLabel="Widower" itemValue="Widower" />
<f:selectItem itemLabel="Divorce" itemValue="Divorce" />

<p:ajax event="blur" update="msg36" />
<p:ajax event="change" update="childaddbtn"
listener="#{personalInfoBean.handleStatusChange}" />
</p:selectOneMenu>

<p:message for="maritalstatus" id="msg36" display="icon" />
<h:outputLabel value=" " class="field-title" />
<h:outputLabel value=" " class="field-title" />
<h:outputLabel value=" " class="field-title" />

<h:outputLabel value="Name next of Kin : " class="field-title" />
<p:inputText
value="#{personalInfoBean.hrNextOfKin.nameNextOfKin}"
required="true" id="nok">
<p:ajax event="blur" update="msg37" />
<f:validateLength minimum="3" maximum="15"></f:validateLength>
</p:inputText>
<p:message for="nok" id="msg37" display="icon" />
<h:commandButton value="Save" action="#personalInfoBean.saveHrNOK}" class="defaultButton" />

</h:form>

<h:form id="nokChildForm">

<p:dialog header="Children" widgetVar="dlgchild" id="childDlg">

<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Name : " />
<p:inputText value="#{personalInfoBean.nokChild.childrenName}"
required="true" id="chlname">
<p:ajax event="blur" update="msgchld" />
<f:validateLength minimum="3" maximum="25"></f:validateLength>
</p:inputText>
<p:message for="chlname" id="msgchld" display="icon" />

<h:outputLabel value="Gender :" />
<p:selectOneMenu id="chldgender" required="true"
value="#{personalInfoBean.nokChild.childrenGender}">
<f:selectItem itemLabel="Select Gender" itemValue="" />
<f:selectItem itemLabel="Male" itemValue="Male" />
<f:selectItem itemLabel="Female" itemValue="Female" />
<p:ajax event="blur" update="msgchldGnd" />
</p:selectOneMenu>
<p:message for="chldgender" id="msgchldGnd" display="icon" />

<h:outputLabel value="Age :" />
<p:inputText value="#{personalInfoBean.nokChild.childrenAge}"
required="true" id="chldage">
<p:ajax event="blur" update="msgchldage" />
<f:validateLength minimum="1" maximum="3"></f:validateLength>
</p:inputText>
<p:message for="chldage" id="msgchldage" display="icon" />

<f:facet name="footer">
<p:commandButton value="Save" update="nokChildList"
oncomplete="handleAddChildrenRequest(xhr, status, args)"
actionListener="#{personalInfoBean.setNOKChild}" />
</f:facet>
</h:panelGrid>

<div style="padding-left: 950px; padding-top: 28px">

<p:commandButton disabled="#{personalInfoBean.addButtonChildren}" value="Add Children" id="childaddbtn" onclick="dlgchild.show()"/></div>

<h:commandButton value="Save" action="#{personalInfoBean.saveHrNOK}" class="defaultButton" />

</h:form>

when i change dropdown of from one the button on second form should be enabled by default that button is disabled how i do it.this button is not getting enabled when i change the dropdown
<p:commandButton disabled="#{personalInfoBean.addButtonChildren}" value="Add Children" id="childaddbtn" onclick="dlgchild.show()"/>

Ruz Li

Greenhorn

Posts: 10

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Stuff everything in one big form is a bad idea. And also you should avoid using prependId="false". It is abandoned.

Brendan Healey wrote:
About 10 times a week I see someone on here or somewhere else who have multiple forms on a single
page and every time they're in trouble.

Use one form with prependId="false" and everything will start to become a lot simpler. Read up about
naming containers also.

Brendan.

SCJP, SCWCD

Tim Holloway

Saloon Keeper

Posts: 27489

195

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You don't really "update" a form, you submit it. The updating can be done to any region up to and including the entire page (which is the default, unless you use AJAX).

Use a form to contain the greatest common denominator of all the control values that you wish to submit (and thus validate) in a single request. Use AJAX if you need to sub-divide the form into partial form requests. There are definitely times when multiple forms on a page are useful, such as cases where the main input source is a data table display and associated controls but you want to have an independent "search" request that works without the overhead of uploading all the main form control values or being dependent on all of those values being valid (since even one invalid control value will cause the entire request to be rejected).

The AJAX "render=" attribute is used to indicate what region(s) of the page to re-render after the submit is processed. Regions, as I said, can be anything renderable. Single controls, dataTables, panelGrids, and so forth.

The secret of how to be miserable is to constantly expect things are going to happen the way that they are "supposed" to happen.

You can have faith, which carries the understanding that you may be disappointed. Then there's being a willfully-blind idiot, which virtually guarantees it.

Ruz Li

Greenhorn

Posts: 10

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I agree that we can use AJAX to submit part of a big "god form". I am just afraid that if the form is too big, then we are immersed in complicated Ajax process. On the other hand, can we just process sever forms using AJAX, for example, in primefaces use process=":form1 :form2 :form3"? or just @all?

Tim Holloway wrote:You don't really "update" a form, you submit it. The updating can be done to any region up to and including the entire page (which is the default, unless you use AJAX).

Use a form to contain the greatest common denominator of all the control values that you wish to submit (and thus validate) in a single request. Use AJAX if you need to sub-divide the form into partial form requests. There are definitely times when multiple forms on a page are useful, such as cases where the main input source is a data table display and associated controls but you want to have an independent "search" request that works without the overhead of uploading all the main form control values or being dependent on all of those values being valid (since even one invalid control value will cause the entire request to be rejected).

The AJAX "render=" attribute is used to indicate what region(s) of the page to re-render after the submit is processed. Regions, as I said, can be anything renderable. Single controls, dataTables, panelGrids, and so forth.

SCJP, SCWCD

Tim Holloway

Saloon Keeper

Posts: 27489

195

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

JSF is based on HTML and HTML has a fundamental limitation that exactly one and only one form can be submitted per request.

Don't worry about the form being too big. JSF uses POST, and that means that in effect the form data being uploaded looks like this:

Not much overhead there. Yes, the server can be set up to restrict how many bytes of data are acceptable, but these days, that would be a form so complex that the users would gouge their eyeballs out just trying to read it.

AJAX can be used to restrict the uploaded data from that form to a small subset, which minimizes overhead.

Ruz Li

Greenhorn

Posts: 10

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I got suggestion from webpage. I know we can only submit one form each time. But what happens if we use process="@all" on a page with several forms? Should it bind all the values for us?

Tim Holloway wrote:JSF is based on HTML and HTML has a fundamental limitation that exactly one and only one form can be submitted per request.

Don't worry about the form being too big. JSF uses POST, and that means that in effect the form data being uploaded looks like this:
name1 value1 name2 value2 name3 value3 ...
Not much overhead there. Yes, the server can be set up to restrict how many bytes of data are acceptable, but these days, that would be a form so complex that the users would gouge their eyeballs out just trying to read it.

AJAX can be used to restrict the uploaded data from that form to a small subset, which minimizes overhead.

SCJP, SCWCD

Tim Holloway

Saloon Keeper

Posts: 27489

195

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Unfortunately, I haven't been able to work with the f:ajax tag. I have a significant investment in RichFaces 3, which doesn't support it and conversion to RichFaces 4 is not trivial :censored:

AJAX basically synthesizes a form dynamically, and if I read the docs correctly, the "@all" option essentially assembles a mega-form containing every control on the page :eek:

In theory, you could also supply the IDs of selected forms and that would work, too - constructing the mega-form from a union of the referenced forms, but there's no explicit illustration of that in the javadocs.

Try it and let us know! :)

And tomorrow is the circus! We can go to the circus! I love the circus! We can take this tiny ad:

a bit of art, as a gift, the permaculture playing cards

https://gardener-gift.com