Why does the ajax event not fire? - ajax

I've got a primeface tree in my application. I tried to load all data att once it it jsut to much 2500 object, only some are used. So I tried to implement som sort of lazy loading. The first level is loaded on start and I would like to load the neccessary data when expanding the node. I googled some examples and modified it for my purpose. But in my case the ajax does not fire. what am i missing here?
the xhtml part
<h:form>
<p:panel id="add_elev2list"
header="lägg till elev"
collapsed="true"
toggleable="true">
<p:tree value="#{bookb.root}"
var="node"
dynamic="true" >
<p:ajax event="select"
update="#this"
listener="#{bookb.onNodeSelect}"/>
<p:treeNode >
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
</p:panel>
</h:form>
Before loading the first level of tree is build by
public void triggerTreeBuild() {
root = new DefaultTreeNode("Root", null);
ObjectContainer localdb = dbConnector.connDB();
ObjectSet<sbasUserList> res;
Query query = localdb.query();
query.constrain(sbasUserList.class);
//query.descend("klass").constrain(true);
res = query.execute();
for(sbasUserList sbu : res ){
if(sbu.isKlass()) {
TreeNode node0 = new DefaultTreeNode(sbu.getGroupname(), root);
node0.getChildren().add(new DefaultTreeNode("head"));
}
}
localdb.close();
}
which works fine. The ajax event should trigger this but it don't happen.
public void onNodeSelect(NodeSelectEvent nee){
log("expand"); //wrapper for System.out.println ... for some sort of debugging.
sbasUserList sbu = (sbasUserList) nee.getTreeNode().getData();
String[] allstd = sbu.getAllusers().split(",");
ObjectContainer localdb = dbConnector.connDB();
for(String persnum : allstd){
nee.getTreeNode().getChildren().add( new DefaultTreeNode(
getUserbyPersnum(localdb,persnum).getRealname()));
}
localdb.close();
}
Any idea why?
Best regards
Ralf
using tomcat 7.0.52 JSf 2.2 and primefaces 4.0

Due to you did not set attribute selectionMode="single".
<p:tree value="#{treeBasicView.root}"
var="node"
dynamic="true"
selectionMode="single">
<p:ajax event="select" listener="#{treeBasicView.onNodeSelect}" />
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>

Related

Why does PrimeFaces 5.3 not call my listener function when I catch the "blur" and "focus" events?

My intention was to show information on filling a text area component. When it gets the focus I show the info, when it loses the focus I clear the info. I do not want to proccess any input value just catch the focus and blur events and call the listener and show/clear the message.
I have read BalusC's comment on conditional rendering so I put my conditional text message to an "always rendered" JSF component.
My "always rendered" f:outPutPanel component is shown in the generated XHTML code but my listener function is never called. As far as I know the method signature of primefaces listener is just void somefunction() not like in jsf ajax listener.
I also read BalusC's comment about including #this for the proccess attribute but in my case it seems not to be reasonable as I do not want to catch any input values.
I am newbie to JSF and primefaces so any help is appreciated.
My relevant view snippet:
<h:form>
<h:panelGroup layout="block" id="info">
<h:outputText rendered="#{ebookController.infoMessage != null}" value="#{ebookController.infoMessage}"/>
</h:panelGroup>
....
<p:inputTextarea id="description" styleClass="form-control vspace" required="true" requiredMessage="Kérlek, add meg az e-könyv rövid leírását" value="#{ebookController.newEbook.description}" rows="20" cols="30" counter="display" maxlength="500" counterTemplate="{0} karakter lehet még" autoResize="false" validatorMessage="Az e-könyv leírása maximum 500 karakterből állhat">
<f:validateLength maximum="500"/>
<p:ajax event="focus" process="#none" update="info" listener="#{ebookController.setTextAreaInfoMessage()}"/>
<p:ajax event="blur" process="#none" update="info" listener="#{ebookController.clearInfoMessage()}"/>
</p:inputTextarea>
<h:outputText id="display" />
</h:form>
My relevant java code:
#Named(value = "ebookController")
#SessionScoped
public class EbookController implements Serializable {
private String infoMessage;
public String getInfoMessage() {
return infoMessage;
}
public void setInfoMessage(String infoMessage) {
this.infoMessage = infoMessage;
}
public void setTextAreaInfoMessage(){
setInfoMessage("Tipp: Az e-könyved bemutatása során a fontos részeket emeld ki, és tagold a szöveget bekezdésekkel. Ha egy bekezdés végére értél, csak egy ENTER-t üss!");
}
public void clearInfoMessage(AjaxBehaviorEvent e){
setInfoMessage("");
}
....
}
Solution 1 : User f:ajax
<f:ajax immediate="true" event="focus" process="#none" render="info"
listener="#{ebookController.setTextAreaInfoMessage()}" />
<f:ajax immediate="true" event="blur" process="#none" render="info"
listener="#{ebookController.clearInfoMessage()}" />
Managed Bean
public void setTextAreaInfoMessage() {
System.out.println("setTextAreaInfoMessage");
setInfoMessage(
"Tipp: Az e-könyved bemutatása során a fontos részeket emeld ki, és tagold a szöveget bekezdésekkel. Ha egy bekezdés végére értél, csak egy ENTER-t üss!");
}
public void clearInfoMessage() {
System.out.println("clearInfoMessage");
setInfoMessage("");
}
Reference Problem with h:form and p:ajax

How to use f:selectItem properly with JSF2?

guys I need to update another selectOneMenu when the User selects one option of combo_pedido_tipoplm selectOneMenu. If the user selects the "Chose One" option it needs to clear the second one.
I've tried everything but I cant call my actionListener after I've selected the Option "Chose one" (Selecione) from my h:selectOneMenu.
XHTML
<h:selectOneMenu id="combo_pedido_tipoplm" value="#mBeanManterPedido.tipoPlacaMaeFiltro}" required="true" disabled="#{!mBeanManterPedido.pedidoValido or mBeanManterPedido.clonado}">
<f:selectItem itemLabel="#{msgTemplate.lblSelecione}" />
<f:selectItems value="#{mBeanManterPedido.selectItemsTipoPlacaMae}" />
<p:ajax event="change" listener="#{mBeanManterPedido.tipoPlacaMaeChange}" process="#this"/>
</h:selectOneMenu>
MBean
private TipoPlacaMae tipoPlacaMaeFiltro;
public void popularTipoPlacaMae() {
this.selectItemsTipoPlacaMae = new ArrayList<SelectItem>();
for (TipoPlacaMae tipoplaca : TipoPlacaMae.values()) {
this.selectItemsTipoPlacaMae.add(new SelectItem(tipoplaca, tipoplaca.getNome()));
}
UtilsCommon.orderByLabel(selectItemsTipoPlacaMae);
}
public void tipoPlacaMaeChange(AjaxBehaviorEvent e) {
// deseleciona a PlacaMae atualmente selecionada.
pedido.setPlacaMae(null);
limparDadosPedido();
popularPlacaMae();
}
if I select the option "Chose one" I got a validation error because this selectOneMenu is requeried and my setter for tipoPlacaMaeFiltro is not called.
<?xml version='1.0' encoding='UTF-8'?>
{"validationFailed":true}
What can I do about it ?
For those that have the same doubt.
You need to put the immediate="true" in your ajax request.
<h:selectOneMenu id="id"
value="#{mbean.value}" required="#{mbean.required}"
converter="#{mbean.converter}">
<f:selectItem itemLabel="Chose one" />
<f:selectItems value="#{mbean.selectItems}" />
<f:ajax event="valueChange" listener="#{mbean.onchange}"
render="second_combo"
immediate="true">
</f:ajax>
</h:selectOneMenu>
After that in the ManagedBean you need to implements but handle differently the listener
public void onchange(AjaxBehaviorEvent e) {
YourClass o = getSelectedValue(e);
}
private YourClass getSelectedValue(AjaxBehaviorEvent e)
{
if (e != null)
{
UISelectOne select = (UISelectOne) e.getSource();
if (select.getSubmittedValue() == null ||
select.getSubmittedValue().toString().isEmpty()) {
return null;
}
else {
String id = select
.getSubmittedValue().toString();
return ObjectThatImplementsConverterInterface.getAsObject(FacesContext.getCurrentInstance(), select, id);
}
}
return null;
}
Unfortunally you must handle that way because if you don't do the user can selects "Chose One" and the mbean.value will be OK (null) after that the second selection in the same SelectOneMenu will trigger with the previous selected value (null). I don't know if it happens with everybody or just me.
Bye.

Can you update an h:outputLabel from a p:ajax listener?

I'm trying to use a p:ajax tag and then in that listener, i'm setting a value called "periodRendered". then i'm trying to update an h:outputLabel tag via an update from the p:ajax tag. It's not updating ajaxily and i'm thinking it's because a primefaces ajax tag can't update a standard jsf outputLabel tag.
Is my assumption correct and is there a more appropriate tag i should be using instead of h:outputLabel ?
<h:outputLabel for="addProgramTo" value="Add Program To" />
<p:selectOneMenu value="#{ppBacker.grantProgram.grant_project_id}" id="addProgramTo" size="1" styleClass="listBoxMedium">
<p:ajax process=":addProgram:addProgramTo" update=":addProgram:periodGrid, :addProgram:periodLabel" event="change" listener="#{ppBacker.addProgramListener}" />
<f:selectItems value="#{ppBacker.grantProjectDropDownList}" />
</p:selectOneMenu>
<h:outputLabel for="period" value="Period" id="periodLabel" rendered="#{ppBacker.periodRendered}">
You cannot update elements which are not rendered , rendered=false "is a JSF way to" to remove elements from the DOM Tree ,
its not like css display:none or visibility:hidden <- this two will keep the elements in the DOM tree but hidden , while the JSF rendered=false wont even render (keep) the element in the DOM tree (you wont even see it in the "view source" of the page)
So in you case you need to wrap the outputLabel with `panelGroup' and update the id of the wrapper
<h:panelGroup id="periodLabelWrapper">
<h:outputLabel for="period" value="Period" id="periodLabel" rendered="#{ppBacker.periodRendered}">
</h:panelGroup>
and refer to the wrapper (which always be in the DOM tree) id in the <p:ajax update attribute, like this:
<p:ajax process=":addProgram:addProgramTo" update=":addProgram:periodGrid, :addProgram:periodLabelWrapper" event="change" listener="#{ppBacker.addProgramListener}" />
Another solution would be the update the entire form like this <p:ajax update="#form" ... that way you don't need the wrap the outputLabel
regarding your comment question
how does #form update the un-rendered elements, but targeting them directly through id's does not?
You can't target an element in update which is not present in the page (rendered=false) "its not there"
But when you use update="#form" or update="someWrapperID" the form/wrapper "re evaluates" all its inner elements , including the ones with rendered="#{someBean.someCondition}" and the condition gets "re evaluated" so if it result to true the elemet will be displayed...
I'm not sure the reason for this behavior, but I'm putting money on the fact that p:ajax is going to require an active target for the update to work. Here's an example of it working/not working:
<h:body styleClass="center">
<f:view contentType="text/html">
<h:form id="test">
<h:outputLabel for="addProgramTo" value="Add Program To: " />
<h:selectOneMenu id="addProgramTo" value="#{testScope.target}">
<p:ajax update=":test:periodLabel, :test:wrapper" event="change" process="#form">
</p:ajax>
<f:selectItems value="#{testScope.values}"/>
</h:selectOneMenu>
<hr />
<p:outputPanel id="wrapper">
<h:outputLabel value="Works, has a target" rendered="#{testScope.timeToRender}"/>
</p:outputPanel>
<hr />
<h:outputLabel value="does not work" id="periodLabel" rendered="#{testScope.timeToRender}" />
</h:form>
</f:view>
</h:body>
//Bean...
#ViewScoped
#ManagedBean(name = "testScope")
public class TestScope
{
private String[] values = { "False", "What?", "True" };
private String target = "Nothing";
/**
* #return the target
*/
public String getTarget()
{
return target;
}
/**
* #return the values
*/
public String[] getValues()
{
System.out.println(values);
return values;
}
public boolean isTimeToRender()
{
return "True".equals(target);
}
/**
* #param target the target to set
*/
public void setTarget(String target)
{
this.target = target;
}
}
I don't have the time to dig into this one, but from a quick look (again QUICK) in the debugger it looks like it doesn't find the ID (it isn't rendered) so it doesn't get the update. Why? I'm not sure--the easy workaround is to place it inside something you can update (p:outputPanel) and render it as a span, then your code should work. Is this acceptable? Not really...
If you can deal with a full form update the following will work as well ->
<p:ajax update=":test" event="change" process="#form">
Since you're targeting the enclosing form it updates all the children. If I was doing this, that is the workaround I'd use. It isn't a lot of data and it is a heck of a lot cleaner. I'm not sure if this a bug or a feature. It feels buggy though.
Short answer: yes you can target a label. Long answer: you can't target one that isn't rendered. I really hope this helps.

Updating a checkbox from a radio button

I am trying to add ajax behavior to selectoneradio with this code:
xhtml:
<h:selectOneRadio id="metalA" converter="metalConverter" value="#{backingBean.metal.metalCode">
<f:selectItems value="#{backingBean.metalCodeRadio}" />
<f:ajax listener="#{backingBean.updateMenu}" event="click" execute="metalA" render="metalTypeMenuA"/>
</h:selectOneRadio>
<p:outputPanel id="panelA">
<h:selectOneMenu id="metalTypeMenuA" converter="metalConverter" value="#{backingBean.order.metal}" rendered="#{teklifIslemleriBean.selectedITip == 1}">
<f:selectItems value="#{backingBean.metalDetailsMenu}" />
</h:selectOneMenu>
</p:outputPanel>
backing bean:
MetalCode selectedMK = null;
public void updateMenu(AjaxBehaviorEvent event) {
System.out.println("Entered to updateMenu method");
if (metal.getMetalKod()!= null) {
electedMK = aMetal.getMetalCode();
}
if (selectedMK != null) {
// metalTypeMenuA Combobox
List<Metal> metalList = aService.getAccToMetalCode(null, selectedMK);
System.out.println("MetalList:" + metalList.size());
metalTypeMenuA.clear();
for (Metal m : metalList) {
metalTypeMenuA.add(new SelectItem(m, "No:" + m.getMetalNo() + " ,Weight: " + m.getWeight();
}
}
}
However it does not even enter to the updateMenu method. instead of click I tried select, change, etc. I also tried to put a wrapper panel and update it instead of checkbox, still no good. What is wrong with above code? Is updating a checkbox with a change in radiobutton doable? Thanks in advance.
JSF 2.0 Primefaces 2.2.1
EDIT:
I added following
<h:message for="metalA" id="messaged"/>
<f:ajax listener="#{backingBean.updateMenu}" event="click" execute="metalKoduA" execute="metalA" render="messaged orderPG2"/>
orderPG2 is a wrapper around checkbox. But still I can get any error message in h:message or any ajax behavior is happening.
The render attribute of <f:ajax> should not point to a component which is by itself conditionally server-side rendered by rendered attribtue. Let it point to the closest parent which is always rendered instead.
<f:ajax listener="#{backingBean.updateMenu}" render="panelA" />
(note that I removed event="click" and execute="metalA" as those are the defaults already)
If that still doesn't work, then you'd need to read the server logs for any missing faces messages. Big change that you'll see a Validation Error: "Value is not valid" or perhaps a conversion error. To prevent those messages from being missed during ajax rendering, ensure that you're using <h:message> and/or <h:messages> the right way and that you also include them in the render of the <f:ajax>.
<h:selectOneRadio id="metalA" ...>
...
<f:ajax ... render="metalAmessage panelA" />
</h:selectOneRadio>
<h:message id="metalAmessage" for="metalA" />

JSF 2 f:ajax lifecycle problem

The problem is, that if a property is changed during an f:ajax request and a binded panelGroup should be newly created depending on that changed value, the old value is used.
This code will explain the problem.
Here is the backingbean TestBean:
public String getFirst() {
return first;
}
public void setFirst(String first) {
this.first = first;
}
public String getLast() {
return last;
}
public void setLast(String last) {
this.last = last;
}
public String getName(){
return first+" "+last;
}
public void setDynamicPanel(HtmlPanelGroup panel){ }
public HtmlPanelGroup getDynamicPanel(){
Application app = FacesContext.getCurrentInstance().getApplication();
HtmlPanelGroup component = (HtmlPanelGroup)app.createComponent(HtmlPanelGroup.COMPONENT_TYPE);
HtmlOutputLabel label1 = (HtmlOutputLabel)app.createComponent(HtmlOutputLabel.COMPONENT_TYPE);
label1.setValue(" --> "+getFirst()+" "+getLast());
component.getChildren().add(label1);
return component;
}
and now the jsf/facelet code:
<h:form id="form">
<h:panelGrid columns="1">
<h:inputText id="first" value="#{testBean.first}" />
<h:inputText id="last" value="#{testBean.last}" />
<h:commandButton value="Show">
<f:ajax execute="first last" render="name dyn" />
</h:commandButton>
</h:panelGrid>
<h:outputText id="name" value="#{testBean.name}" />
<h:panelGroup id="dyn" binding="#{testBean.dynamicPanel}" />
</h:form>
After the page was initially loaded the outputText and panelGroup shows both "null" as first and last. But after the button is pressed, the outputText is updated well, but the the panelgroup shows again only "null". This is due to the problem, that the "binded method" dynamicPanel is executed before the update of the first and last properties.
how can workaround this behaviour or what is wrong with my code?
If you add the attribute immediate="true" to your input elements, the values will be applied during the "Apply Request Values" phase, and hence be present before your action executes. You may or may not need the immediate attribute set to true on the commandButton as well.

Resources