带有表单中字段的Prime Faces对话框

时间:2018-09-28 19:30:07

标签: java jsf primefaces

我有一个简单创建的表格。我想做的是在单击时显示带有名称(即inputField中的值)的对话框。我意识到对话是在commandButton动作之前发生的,所以我试图弄清楚当时如何获取值:

<h:form id="myForm">
  <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" id="confirmDialog">
    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
  </p:confirmDialog>

  <p:inputField id="field" value="#{myBean.myName}"/>
  <p:commandButton value="Create" update=":myForm" actionListener="#{myBean.sayHi}"> 
    <p:confirm header="Confirmation" message="Is your name actually #{myBean.myName}?" icon="ui-icon-alert" />
  </p:commandButton>
</h:form>

现在,对话框仅显示一个空字符串。我们该怎么做?

使用selectOneMenu之类的东西,我可以添加一个AJAX事件。我真的需要与输入字段类似的东西吗?

1 个答案:

答案 0 :(得分:0)

在确认之前提交值只是为了在confirmDialog中使用就没有意义,因此解决方法是使用commandButton的onclick事件来更改message="Is your name actually #{myBean.myName}?" javascript。

检查此代码,它可以正常工作:

<h:form id="myForm">
  <p:growl id="msg" />
  <p:inputText id="field" value="#{indexBacking.input}" widgetVar="fieldWv"/>

  <p:commandButton id="cmd01" value="Create" onclick="showConfirm();"/>

  <p:confirmDialog showEffect="fade" hideEffect="fade" id="confirmDialog" widgetVar="confirmDialogWv">
    <f:facet name="message">
      <div id="confirmMessage"></div>
    </f:facet>
    <p:commandButton value="Yes" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{indexBacking.sayHi()}" update="@form"/>
    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" onclick="PF('confirmDialogWv').hide();"/>
  </p:confirmDialog>

  <script type="text/javascript"> 
    function showConfirm() {
        PF('confirmDialogWv').show();
        $('#confirmMessage').empty();
        $('#confirmMessage').append("<p>Is your name actually [" + PF('fieldWv').jq.val() + "]?</p>");
      }
   </script>
 </h:form>

请注意,我被迫放弃这种行为,并使用p:confirmDialog作为标准对话框来执行此操作。