I want to display a composite component inside a dialog. It works but then how do I close that dialog from the composite component.
<p:commandButton value="Display Data Value Assertion Dialog" onclick="dlg2.show();" type="button"/>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="600" width="800">
<tcmt:DataValueAssertion managedBean="#{dataValueAssertionController}"/>
</p:dialog>
In my composite component:
<h:commandButton value="Save Assertions">
<f:ajax listener="#{datatypeAssertionController.saveDatatypeAssertion}"></f:ajax>
</h:commandButton>
<h:commandLink value="Close">
<f:ajax listener="#{datatypeAssertionController.closeDatatypeAssertion}"></f:ajax>
</h:commandLink>
When clicking on Save, I want to be able to save the data and close the dialog. When clicking on Cancel, I just want to close the dialog without saving. Both saveDatatypeAssertion and closeDatatypeAssertion methods are placeholders. I need to find a way to get a reference for the dialog dlg2 and then call the hide() method on it.
If you are using JSF 2.0.You can do like this:
<h:commandButton value="Save Assertions" >
<f:ajax event="click" onevent="dlg2.hide()" listener="#{datatypeAssertionController.saveDatatypeAssertion}" />
</h:commandButton>
<h:commandLink value="Close" >
<f:ajax event="click" onevent="dlg2.hide()" listener="#{datatypeAssertionController.closeDatatypeAssertion}" />
</h:commandLink>
Related
I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton
Actually had h:selectBooleanCheckbox with ajaxSupport event inside one <h:form id="form1">, so while checking, invoking action/listener but once open modal panel and it contains h:selectBooleanCheckbox as well (which is inside another <h:form id="form2">), just close modal panel and try to check checkbox which is inside form1, but ajaxSupport and action is not invoking, please provide suggestion to fix.
The code is as follows:
<body>
<h:form id="form1">
<h:selectBooleanCheckbox id="customerActiveId"
value="#{manager.customerActive}">
<a4j:support`enter code here`
action="#{bean[action]}"
event="onclick"
reRender="#{reRender}" />
</h:selectBooleanCheckbox>
<br />
<a4j:commandButton id="pnlConfigurationId"
value="project configuration"
oncomplete="$j('#pnlConfigurationMP').toggle();" />
</h:form>
<rich:modalPanel id="pnlConfigurationMP" >
<h:form id="form2" enctype="multipart/form-data">
<h:selectBooleanCheckbox id="projectConfigurableId"
value="#{manager.projectConfigurable}">
<a4j:support
action="#{bean[action]}"
event="onclick"
reRender="#{reRender}" />
</h:selectBooleanCheckbox>
<a4j:commandButton id="cancel" value="cancel" immediate="true" ajaxSingle="true"/>
<a4j:commandButton id="save" value="save" action="#{manager.savePanel()}"/>
</h:form>
</rich:modalPanel>
</body>
Actually ajax event and action is invoking on 'customerActiveId' check at firts time, but once open modal panel and simply close/cancel modal panel and try to check 'customerActiveId' again so ajax event and action is not invoking here
I have an inputTextArea in a dialog and wanted that the bean property shouldn't be sent/changed when the user clicks on the cancel button, but it does.
<p:dialog header="Notizen" id="paketNotizenDialog" modal="true"
widgetVar="paketNotizenDialogWV">
<h:form>
<p:panelGrid columns="1">
<p:inputTextarea scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Save" process="#form" oncomplete="PF('paketNotizenDialogWV').hide();"/>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
</h:form>
</p:dialog>
The button which opens the dialog:
<p:commandButton id="notizEintragButton" value="T" process="#this"
onclick="PF('paketNotizenDialogWV').show();" />
Any hints? Thanks in advance.
As you are using the commandButton, the default behaviour would be to submit the enclosing form with ajax request.
I suspect what you want to do here is to reset the form input and close the dialog. In that case you should go for the type="reset" which according to the primefaces doc:
Reset buttons do not submit the form, just resets the form contents.
And once that is done, trigger your closing javascript code:
<p:commandButton value="Cancel" type="reset"
onclick="PF('paketNotizenDialogWV').hide();"/>
If you do not want to reset the form, just close the dialog then use:
<p:commandButton value="Cancel" type="button"
onclick="PF('paketNotizenDialogWV').hide();"/>
Which according to the primefaces doc would:
Push buttons are used to execute custom javascript without causing an
ajax/non-ajax request. To create a push button set type as "button"
Update
If you want to reset the values from the backing bean then use reset input fields functionality of primefaces.
In your case it would be something like:
<p:panelGrid columns="1">
<p:inputTextarea id="input" scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();"
process="#this" update="input" >
<p:resetInput target="input" />
</p:commandButton>
just add type="button" and remove process="#none" update="#none"
from <p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
I am using a primefaces dialog box. I have a list of items, and whenever I choose an item, I want the dialog box to display that item name. However, this is not happening. Rather than displaying the item name, the dialog is not displaying any name at all. I've posted my code below.
<h:form>
<h:dataTable binding="#{table}" value="#{item.itemList}" >
<h:column>
<h:link value="#{item.itemList[table.rowIndex]}" outcome="item">
<f:param name="itemName" value="#{item.itemList[table.rowIndex]}" />
</h:link>
</h:column>
<h:column>
<p:commandButton action="#{item.setItem(item.itemList[table.rowIndex])}" id="showDialogButton"
type="link" value="Delete" onclick="dlg.show()" />
</h:column>
</h:dataTable>
<br />
<p:dialog header="Item" widgetVar="dlg" resizable="false">
<!-- I've also tried Item: #{item.item} -->
<p>Item: <f:attribute name="contentId" value="#{item.item}"/> </p>
<p:commandButton id="submitButton" value="Yes" action=
"#{item.deleteItem}" oncomplete="dlg.hide();">
</p:commandButton>
<p:commandButton id="cancelButton" value="Cancel" oncomplete="dlg.hide();" />
</p:dialog>
</h:form>
My getters and setters are just generic getters and setters.
You forgot to update the dialog before opening.
<p:commandButton ... update="dialogId" />
I also suggest to use oncomplete instead of onclick to open the dialog.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to show details of current row from p:dataTable in a p:dialog and update after save
Primefaces p:dialog doesn't always show up if update="dlg" in commandButton
There are a list with 100 "Favs" on it. It only shows 10 when the page loads. When I click on "Show More Favs" it shows 10 more Favs.
What's weird about it, it's after I click on Show More Favs, clicking on Remove from list, it's not calling the method in the backBean.
My backBean is ViewScoped.
<ui:repeat value="#{bean.list}" var="fav">
<h:form>
<h:commandLink styleClass="someStyle" title="Remove from list" action="#{bean.remove(fav.id)}"/>
</h:form>
</ui:repeat>
<h:form>
<h:commandButton value="Show More Favs" action="#{bean.showMore}" >
<f:param name="moreFav" value="10" />
<f:ajax event="action" render="#all" />
</h:commandButton>
</h:form>
The culprit is the usage of multiple forms and the render="#all". If you re-render another form from inside an ajax form, the viewstate of the another form will get lost.
You need to change the code so that only the content of another form is re-rendered:
<h:form id="otherform">
<h:panelGroup id="list">
<ui:repeat value="#{bean.list}" var="fav">
<h:commandLink styleClass="someStyle" title="Remove from list" action="#{bean.remove(fav.id)}"/>
</ui:repeat>
</h:panelGroup>
</h:form>
<h:form>
<h:commandButton value="Show More Favs" action="#{bean.showMore}" >
<f:param name="moreFav" value="10" />
<f:ajax event="action" render=":otherform:list" />
</h:commandButton>
</h:form>