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.
Related
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.
I've the below dialog:
<h:form id="r1">
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
<p:dialog header="Basic Dialog" widgetVar="dlg1">
<h:outputText id="test" value="Welcome to PrimeFaces" />
</p:dialog>
</h:form>
How can I refresh the JSF page after closing the dialog?
The <p:dialog> supports the ajax close event. This only requires it being placed inside a <h:form> (on contrary to the general recommendation), so you need to make sure that it's already manually poisitioned to the very end of the <h:body> and that you don't make use of appendToBody.
<h:body>
<h:panelGroup id="content" layout="block">
...
</h:panelGroup>
...
<h:form>
<p:dialog>
<p:ajax event="close" update=":content" />
...
</p:dialog>
</h:form>
</h:body>
Use if necessary update="#all" if you intend to update the entire page. But better is to update only the parts which really need to be updated.
I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.
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");
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.