This question already has answers here:
p:commandbutton action doesn't work inside p:dialog
(4 answers)
Closed 6 years ago.
I'm currently working on a CRUD form and is now working on the last part which should be the most easiest - delete. But I want to show a dialog before the user can do the actual deletion. And this is where I'm having problem with Primefaces 3.4. For some reason I cannot set the action in the button inside the p:dialog, ajax=false failed. So here's what I did:
<p:column headerText="#{msgs['action.delete']}"
styleClass="a-center">
<p:commandButton icon="ui-icon-trash"
oncomplete="confirmation.show()">
<f:setPropertyActionListener
target="#{marketingCodeBean.marketingCode}" value="#{code}"></f:setPropertyActionListener>
</p:commandButton>
</p:column>
The Dialog:
<p:confirmDialog id="confirmDialog"
message="#{msgs['message.marketingCode.confirmDelete']}"
header="#{msgs['common.confirmDelete']}" severity="alert"
widgetVar="confirmation">
<p:commandButton id="confirm" value="#{msgs['common.yes']}"
oncomplete="confirmation.hide()" update=":form:mktgCodeTable"
actionListener="#{marketingCodeBean.remove}" />
<p:commandButton id="decline" value="#{msgs['common.no']}"
onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
I'm aware that the actionListener should not be use for business action, but I can't think of a workaround given the datatable and the dialog. Any idea on how I can make ajax=false in p:commandButton inside p:confirmDialog?
Once rendered, the dialog's HTML output is by some onload JavaScript relocated to end of HTML <body> in order to achieve the best cross-browser compatible overlay/positioning. However, this thus means that if it was placed inside a <form>, it would not be in a <form> anymore and synchronous (non-ajax) requests would then not work anymore. This is not exactly an action vs actionListener issue.
The <p:dialog> (and <p:confirmDialog> as you seem to be actually using) should have its own <h:form> component.
<h:form>
<p:dataTable>
...
</p:dataTable>
</h:form>
...
<p:confirmDialog>
<h:form>
...
</h:form>
</p:confirmDialog>
Related
This question already has answers here:
Can you nest html forms?
(21 answers)
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
(2 answers)
Closed 6 years ago.
I'm using PrimeFaces 5.3 with the following code:
<p:dialog id="dlg1" appendTo="#(body)" header="Confirm Dialog" widgetVar="dlg1" modal="true">
<h:form id="dialogform">
<h:outputText id="confirmlabel" value="Are you Sure you want to #{reportRunnerNamedBean.currentCommand} ?" />
<br/>
<center>
Check to send only missed emails:<p:selectBooleanCheckbox id="sendOnlyMissedBox" value="#{reportRunnerNamedBean.sendMissedOnly}"></p:selectBooleanCheckbox><br/>
<p:commandButton id="yesButton" value="Yes" action="#{reportRunnerNamedBean.runCurrentCommand()}" onstart="startWait();PF('waitDialog').show();" oncomplete="PF('waitDialog').hide();stopWait();" onclick="PF('dlg1').hide();" process="#form"/>
<p:commandButton id="noButton" process="#this" value="No" onclick="PF('dlg1').hide();"/>
</center>
</h:form>
</p:dialog>
No matter what, the backing bean value for the sendMissedOnly is set to false. I have confirmed this by attaching a debugger. I have even tried adding ajax to the box, it is still false every time, no matter if it is checked or not. Does p:selectBooleanCheckbox just not work in a dialog?
I figured this out. It was because the dialog was in an form. It seems that when a dialog is in a form , and you have a form within the dialog itself, the component will not be processed. It seems JSF/primefaces does not like multiple layers of forms or dialogs defined within forms. If you are having a similar issue, makes sure your dialog is defined outside any form. Moving a dialog can cause paths to components to change. the easiest way to resolve that is to use the primefaces handy p:component tag like this update=":#{p:component('compoment_name')}" > that will make it find it no matter where in the tree the component occurs.
This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
I am trying to show a dialog from either the web page, or from the bean. In either case it gives the above error and doesn't seem to be able to find the component in PF. I'm using PrimeFaces 5.2, and I don't seem to have the multiple version issue that was discussed here
I have pasted the relevant xhtml code below - the exact same behaviour occurs when I try to call it from the bean with:
RequestContext.getCurrentInstance().execute("PF('dlgTask').show();");
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<div id="title" class="sl-title">#{text['project.title']} </div>
<p:dialog
id="taskDialog"
widgetVar="dlgTask"
modal="true"
closeOnEscape="true">
<h:form id="taskDialogForm">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="taskName" value="#{text['name']}" />
<p:inputText
id="taskName"
value="#{editProject.editTask.name}" />
</p:panelGrid>
</h:form>
</p:dialog>
<p:commandButton
title="#{text['project.task.new']}"
disabled="#{not editProject.canEditProject}"
action="#{editProject.createNewTask}"
process="#form"
update="#form"
oncomplete="PF('dlgTask').show();"
icon="fa fa-plus" />
This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces code.
This question already has answers here:
Outcommented Facelets code still invokes EL expressions like #{bean.action()} and causes javax.el.PropertyNotFoundException on #{bean.action}
(3 answers)
Closed 7 years ago.
I have this button in a .xhtml:
<p:commandButton id="openDialog"
value="#{msg.CreateMultiple}"
onclick="PF('dialogLocations').show();" title="View"
type="button">
</p:commandButton>
What it is supposed to do, is to open the dialog dialogLocations which has the next code:
<p:dialog header="#{msg.CreateMultiple}" id="dialogLocations"
widgetVar="dialogLocations" modal="true"closable="true"
dynamic="true" closeOnEscape="true">
<h:form>
<p:commandButton id="acceptMultiple_button" value="#{msg.Create}"
action="#{locationCreateBean.createMultiple(true)}"
styleClass="btn-green internal-margin-left" update="#form">
</p:commandButton>
<p:commandButton id="cancelMultiple_button"
styleClass="btn-red internal-margin-left"
onclick="PF('dialogLocations').hide();" value="#{msg.Cancel}"
title="View" type="button">
</p:commandButton>
</div>
</h:panelGroup>
</h:form>
</p:dialog>
The dialog has some inputs also to use in the bean.
My problem is that, when I click the button "openDialog" the dialog opens and the method locationBean.createMultiple(true) is being called, which is the action of the button "acceptMultiple_button" .
Shouldn't the action of the button be triggered when I click the button?
Thanks.
Solved it. It was a comment on the xhtml surrounded by <!-- --> that has the call to the method. I thought that in a comment wouldn't call the function. But it seems sometimes it calls a comment anyway.
Thanks for the comments.
This question already has answers here:
How to use PrimeFaces p:fileUpload? Listener method is never invoked or UploadedFile is null / throws an error / not usable
(11 answers)
Closed 7 years ago.
I'm getting wrong or what, the same code for p:fileUpload works fine, but when I put p:fileUpload into p:dialog, it is not working.
<p:dialog id="confirmDialog" appendToBody="true"
header="MAJ Fichier FMD" widgetVar="confirmation">
<h:form enctype="multipart/form-data" >
<h:panelGrid columns="1" cellpadding="5">
<p:fileUpload
auto="true"
fileUploadListener="#{parserXls.handleFileUploadFMD()}"
sizeLimit="2097152"
label="Choose"
allowTypes="/(\.|\/)(pdf)$/"
description="Images"/>
<p:commandButton id="OK" value="OK" onclick="confirmation.hide()" type="button" />
</h:panelGrid>
</h:form>
</p:dialog>
What is the problem here?
The situation looks like a nested forms problem - if it is so, remove the inner form and try again.
Well i had the same problem and it wasn't nested forms problem. I was using action instead of actionListner.
For those who still have the problem, check if you not forget to put (
enctype="multipart/form-data") inside the form.
I have a dialog that contains no content on page load and I'm dynamically setting the content of a dialog box based on the link that a user clicks on.
<p:dialog widgetVar="dlg" modal="true" id="dialog">
<p:panel id="fullArticle">
<h:outputText value="#{content.newsArticle}" escape="false" />
</p:panel>
</p:dialog>
...
...
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" onclick='dlg.show();' update=":fullArticle">
<f:attribute name="contentId" value="#{news.contentId}" />
</p:commandLink>
The problem i'm having is that when you click the "Read More" link, it shows the dialog, but the dialog is not centered on the page. If i change the udpate attribute on the commandLink to update=":dialog", the dialog flashes as if it's opening and then closing right away.
How can I update the dialog and have it be centered with dynamic content?
The onclick is executed before the ajax request. You need to open the dialog in oncomplete instead. This will be executed after the ajax request and update. The <p:dialog> is namely by default hidden unless its visible attribute evaluates true.
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}"
update=":dialog" oncomplete="dlg.show()">
Unrelated to the concrete problem, are you aware that you can pass fullworthy objects as method arguments since EL 2.2? This makes the <f:attribute> and actionListener "hack" superfluous:
<p:commandLink value="Read more" action="#{content.getFullArticle(news)}"
update=":dialog" oncomplete="dlg.show()" />
I had the same problem.
Updating the dialog makes it disappear and reappear (and forget its position).
To solve it, I created a wrapper tag around the dialog content.
<p:commandLink update=":playerViewDialogHeader,:playerViewDialogContent"
oncomplete='playerViewDialogJS.show()' value='#{item.name}' />
<p:dialog id='playerViewDialog' widgetVar='playerViewDialogJS'>
<f:facet name="header">
<h:outputText id="playerViewDialogHeader" value="#{playerController.objectView.name}" />
</f:facet>
<h:form id='playerViewDialogContent'>
<!-- CONTENT GOES HERE -->
</h:form>
</p:dialog>