Prepopulate the Contents of Modal Dialog

UI Components for JSF
Post Reply
dave.everson
Posts: 23
Joined: 23 Sep 2009, 21:52

31 Jan 2010, 00:36

Hello,

We are in the process of migrating from RichFaces to PrimeFaces.

One of the challenges we are currently facing is the prepopulating the contents of a modal dialog in a dynamic fashion.

We have a modal panel for editing account information. This modal panel is called from various places throughout our application. The modal panel has a backing bean that includes all the business logic and responsible for the loading of the data to display in the modal panel. When invoking a modal panel, we also pass an id that the backing bean uses to load the content from the database to be presented in the modal panel.

We came up with the following code that properly sets the key and loads the data properly within the backing bean

Code: Select all

<h:form prependId="false">
    <p:remoteCommand name="setAccountId">  
         <f:setPropertyActionListener value="#{clientDashboard.selectedAccount.id}" target="#{manageAccount.accountId}" />  
     </p:remoteCommand> 
     <p:commandButton value="Edit Account Profile" 
							onclick="setAccountId();"
							actionListener="#{manageAccount.loadAccount}"
							oncomplete="AccountWidget.show()">
      </p:commandButton>
</h:form>
The issue we are having is when the modal dialog is displayed, non of the data that was loaded in the backing bean.

We tried adding an update attribute to the commandButton tag above setting the value to the id of the entire modal dialog or a panel within the modal dialog. In neither case did the modal panel display the dynamically loaded data.

In Richfaces, we could do the following:

Code: Select all

<a4j:commandLink  ajaxSingle="true" oncomplete="Richfaces.showModalPanel('editAnnouncementModalPanel', {width:700, top:200});" reRender="editAnnouncementPanel">
   <f:setPropertyActionListener target="#{editAnnouncement.announcementId}" value="#{i.id}"/>
   edit<br/>
</a4j:commandLink>
I tried adding the setPropertyActionListener within the commandButton tag, but it was always executed AFTER the actionListener attached to the commandButton. The actionListener requires the id to be present to load the data.

What's the best practice for accomplishing this use case with PrimeFaces?

Thanks!
Dave
Environment: JBoss 4.2.1.GA, Seam 2.1.1.GA, Facelets, RichFaces 3.3.3
Hudson-Build-Number: 29
Hudson-Project: PrimeFaces UI Components 1.2

dave.everson
Posts: 23
Joined: 23 Sep 2009, 21:52

31 Jan 2010, 01:38

We have found that if we use the "update" attribute on the remoteCommand tag and call the method to load the data in remoteCommand, the dynamic data is rendered in the modal dialog.

It works, but is this the best practice?
Environment: JBoss 4.2.1.GA, Seam 2.1.1.GA, Facelets, RichFaces 3.3.3
Hudson-Build-Number: 29
Hudson-Project: PrimeFaces UI Components 1.2

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Feb 2010, 12:00

Not sure if remoteCommand is really necessary here, p:commandButton should just work like;

Code: Select all

<h:form>
     <p:commandButton value="Edit Account Profile"
                     action="#{manageAccount.loadAccount}"
                     oncomplete="AccountWidget.show()">
          <f:setPropertyActionListener value="#{clientDashboard.selectedAccount.id}" target="#{manageAccount.accountId}" /> 
      </p:commandButton>
</h:form>
Try action instead of actionListener, actions are guaranteed to be processed after actionListeners. Also you need to return null as action doesn't cause navigation in this case.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests