http://primefaces.prime.com.tr/forum/vi ... 272#p27272
I have another related question.
How can I display a p:dialog component from a dynamically created h:comandButton inside a form?
Here is what I need to do;
1) Create a standard jsf h:commandButton dynamically from within a session bean - I can do that.
2) When that button is pushed, cause a composite component containing a p:dialog component to display that dialog - here is where I have problems.
My initial pass was to set the visibility property of the p:dialog in the action listener of the dynamic h:commandButton on the page.
That works, but I was told that was not proper in the above referenced link.
My next idea was to set the onClick property of the dynamic h:commandButton to "show" the dialog - like the examples in the showcase.
This ALMOST works. What happens is the dialog will display for a second and then it goes away.
My problem is how to keep the dialog displayed?
I don't understand why it disappears after a second.
I have 2 questions:
1) Can anyone explain why this doesn't work and why my dialog does not stay visible?
2) WIth regard to the above referenced link, I was told that using the visible property of the dialog caused a new instance of the dialog to be created in the DOM - that is why you shouldn't do that. I do not understand why if a p:dialog is "rendered" the visible property doesn't just toggle the visibility of that component, rather than create a new instance. Can someone explain that? Maybe I misunderstood.
Thanks.
Here is how I create the h:commandButton component in the backing bean:
Code: Select all
void appendBut( String id, String tit, String val, String styl, String binding, String onClick )
{
butOut = (HtmlCommandButton)application.createComponent(HtmlCommandButton.COMPONENT_TYPE);
FacesContext faces = FacesContext.getCurrentInstance();
ELContext ec = faces.getELContext();
ExpressionFactory ef = application.getExpressionFactory();
MethodExpression me = ef.createMethodExpression(ec, binding, null, new Class[]{ActionEvent.class});
MethodExpressionActionListener meal = new MethodExpressionActionListener( me );
butOut.addActionListener(meal);
butOut.setTitle( title );
butOut.setValue( value );
butOut.setStyle( styl );
butOut.setId( id );
butOut.setType( "submit" );
butOut.setOnclick( onClick );
children.add(butOut);
}
Code: Select all
appendBut(id, titl, vac, styl1, "#{payrollSessionBean.doValue}", "prChangeValueDialog.show();" );
Code: Select all
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.prime.com.tr/ui">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="id" default="changeValueOutPnl" required="false"/>
<cc:attribute name="styleClass" default="prChangeValueDialog" required="false"/>
<cc:attribute name="widgetVar" default="prChangeValueDialog" required="false"/>
<cc:attribute name="modal" default="true" required="false"/>
<cc:attribute name="height" default="200" required="false"/>
<cc:attribute name="width" default="300" required="false"/>
<cc:attribute name="header" default="Change Value" required="false"/>
<cc:attribute name="visible" default="false" required="false"/>
<cc:attribute name="mainPanelStyleClass" default="prChangeValuePnl" required="false"/>
<cc:attribute name="currentValueLblStyleClass" default="prCurrentValueLbl" required="false" />
<cc:attribute name="currentValueLbl" default="Current Value:" required="false"/>
<cc:attribute name="currentValueTfStyleClass" default="prCurrentValueTF" required="false" />
<cc:attribute name="oldValueTfStyleClass" default="prOldValueTF" required="false" />
<cc:attribute name="currentValue" default="" required="false"/>
<cc:attribute name="newValueLblStyleClass" default="prNewValueLbl" required="false" />
<cc:attribute name="newValueLbl" default="New Value:" required="false"/>
<cc:attribute name="newValueTfStyleClass" default="prNewValueTF" required="false" />
<cc:attribute name="newValue" default="" required="false"/>
<cc:attribute name="quitBtnStyleClass" default="prCvQuitBtn" required="false"/>
<cc:attribute name="quitBtnAction" method-signature="java.lang.String quitBtnAction()"/>
<cc:attribute name="quitBtnValue" default="Quit" required="false"/>
<cc:attribute name="applyBtnStyleClass" default="prCvApplyBtn" required="false"/>
<cc:attribute name="applyBtnAction" method-signature="java.lang.String applyBtnAction()"/>
<cc:attribute name="applyBtnValue" default="Apply" required="false"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<p:outputPanel id="#{cc.attrs.id}" >
<p:dialog id="changeValueDialog" styleClass="#{cc.attrs.styleClass}"
widgetVar="#{cc.attrs.widgetVar}"
closable="false"
modal="#{cc.attrs.modal}"
height="#{cc.attrs.height}"
width="#{cc.attrs.width}"
header="#{cc.attrs.header}" >
<h:form>
<h:panelGrid id="changeValuePnl" styleClass="#{cc.attrs.mainPanelStyleClass}" columns="2" >
<h:outputText id="currentValueLbl" styleClass="#{cc.attrs.currentValueLblStyleClass}"
value="#{cc.attrs.currentValueLbl}" />
<h:inputText id="currentValueTF" styleClass="#{cc.attrs.currentValueTfStyleClass}"
value="#{cc.attrs.currentValue}" />
<h:outputText id="newValueLbl" styleClass="#{cc.attrs.newValueLblStyleClass}"
value="#{cc.attrs.newValueLbl}" />
<h:inputText id="newValueTF" styleClass="#{cc.attrs.newValueTfStyleClass}"
value="#{cc.attrs.newValue}" />
</h:panelGrid>
<p:commandButton id="quitBtn" styleClass="#{cc.attrs.quitBtnStyleClass}"
action="#{cc.attrs.quitBtnAction}"
onclick="prChangeValueDialog.hide();"
value="#{cc.attrs.quitBtnValue}" />
<p:commandButton id="applyBtn" styleClass="#{cc.attrs.applyBtnStyleClass}"
oncomplete="vcHandleVerify(xhr, status, args)"
update="payrollPreviewComp:psGrid1"
action="#{cc.attrs.applyBtnAction}"
value="#{cc.attrs.applyBtnValue}" />
</h:form>
</p:dialog>
<script type="text/javascript">
function vcHandleVerify(xhr, status, args)
{
if( !args.verified)
{
alert( "Invalid New Value.\nValue must be numeric and cannot be blank." );
} else
{
prChangeValueDialog.hide();
}
}
</script>
</p:outputPanel>
</cc:implementation>
</html>