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.
Related
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 2 years ago.
When I click addTagButton, everything works well. It updates all three components: tags, tagId and addTagButton.
<p:commandButton id="addTagButton" icon="ui-icon-plus"
action="#{searchBean.addTag}"
update="tags, tagId, addTagButton"
disabled="#{searchBean.tagChoices.size() == 0}">
</p:commandButton>
Here's the table component:
<h:dataTable id="tags" var="tag" value="#{searchBean.tags}">
<h:column>
<div style="text-align:right;">
<h:outputLabel value="#{tag.typeName}:"/>
</div>
</h:column>
<h:column>
<p:inputText id="tag" size="25" value="#{tag.typeValue}"
disabled="#{searchBean.searchForParent}"/>
</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{searchBean.deleteTag}"
update=":contentForm:tagId, :contentForm:addTagButton, tags">
<f:setPropertyActionListener
target="#{searchBean.tagId}"
value="#{tag.typeName}" />
</p:commandButton>
</h:column>
</h:dataTable>
When i click on delTagButton that is on each row in tags table, action works fine, :contentForm:tagId and :contentForm:addTagButton update fine. But tags table which is where clicked command button exist, does not update.
When a row is deleted, change must reflect in the tags table which does not work.
Now, If I change h:dataTable to p:dataTable or any other primefaces component, it works. I am trying to make it work with h:dataTable.
Primefaces 8.0, JSF 2.5
Look on this simple example:
<h:form id="form">
<h:panelGroup id="wrapper" layout="block">
<h:dataTable id="table" border="1" value="#{testBean.list}" var="person">
<h:column>#{person.name}</h:column>
<h:column>#{person.surname}</h:column>
<h:column>
<p:commandButton id="delTagButton" icon="pi pi-trash"
action="#{testBean.remove(person)}" update="table">
</p:commandButton>
</h:column>
</h:dataTable>
</h:panelGroup>
</h:form>
To really find out what is being updated look in browser console.
If you're trying to update="table" nothing happens (like in your code). If you try to update a parent of the table (which is often a case), you will get an error an error:
SEVERE: Error Rendering View[/example.xhtml]
org.primefaces.expression.ComponentNotFoundException: Cannot find component for expression "wrapper" referenced from "form:table:0:delTagButton".
at org.primefaces.expression.SearchExpressionFacade.cannotFindComponent(SearchExpressionFacade.java:677)
So we could try with "older" parent and realize that update="#form" works! OK, so we want to help to find id="table\wrapper" component. Let try clientId update="form:table". Like with update="table" nothing happens. And no error from PF (so the element can be found). This could mean that h:dataTable cannot be properly re-rendered from inside itself (but I don't want to throw stones:-)). This is often a case with e.g. popups in JSF 3rd party component libraries.
In this particular example I'd say, you have to update form:wrapper (adding form: works) or just #form to get it work. With your code it would be the same. Try to update some table parent or the whole form.
All of above is tested in JSF 2.2, with last RF, an old PF and OmniFaces. But I think the same would be the case with newer versions.
BTW. I didn't know there is JSF 2.5 :-)
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.
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>
I've used Primefaces multiple times. It's excellent. But this time I don't know why:
I cannot add a growl component, error is: org.primefaces.component.growl.Growl cannot be cast to org.primefaces.component.api.AutoUpdatable
The same for p:messages
It's possibly due to some errors in my facelet. But I compare this to a successful facelet that I wrote before, and I cannot figure out what's the problem. The facelet is question is (delete p:growl and all go well):
<body>
<ui:composition template="./../../WEB-INF/master.xhtml">
<ui:define name="top">
<h:outputText value="#{bundle.ListAccountHolderTitle}"></h:outputText>
</ui:define>
<ui:define name="content">
<h:form>
<p:growl id="growl"/>
<p:dataTable value="#{accountHolderBean.items}" var="holder">
<p:column headerText="Type">#{holder.name}</p:column>
</p:dataTable>
<h:panelGrid columns="2">
Type
<h:inputText id="type1" required="true" value="#{accountHolderBean.selected.type}"/>
Name
<h:inputText id="name1" value="#{accountHolderBean.selected.name}"/>
Field
<h:inputText id="field1" accesskey="f" value="#{accountHolderBean.field}"/>
Value
<h:inputText id="val" accesskey="v" value="#{accountHolderBean.val}"/>
All attributes
<h:outputText id="attrs" value="#{accountHolderBean.allAttributes}"/>
</h:panelGrid>
<p:commandLink update="attrs" actionListener="#{accountHolderBean.update}">Update</p:commandLink>
</h:form>
</ui:define>
</ui:composition>
</body>
org.primefaces.component.growl.Growl cannot be cast to org.primefaces.component.api.AutoUpdatable
This suggests that you've both PrimeFaces 2.x and 3.x libraries in your webapp's runtime classpath. The AutoUpdatable was introduced in PrimeFaces 3.0 while the Growl already exist before in 2.x, but it didn't implement AutoUpdatable until PrimeFaces 3.0.
Cleanup your classpath and get rid of the offending old PrimeFaces 2.x library.