JSF 2.0更新第一次无法工作的primefaces对话框

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. 第一次显示表单时，HTML代码是正确的， #{dialogBean.location}的当前值为空。

Then I click on the link, the HTML code is "wrong". 然后我点击链接，HTML代码是“错误的”。 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. 同时，我检查Ajax调用的返回。 The value of #{dialogBean.location} is still empty. #{dialogBean.location}值仍为空。

<?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. 我再次点击链接，这次#{dialogBean.location}的值被设置为正确的值。

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

Answer 1

Try put the dialog before the commandLink as follows: 尝试将对话框置于commandLink之前，如下所示：

  <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. 另一个简单的解决方案是：如果使用Primefaces 3.0（或更高版本），可以在对话框中添加dymaic属性。将其设置为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. 这是主要的3.2版VDL动态模式允许对话框在显示之前获取内容而不是页面加载，这对减少初始页面加载时间很有用。 Default is false. 默认值为false。

Answer 2

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 . 我在过去几天一直遇到这个问题，在阅读这篇文章之后，我刚刚通过从panelGrid|outputPanel删除'layout="block"'来解决了我的问题。 I have update="pageContentPanel" embedded in my CRUD form pages, and now this AJAX PPR is working better. 我在我的CRUD表单页面中嵌入了update="pageContentPanel" ，现在这个AJAX PPR工作得更好。 I guess AJAX PPR (and PrimeFaces 3.0 M3) works better with span tags more than div tags. 我猜AJAX PPR（和PrimeFaces 3.0 M3）具有更好的作品span标签超过div标签。 :( :(

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

JSF 2.0更新第一次无法工作的primefaces对话框

问题描述

2 个解决方案

解决方案1
4 已采纳 2011-07-26 11:32:25

解决方案2
0 2011-09-15 18:47:30

JSF 2.0更新第一次无法工作的primefaces对话框

问题描述

2 个解决方案

解决方案1 4 已采纳 2011-07-26 11:32:25

解决方案2 0 2011-09-15 18:47:30

解决方案1
4 已采纳 2011-07-26 11:32:25

解决方案2
0 2011-09-15 18:47:30