I have a Dialog and a CommandLink which shows this dialog. In this Dialog i display values which has created during the action (or propertyListener) of the command link. But because the update is executed before the action, the variables are not set.
<p:commandLink update="#form:myDialog" action="#{myBean.setText('text')}"
oncomplete="myDialog.show()">
</p:commandLink>
....
<p:dialog widgetVar="myDialog" modal="true">
<p:inputText value="#{myBean.text}" />
</p:dialog>
Is it possible to execute an action before the update is done?
I dialog will update you haven't specified the Id attribute of the dialog
<p:commandLink update="myDialog" action="#{myBean.setText('text')}"
oncomplete="myDialog.show()">
</p:commandLink>
<p:dialog Id="myDialog" widgetVar="myDialog" modal="true">
<p:inputText value="#{myBean.text}" />
</p:dialog>
This will help you .
But what i prefer is use an outputpanel
<p:commandLink update="myDialogPanel " actionlistner="#{myBean.setText('text')}"
oncomplete="myDialog.show()">
</p:commandLink>
<p:dialog Id="myDialog" widgetVar="myDialog" modal="true">
<p:outputPanel Id=myDialogPanel >
<p:inputText value="#{myBean.text}" />
</p:outputPanel>
</p:dialog>
or you can update the dialog from managedBean and show the dialog. This is helpful if you get any error at your managedBean method your dialog is not show.
RequestContext.getCurrentInstance().update("myDialogPanel");
RequestContext.getCurrentInstance().execute("myDialog.show();");
You can open the Dialog from ManagedBean itself.
RequestContext.getCurrentInstance().execute(myDialog.show());
RequestContext can be used to Execute any javascript from ManagedBean.
You can also update the components from Managed Bean using RequestContext's Update
method.
RequestContext.getCurrentInstance().update("COMPONENT_ID");
Related
I have a <p:dialog dynamic="true"> which is shown on start of <p:commandButton>.
<h:form id="form">
<p:commandButton value="#{bundleComunes.guardar}" actionListener="#{saveBB.save}" onstart="PF('saveDialog').show()" update="#form" oncomplete="PF('saveDialog').hide()" />
<p:dialog dynamic="true" widgetVar="saveDialog">
Guardando<br></br>
<p:graphicImage value="/img/ajaxloadingbar.gif" />
</p:dialog>
</h:form>
It shows dialog, but never hides on complete. But if I remove dynamic="true", it works.
<h:form>
<p:commandButton ... update="#form" />
<p:dialog dynamic="true">
...
</p:dialog>
</h:form>
You're updating the form the dynamic dialog is sitting in, causing it to get corrupted because it's after the update not the same dialog anymore as when it was opened.
Change update="#form" to something more specific which does not cover the dialog, or, better yet, move the dialog outside the form, preferably to the very bottom of the body.
<h:form>
<p:commandButton ... update="#form" />
</h:form>
...
<p:dialog dynamic="true">
...
</p:dialog>
I have just tested it on glassfish and it works fine.
I think you should have a look on #{saveBB.save} and check if it throws any exception.
codes:
<p:dialog header="Downloads" widgetVar="hwDialog" modal="true"
showEffect="fade" hideEffect="fade" resizable="false"
appendTo="#(body)" width="700" height="500" position="center center">
<p:ajax event="close" listener="#{MB.selectedReset()}"
update="#([id$=hwTable])" />
<h:form id="dlg_form">
<p:dataTable id="dlg_hwTable" var="std"
value="#{MB.list}"
paginator="true" rows="10" rowKey="#{std.id}"
rowsPerPageTemplate="5,10,15" rowIndexVar="count">
<p:column headerText="File">
<p:commandLink ajax="false" value="Download"
action="#{MB.prepareForDownload(std)}">
<p:fileDownload value="#{MB.file}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
file is null at the first click in p:filedownload.Then dialog closes unexpectedly.Unexpectedly because close event doesn't work when the dialog closed.But I am re-opening dialog and clicking the link again.Works but downloading previous file.So filedownload performed before commandLink's action method.How can I solve this problem?
You need to use actionListener to prepare a file stream for p:fileDownload, because the action method gets triggered after the downloading logic executes.
This will fix the dissappearing dialog too - it was happening because without a file the download request resulted in a non-AJAXical POST navigation, which basically resets the page DOM to its initial state.
Here is some html I am writing to allow categories to be added using a dialog:
<p:dialog id="newCategoryDlg" header="Add New Category" widgetVar="newCategoryDialog" resizable="false">
<h:form id="newCategoryForm">
<p:panelGrid id="displayNewCategory" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="Category Name :"></h:outputText>
<p:inputText value="#{categoryController.newCategory.name}"
required="true" requiredMessage="Please Enter a Category ID!" />
<f:facet name="footer">
<p:commandButton value="Submit" update=":form:categoryTable"
oncomplete="newCategoryDialog.hide();"
actionListener="#{categoryController.addCategory}">
<p:resetInput target="displayNewCategory" />
</p:commandButton>
<p:commandButton type="reset" value="Reset"></p:commandButton>
</f:facet>
</p:panelGrid>
</h:form>
</p:dialog>
Now, for whatever reason, "" just doesn't seem to work no matter which widget or identifier I use. All I want is for old input entries to disappear after they have been submitted. What am I doing wrong?
You misunderstood the purpose of <p:resetInput>. This misunderstanding is essentially already answered/explained here: Why does p:resetInput require properties of a managed bean to be set to null first after the form is submitted?
As to your concrete functional requirement of the need to update the dialog's content before opening, just do exactly that in the command button which opens the dialog:
<h:form>
<p:commandButton value="Open dialog" action="#{dialogBean.init}"
process="#this" update=":dialog" oncomplete="w_dialog.open()" />
</h:form>
...
<p:dialog id="dialog" widgetVar="w_dialog" ...>
Note that when the dialog contains fields which needs to be validated, then the <p:resetInput> would be very applicable in the button who's updating and opening the dialog in order to clear out invalid state.
See also:
How to show details of current row from p:dataTable in a p:dialog and update after save
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
I have some weird issue with datatable selection (most likely i'm doing something wrong).
Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.
here are contents of my body
<!-- language: xml -->
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable id="indicatorsTable" var="ind"
value="#{indicatorBean.indicators}"
selectionMode="single"
selection="#{indicatorBean.indicator}"
rowKey="#{ind.id}">
<p:column headerText="Name" style="width:125px">
#{ind.name}
</p:column>
<p:column headerText="Code" style="width:125px">
#{ind.code}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View"
icon="ui-icon-search" update=":form:display"
oncomplete="indDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Indicator Detail"
widgetVar="indDialog" resizable="false"
width="400" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Code:"/>
<!-- PROBLEM IS HERE -->
<h:inputText value="#{indicatorBean.indicator.code}"/>
<h:outputText value="Name:"/>
<h:outputText value="#{indicatorBean.indicator.name}"/>
</h:panelGrid>
<p:commandButton value="Save" onclick="indDialog.hide()"/>
<p:commandButton value="Cancel" onclick="indDialog.hide()"/>
</p:dialog>
</h:form>
</h:body>
Backing bean is nothing other that accessors.
Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown.
Here are some pictures:
Dialog with inputtext
Dialog with outputtext
Dialog with static text
primefaces 3.4
The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.
This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.
<p:dialog id="dialogId" ...>
<h:form id="dlgForm">
....
</h:form>
</p:dialog>
In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.