Prime faces dialog with fields in the form

Question

I've got a form that is a simply created. What I want to do is show my dialog with the name (ie: the value from the inputField ) on click. I realize the dialog happens BEFORE the action of the commandButton , so I'm trying to figure out how to get what the value is at that moment:

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

Right now the dialog box just shows an empty string. How would we do that?

With something like a selectOneMenu , I could just add an AJAX event. Do I really need something similar with an input field?

Answer 1

There is no point in submitting the value before confirmation just to use it in the confirmDialog so the way to go is to use onclick event of the commandButton to change the message="Is your name actually #{myBean.myName}?" using javascript.

check this code, it works fine:

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

please notice that I was forced to ditch the behavior and to use the p:confirmDialog as a standard dialog to do this.