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>