I am using a PrimeFace5.0 DataTable. I want to add the ajax rowSelect event to it. However, when a row is clicked, the event is not fired. My table and Ajax are declared like so:
<p:dataTable id="leTable"
value="#{leList.leItems}"
var="leItem"
rowKey="#{leItem.id}"
scrollable="true"
scrollHeight="100%"
selection="#{leList.selectedLEs}"
selectionMode="multiple"
rowIndexVar="rowIndex"
resizableColumns="true"
liveResize="true"
>
<p:ajax event="rowSelect"
listener="#{leAction.onLeRowSelect}"
update=":form:rowIndexId"
onstart="getLeRowIndexId(event)">
</p:ajax>
....
</p:dataTable>
Action-Bean:
public void onLeRowSelect(SelectEvent event)
{
....
}
The whole thing worked well with the Prime Faces 4.0. But after switching to version 5.0 it no longer works. Can someone please help me?
Related
I have a page with a p:selectOneRadio and I want to show one datatable depending on the chosen value of the radio selection. I have the error:
GRAVE: javax.el.MethodNotFoundException: .......changeListenerMethod(javax.faces.event.AjaxBehaviourEvent)
My code is the following:
<p:selectOneRadio value="#{analysisOrderForm.selectedOrderDomain}">
<f:selectItem itemLabel="choice1" itemValue="choice1"></f:selectItem>
<f:selectItem itemLabel="choice2" itemValue="choice2"></f:selectItem>
<p:ajax event="change" listener="#{analysisOrderForm.changeListenerMethod}"/>
</p:selectOneRadio>
<h:PanelGroup>
<p:dataTable rendered="#{analysisOrderForm.selectedOrderDomain == 'choice1'}">....</p:dataTable>
<p:dataTable rendered="#{analysisOrderForm.selectedOrderDomain == 'choice2'}">....</p:dataTable>
</h:PanelGroup>
The code of my 'changeListenerMethod method' is just:
public void changeListenerMethod(ValueChangeEvent e){
setSelectedOrderDomain(e.getValue().toString());
}
What is correct and what is wrong in my code?
When using
<p:ajax event="change" listener="#{analysisOrderForm.changeListenerMethod}"/>
JSF will look for a method in your analysisOrderForm bean which has the following signature: public void changeListenerMethod(AjaxBehaviourEvent e). So you just need to replace ValueChangeEvent by AjaxBehaviourEvent.
Notes:
Another alternative approach is to write a method that doesn't take any arguments such as public void changeListenerMethod() and references it in your listener with listener="#{analysisOrderForm.changeListenerMethod()}
Event change is not the right event in your case. p:selectOneRadio event should be click (besides, that's the default event value). See also https://stackoverflow.com/a/21292158/2118909
I am having a problem, I am firing a ajax event in a selectOneMenu like this: the first one does not fire any event
<p:selectOneMenu id="IdSelectOne" value="#{MB.myentity.myValue}" converter="myConverter1">
.....
</p:selectOneMenu>
<p:selectOneMenu id="IdSelectTwo" converter="myConverter2">
<p:ajax event="change" process="#this" partialSubmit="true"
listener="#{MB.ChangeOption}" update="creatPanel" >
</p:ajax>
</p:selectOneMenu>
The problem is that when the ajax event updates the panel, the first SelectOneMenu sets tu null, i can't use #form because it validates all fields and never do what I need which is show a field based on the selection of the second SelectOneMenu, is there a way to avoid this problem to happend?
This is my backing bean:
public void ChangeOption(AjaxBehaviorEvent event){
.....
}
I solved it by updating just the element I needed and not the complete panel, Thanks
I have a problem with a form not triggering its commandButton action method.
When I submit the form without prior update (not selecting any node in the tree), the method triggers just fine.
As soon as the form is Ajax-updated, the commandButton won't call its action anymore.
Here is the JSF code:
<p:layoutUnit position="center">
<p:tree orientation="horizontal" value="#{flightTypeController.tree}" var="node"
selectionMode="single" selection="#{flightTypeController.selectedNode}">
<p:ajax event="select" listener="#{flightTypeController.onNodeSelect}" update=":typesTree"/>
<p:treeNode>
<h:outputText value="#{node.name}"/>
</p:treeNode>
</p:tree>
<h:form id="typesTree">
<p:inputText disabled="true" id="outputParent" value="#{flightTypeController.selectedOne.name}"/>
<p:inputText id="outputName" value="#{flightTypeController.current.name}"/>
<p:commandButton ajax="false" icon="ui-icon-disk" value="#{bundle.general_create}" action="#{flightTypeController.create()}"/>
</h:form>
</p:layoutUnit>
And the java listener:
public void onNodeSelect(final NodeSelectEvent event) {
final Object res = event.getTreeNode().getData();
if (res instanceof FlightType) {
selectedOne = (FlightType) res;
} else {
selectedOne = null;
}
}
I already check BalusC's bible and JS Fix but without success.
I've seen similar behaviours quite often (and had to find workarounds) so I might have misunderstood something fundamental.
Oh, yes, I checked multiple times : no nested forms in my code.
The JS fix which you found is hooking on jsf.ajax.addOnEvent which is only triggered by <f:ajax>, not by PrimeFaces components which use jQuery under the covers.
To cover PrimeFaces ajax requests as well, grab the current version of the JS fix (I have recently updated that post) and add the following to apply this fix on jQuery ajax requests as well:
$(document).ajaxComplete(function(event, xhr, options) {
if (typeof xhr.responseXML != 'undefined') { // It's undefined when plain $.ajax(), $.get(), etc is used instead of PrimeFaces ajax.
fixViewState(xhr.responseXML);
}
}
Disclaimer: I haven't tried your specific use case. But, theoretically, it should solve your problem.
I am using a PrimeFace DataTable. I want to add the ajax rowSelect event to it. However, when a row is clicked, the event is not fired.
My table is decalred like so:
<h:from>
....
<h:panelGroup id="forumPanelGroup" layout="block" styleClass="messagesPanel" rendered="#{socialAdvertiserTemplateManagedBean.displayForum}" >
<p:dataTable
id="forumDataTable"
resizableColumns="true"
var="post"
value="#{forumManagedBean.posts}"
scrollable="true"
scrollHeight="300"
paginator="true"
rows="10"
rowKey="#{post.id_value}"
emptyMessage="No posts found for the given criteria"
widgetVar="forumTable"
selectionMode="single"
tableStyle="width:auto"
paginatorPosition="top">
I have the ajax event in there like so:
<p:ajax event="rowSelect" update=":mainForm:displayPost" listener="#{forumManagedBean.rowSelect}" />
And in my backing bean, I have this function:
public void rowSelect(SelectEvent selectEvent)
{
System.out.println("Hello World");
ForumPost post = (ForumPost) selectEvent.getObject();
selectedPost = post;
}
Can anyone see a problem with my declaration that would cause the event to not be triggered. I even looked at it in FireBug, and saw this being submitted after a row is clicked:
javax.faces.ViewState 1786545179464296127:-2498355873814808136
javax.faces.behavior.even... rowSelect
javax.faces.partial.ajax true
javax.faces.partial.event rowSelect
javax.faces.partial.execu... mainForm:forumDataTable
javax.faces.partial.rende... mainForm:displayPost
javax.faces.source mainForm:forumDataTable
mainForm mainForm
mainForm:forumDataTable_i... 1
mainForm:forumDataTable_s... 0,0
mainForm:forumDataTable_s... 1
mainForm:j_idt181_active 0
mainForm:j_idt70
mainForm:j_idt72
So it looks like it is sending the rowSelect. But my server side isnt picking it up.
you must add : selection="#{forumManagedBean.selectedPost}"
inside your the setter you can display the selected object:
public void setSelectedPost(ForumPost post){
if(post!=null){
System.out.println("Hello World"+post);
}
this.selectedPost=selectedPost;
}
the ajax event in there like so:
<p:ajax event="rowSelect" update=":mainForm:displayPost"/>
i think your problem is:
<p:ajax event="rowSelect" update=":mainForm:displayPost" listener="#{forumManagedBean.rowSelect}" />
event can not be triggered, because "mainForm" can not be found;
you should add an ID to your h:form:
<h:form id="mainForm">
In place of using :mainForm:displayPost use update="#[id$=displayPost]" this will pick up displayPost directly no need to map it to any thing.
I had similar problem because click event on elements inside cell didnt propagate to the cell itself.
First you check do you have any errors in console regarding update element, then add selection attribute as it is mentioned in answers above.
If all that doesnt help try to add onclick="this.parentElement.click();" to top child element inside tablecell (datatable column).
I'm assuming you just made a typo at your form while copy-pasting here:
<h:from>
Otherwise, you should get an error with that line. Add an id to your form, so you will be able to reach it when updating.
Adding a selection to your dataTable besides selectionMode will solve your problem:
selectionMode="single" selection="#{forumManagedBean.selectedPost}"
I am using an editable primefaces selectOneMenu to display some values. If the user selects an item from the List a textarea should be updated. However, if the user types something in the selectOneMenu, the textarea should not be updated.
I thought I could work this with ajax event out. However, I don't know which event I can use here. I only know the valueChange event. Are there any other events, like onSelect or onKeyUp?
Here is my code:
<p:selectOneMenu id="betreff" style="width: 470px !important;"
editable="true" value="#{post.aktNachricht.subject}">
<p:ajax event="valueChange" update="msgtext"
listener="#{post.subjectSelectionChanged}" />
<f:selectItems value="#{post.subjectList}" />
</p:selectOneMenu>
<p:inputTextarea style="width:550px;" rows="15" id="msgtext"
value="#{post.aktNachricht.text}" />
The PrimeFaces ajax events sometimes are very poorly documented, so in most cases you must go to the source code and check yourself.
p:selectOneMenu supports change event:
<p:selectOneMenu ..>
<p:ajax event="change" update="msgtext"
listener="#{post.subjectSelectionChanged}" />
<!--...-->
</p:selectOneMenu>
which triggers listener with AjaxBehaviorEvent as argument in signature:
public void subjectSelectionChanged(final AjaxBehaviorEvent event) {...}
I'd rather use more convenient itemSelect event. With this event you can use org.primefaces.event.SelectEvent objects in your listener.
<p:selectOneMenu ...>
<p:ajax event="itemSelect"
update="messages"
listener="#{beanMB.onItemSelectedListener}"/>
</p:selectOneMenu>
With such listener:
public void onItemSelectedListener(SelectEvent event){
MyItem selectedItem = (MyItem) event.getObject();
//do something with selected value
}
Be carefull that the page does not contain any empty component which has "required" attribute as "true" before your selectOneMenu component running.
If you use a component such as
<p:inputText label="Nm:" id="id_name" value="#{ myHelper.name}" required="true"/>
then,
<p:selectOneMenu .....></p:selectOneMenu>
and forget to fill the required component, ajax listener of selectoneMenu cannot be executed.
You could check whether the value of your selectOneMenu component belongs to the list of subjects.
Namely:
public void subjectSelectionChanged() {
// Cancel if subject is manually written
if (!subjectList.contains(aktNachricht.subject)) { return; }
// Write your code here in case the user selected (or wrote) an item of the list
// ....
}
Supposedly subjectList is a collection type, like ArrayList. Of course here your code will run in case the user writes an item of your selectOneMenu list.