Primefaces: commandButton ajax="false" will not work with p:dataExporter and p:fileDownload
Written By
Alfonso Crisci
How To articles are not official guidelines or officially
supporteddocumentation. They are community-contributed content and may
not alwaysreflect the latest updates to Liferay DXP. We welcome your
feedback toimprove How to articles!
While we make every effort to ensure this Knowledge Base is accurate,
itmay not always reflect the most recent updates or official
guidelines.We appreciate your understanding and encourage you to reach
out with anyfeedback or concerns.
Legacy Article
You are viewing an article from our legacy
"FastTrack"publication program, made available for
informational purposes. Articlesin this program were published without a
requirement for independentediting or verification and are provided
"as is" withoutguarantee.
Before using any information from this article, independently verify
itssuitability for your situation and project.
Issue
- When using the Primefaces
<p:commandButton ajax="false" /> with p:dataExporter and p:fileDownload, the page will not render properly, there will be visual issues.
Environment
Resolution
- When using
p:dataExporter and p:fileDownload in portlets, it is a best practice to put them in their own separate form. Non-Ajax UICommand components will fail in JSF portlets if they are included in a form with a p:dataExporter or p:fileDownload.
Something like the below:
<h:body>
<h:form>
<p:commandButton value="commandButton ajax=false doesn't work" ajax="false" />
</h:form>
<h:form>
<h1>not working example - contains PrimeFaces dataExporter</h1>
<p:dataTable id="tabledata" var="r" value="#{controller.tabledata}">
<h:outputText value="this is the header where the button was" />
<p:commandButton ajax="false" value="csv export">
<p:dataExporter target="tabledata" type="csv" fileName="tabledata" />
</p:commandButton>
</f:facet>
<p:column>
<h:outputText value="#{r}" />
</p:column>
</p:dataTable>
<p:commandLink value="switch to working example" action="working" />
</h:form>
Shall be changed to become:
<h:body>
<h:form>
<p:commandButton value="commandButton ajax=false doesn't work" ajax="false" />
<h1>not working example - contains PrimeFaces dataExporter</h1>
<p:dataTable id="tabledata" var="r" value="#{controller.tabledata}">
<h:outputText value="this is the header where the button was" />
<p:commandButton ajax="false" value="csv export">
<p:dataExporter target="tabledata" type="csv" fileName="tabledata" />
</p:commandButton>
</f:facet>
<p:column>
<h:outputText value="#{r}" />
</p:column>
</p:dataTable>
<p:commandLink value="switch to working example" action="working" />
</h:form>
Did this article resolve your issue ?