JSF 2.0 Update a primefaces dialog not working the first time_问答_开发者

I have a simple form that asks the user to input a text. Then when the user clicks the link, a dialog is showed with the value entered by the user. The first issue I have is that the dialog does not show.

The other issue concerns the update. When the form is displayed for the first time, the HTML code is correct and the current value of #{dialogBean.location} is empty.

Then I click on the link, the HTML code is "wrong". That's why I guess it does not show:

<form id="dialogForm" name="dialogForm" method="post" action="/tcmt-component/dialog.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="dialogForm" value="dialogForm">
<input type="hidden" autocomplete="off" value="-6424900608015567042:-9068630845666043913" id="javax.faces.ViewState" name="javax.faces.ViewState"></form>

In the mean time, I check the return of the Ajax call. The value of #{dialogBean.location} is still empty.

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="dialogForm:dialog"><![CDATA[<div id="dialogForm:dialog" style="display:none" title="Dialog">  
        Current Location:

I click again on the link and this time the value of #{dialogBean.location} is set to the correct value.

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="dialogForm:dialog"><![CDATA[<div id="dialogForm:dialog" style="display:none" title="Dialog">  
        Current Location: MyLocation

The Bean:

@ManagedBean
@SessionScoped
public class DialogBean implements Serializable {

    private String location;

    public void setLocation(String location) {
        this.location = location;
    }

    public String getLocation() {
        return location;
    }

}

The View:

<?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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">

  <h:head> 
  </h:head>
    <h:body>
        <h:form id="initForm">

        <h:inputText id="location" value="#{dialogBean.location}" />
        <p:commandLink update="dialogForm:dialog" onclick="dlg.show()">  
            <h:outputText value="Show Dialog" />  
        </p:commandLink>

        </h:form>  

        <h:form id="dialogForm">
        <p:dialog id="dialog" header="Dialog" widgetVar="dlg" resizable="false">  
        Current Location: <h:outputText value="#{dialogBean.location}" />
        <p:commandButton value="Close" oncomplete="dlg.hide();"/>
        </p:dialog>
        </h:form>  
    </h:body>
</html>

SOLUTION

It seems that it's a primefaces issue updating a dialog. Instead I wrapped the dialog inside a pan开发者_C百科el and the update works:

<p:dialog header="Dialog" widgetVar="dlg" resizable="false">  
<p:outputPanel id="dialogPanel">
Current Location: <h:outputText value="#{dialogBean.location}" />
    <h:form id="dialogForm">
<p:commandButton value="Close" oncomplete="dlg.hide();"/>
</h:form>  
</p:outputPanel>
</p:dialog>

<h:form id="initForm">
<h:inputText id="location" value="#{dialogBean.location}" />
<p:commandLink update="dialogPanel" onclick="dlg.show()">  
    <h:outputText value="Show Dialog" />  
</p:commandLink>
</h:form>

Try put the dialog before the commandLink as follows:

  <p:outputPanel id="panel">
       <h:form id="dialogForm">
           <p:dialog id="dialog" header="Dialog" widgetVar="dlg" resizable="false">  
           Current Location: <h:outputText value="#{dialogBean.location}" />
           <p:commandButton value="Close" oncomplete="dlg.hide();"/>
           </p:dialog>
       </h:form>  
 </p:outputPanel>
     <h:form id="initForm">
    <h:inputText id="location" value="#{dialogBean.location}" />
    <p:commandLink update="dialogForm:dialog" onclick="dlg.show()" update="panel">  
        <h:outputText value="Show Dialog" />  
    </p:commandLink>
    </h:form>

Another easy solution is : If you use the Primefaces 3.0(or above) you can add dymaic attribute to the dialog .set it to true. Here is the primefaces 3.2's VDL Dynamic mode allows dialog to fetch it's contents before it's shown rather than on page load which is useful to reduce initial page load times. Default is false.

I've been having this problem for the last few days, after reading this post, I just solved my problem by removing the 'layout="block"' from my panelGrid|outputPanel. I have update="pageContentPanel" embedded in my CRUD form pages, and now this AJAX PPR is working better. I guess AJAX PPR (and PrimeFaces 3.0 M3) works better with span tags more than div tags. :(

    <ui:define name="pageContent">

        <p:outputPanel id="pageContentPanel">

            <p:outputPanel layout="block" rendered="#{pageNavigationController.isPageSelected('/pageContent_blank.xhtml')}">
                <ui:include src="/pageContent_blank.xhtml"/>
            </p:outputPanel>

            <p:outputPanel layout="block" rendered="#{pageNavigationController.isPageSelected('/service/pf_Add.xhtml')}">
                <ui:include src="/service/pf_Add.xhtml"/>
            </p:outputPanel>

            <p:outputPanel layout="block" rendered="#{pageNavigationController.isPageSelected('/service/pf_Browse.xhtml')}">
                <ui:include src="/service/pf_Browse.xhtml"/>
            </p:outputPanel>

            <p:outputPanel layout="block" rendered="#{pageNavigationController.isPageSelected('/service/pf_Edit.xhtml')}">
                <ui:include src="/service/pf_Edit.xhtml"/>
            </p:outputPanel>

            <p:outputPanel layout="block" rendered="#{pageNavigationController.isPageSelected('/service/pf_View.xhtml')}">
                <ui:include src="/service/pf_View.xhtml"/>
            </p:outputPanel>

        </p:outputPanel>

    </ui:define>