JSF 2.0 Update a primefaces dialog not working the first time

Question

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 panel 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>

FishGel · Accepted Answer

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.

JSF 2.0 Update a primefaces dialog not working the first time

Tags:

jsf

jsf-2

primefaces

Sydney

1 Answers

FishGel

Recent Activity

Donate For Us

JSF 2.0 Update a primefaces dialog not working the first time

Tags:

jsf

jsf-2

primefaces

Sydney

1 Answers

FishGel

Related questions

Recent Activity

Donate For Us