Dynamically created Div did not get updated after calling rerender event - jsf

I am using RichFaces 3.3.x and Tomahawk. I have an input field which has a4j:support on onkeyup and I am using 'process' to update the backing bean. Afterwards I use 'reRender' to get my backing bean (freshly) created div. Unfortunately the getter of the session scoped bean created Div is not called! What should I do?
<t:inputText id="searchString"
value="#{beans.searchString}"
onkeydown="if (event.keyCode == 13) { return false; }">
<a4j:support event="onkeyup" requestDelay="200" ajaxSingle="true"
reRender="resultsDiv" eventsQueue="quicksearchqueue"
ignoreDupResponses="true"
process="searchString"
/>
</t:inputText>
<t:div id="results" binding="#{bean.resultsDiv}" />

Firstly, the id you put in a4j:support to reRender is "resultsDiv" which is different from "results" id of .
If this is not the origin of your problem, try to put the region you want to update within ajax inside an ajax rendered outputPanel, example:
<a4j:outputPanel id="resultsDiv" ajaxRendered="true" >
<t:div id="results" binding="#{bean.resultsDiv}" />
</a4j:outputPanel>
And of course use the outputPanel's id in the reRender value of a4j:support

Except for the wrong ids in the code above, I had the same problem. I used a rich:tree and the reRender attribute to rerender a dynamic generated div component. It simply did not work. If you use a rich:panel instead of the div component, it will work just fine:
<t:inputText id="searchString"
value="#{beans.searchString}"
onkeydown="if (event.keyCode == 13) { return false; }">
<a4j:support event="onkeyup" requestDelay="200" ajaxSingle="true"
reRender="results" eventsQueue="quicksearchqueue"
ignoreDupResponses="true"
process="searchString"
/>
</t:inputText>
<rich:panel id="results" binding="#{bean.yourPanel}" />
In the backing bean you put your generated div as a child to the rich panel component like this:
yourPanel.getChildren().add(yourGeneratedDiv);
I have no idea why it does not work with the t:div component though. Any answer on this would be appreciated.

Related

How to attach an ajax event to a non-ClientBehaviorHolder component

In a form I have a p:inputText and a p:colorPickeras following :
<h:outputText value="#{messages.titre}" />
<p:inputText value="#{beanPlanningRessource.equipe.typeRessource.titre}">
</p:inputText>
<h:outputText value="#{messages.couleur}" />
<p:colorPicker value="#{beanPlanningRessource.equipe.typeRessource.couleur}">
</p:colorPicker>
And I have a p:commandButton which call a managedBean method as following :
<p:commandButton widgetVar="ajouter_equipe"
style="visibility: hidden;"
actionListener="#{beanPlanningRessource.ajouterEquipe()}" process="#this"
update=":#{p:component('dataTableEquipe')}, :#{p:component('formEquipe')}, :msgs" >
</p:commandButton>
The problem here is that the value in the p:inputText and p:colorPicker are always null in the managed bean, so in the p:inputText I added this line :
<p:ajax event="change" process="#this" />
and nowbeanPlanningRessource.equipe.typeRessource.titre is updated with the value in the p:inputText.
The problem I still have is that the p:colorPicker is a non-ClientBehaviorHolder component so I can't attach p:ajax to it and neither a f:ajax', so the value attached to thep:colorPicker:(beanPlanningRessource.equipe.typeRessource.couleur`) is always null.
How can I solve this?
Beside jquery you can also use the valueChangeListener
html:
<p:colorPicker valueChangeListener="#{beanPlanningRessource.colorChanged}" value="#{beanPlanningRessource.equipe.typeRessource.couleur}"/>
bean:
colorChanged(ValueChangeEvent event){
String newColor = event.getNewValue();
//do whatever you want with the new value
}

how to rerender a4j:commandLink after the action has been completed

i have a very simple code here:
<a4j:commandLink action="#{ticketAboxEventHelper.removeAboxTicket(ticketAbox)}"
onclick="if(!confirm('Are you sure ... ?')) return false;"
reRender="aboxlistpanel">
<h:graphicImage alt="Delete" url="../../img/dialog-error-5.png" title="Delete" />
<a4j:support event="oncomplete"
action="#{editTicketNewAction.testRerender()}"
reRender="aboxlistpanel"
/>
</a4j:commandLink>
When the link clicked the system must
ask if the user is confirmed
do the action
rerender the aboxlistpanel
Now my problem is the rerendering is hapenning before the action is getting finished. any idea how it can be done in the right way?
Your action methods is not valid for JSF 1.2 and you don't need the <a4j:support>. Since you want to pass a parameter, you should use <f:attribute /> and actionListener :
<a4j:commandLink actionListener="#{ticketAboxEventHelper.removeAboxTicket}" onclick="if(!confirm('Are you sure ... ?')) return false;" reRender="aboxlistpanel">
<h:graphicImage alt="Delete" url="../../img/dialog-error-5.png" title="Delete" />
<f:attribute name="ticket" value="#{ticketAbox}" />
</a4j:commandLink>
Your bean method will look like this :
public void removeAboxTicket(ActionEvent event)
{
TicketAbox ticket = (TicketAbox)event.getComponent().getAttributes().get("ticket");
// Your business logic
}
More info :
How to pass parameters in method expression JSF 2.0
Solved. I wrapped the offending JSF code in a and everything began working as expected. related to answer <a4j:commandLink> Not Rerendering. i solved it first and then found out someone else solved it in the same way. hmmm....

Jsf calling bean method from input text when pressing enter

JSF 2.0, Mojarra 2.0.1, PrimeFaces 3.4.1
Here is a p:inputText component which is expected to call a backing bean method when the enter key is pressed.
<p:inputText id="commentInput" rendered="#{status.haveComment}"
value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
<f:ajax event="change" listener="#{statusBean.test}" />
</p:inputText>
While backing bean has the method of:
public void test(AjaxBehaviorEvent event) {
System.out.println("Pressed enter!");
}
It's calling method when enter key is pressed but it has more than this; unexpected behaviour case:
--Click input text
----Type some letters
------Click somewhere else in the page
--------CONSOLE: Pressed enter!
I think ajax event=change detects a change somehow and calls the method. How to convert this p:inputText component into a proper comment taker component like Facebook or others has?
This is the way how onchange event works in HTML. It is happening when text in input element is changed, but is fired when component loses focus (in your case that is the moment when you click somewhere else in the page).
You can define p:remoteCommand for test method and just write:
<p:remoteCommand name="test" actionListener="#{statusBean.test}"/>
<p:inputText id="commentInput" rendered="#{status.haveComment}"
value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { test(); return false; }"/>
and in backing bean:
public void test() {
System.out.println("Pressed enter!");
}
With newer PrimeFaces versions (5+ at least) you can use p:defaultCommand instead of scripting. Though you can't use p:remoteCommand then, because p:defaultCommand needs something clickable.
<p:inputText id="input" />
<p:defaultCommand target="submit" />
<!--you can show the button to allow the user to click too, or hide it with display: none-->
<p:commandButton id="submit" style="display: none;" process="input" />
By default p:defaultCommand applies to the whole form. You could limit it with the scope attribute.

richfaces tooltip for inputtext

I want to have a tooltip for an inputtext and I need the tooltip to be updated when I complete the inputtext. I place this elements inside a form.
The inputtext takes the value from a backing bean, and the value is set in the bean only when I submit the form. Yhe tooltip also takes the value from the bean.\
Here is some code I use (of course, it is not working):
<h:inputText id="inp" value="#{individual.givenName}">
<a4j:support event="onchange" reRender="inp" />
</h:inputText>
<rich:toolTip id="inp_tip">#{individual.givenName}</rich:toolTip>
I want the tooltip to be updated when I type some text. Any idea how I can do this?
Thanks!
You can get the tooltip updated by implementing something like this:
<a4j:region id="a4jRegion">
<h:panelGroup layout="block" id="divTooltipInputText">
<h:inputText id="inp" value="#{individual.givenName}">
<a4j:support event="onchange" reRender="divTooltipInputText" />
</h:inputText>
<rich:toolTip for="inp" id="inp_tip">#{individual.givenName}</rich:toolTip>
</h:panelGroup>
</a4j:region>
The a4j:region will limit the processing on the onchange event to just the inputText and toolTip.

Can't rerender component which is bulilt through foreach

i have a div which consists of set of checkboxes built through foreach as follows:
<ice:panelGroup id="myDiv">
<c:forEach items="#{myBean.myCheckBoxes}" var="entry" varStatus="loop">
<input type="checkbox" name="myCheckBoxes" value="#{entry.value}" />
<span class="#{fn:contains(entry.value,'g') ? 'bold-style' : ''}">#{entry.key}</span>
</c:forEach>
</ice:panelGroup>
and i have an icefaces button in the same form of that div, and the button makes partial submit, i don't want to make full form submit.
<ice:commandButton value="Find" action="#{myBean.find}" partialSubmit="true">
<f:ajax execute="#this" render="myDiv" />
</ice:commandButton>
the search method:
public void find() {
// changes the map of the iteration
}
what happens, is that after executing search some components doesn't get removed from the div, although that they are not in the map, guess that the div is not getting refreshed/populated with data correctly, please advise, thanks.
solved by using ui:repeat instead of foreach.

Resources