I am using JSF 1.2 and Richfaces 3.3.3 , I've tried
<a4j:region>
<t:selectOneMenu id="comp1" value="#{bB.selectedTeam}" style="width: 200px">
<t:selectItems value="#{bB.teams}" var="team" itemLabel="#{team.desc}" itemValue="#{team.code}"/>
<a4j:support event="onchange" reRender="comp2"/>
</t:selectOneMenu>
but didn't work.
comp1 is a Dojo combobox component and it doesn't do anything when onchange event happens.
JSF doesn't keep track of plain HTML. If you want to be able to rerender something it has to be wrapped in a component, like <a4j:outputPanel> and then you have to rerender that component.
it turned out the html object rendered by <t:selectItems> was transformed to a dijit component when page loads, that conversion to dojo in javascript side does that the user won't interact with the object we indicated to do ajax call in the event onchange through
<a4j:support event="onchange" reRender="comp2"/>
so the solution was to use in order to attach the event to the dojo component in javascript browser side.
Related
<p:selectBooleanCheckbox value="#{dropdownView.value}">
<p:ajax update="msgs" listener="#{dropdownView.add}" />
</p:selectBooleanCheckbox>
In primefaces I am able to call bean method to perform action on click of checkbox with the above code.
But I am unable to call bean method to perform action on click of selectBooleanCheckbox in Bootsfaces.
Can anyone please help regarding how to successfully call a bean method which displays message true or false onclick of selectBooleancheckbox in Bootsfaces.
I have tried this, but it's not working:
<b:selectBooleanCheckbox value="#{dropdownView.value}"
update="msgs" onchange="ajax:ajaxBean.add()" />
I am new to bootsfaces. Any help would be appreciated.Thank you
The BootsFaces showcase has an example how to use AJAX with checkboxes. Our example uses onclick instead of onchange. Other than that, everything seems to be identical. I didn't check that yet, but it's possible b:checkbox doesn't support onchange (although I don't see why not - we've implemented both events).
By the way, the other approach using f:ajax / p:ajax and a listener should work, too. But we've added this feature later, so we don't guarantee that the traditional JSF style of AJAX always works with BootsFaces.
I have a Primefaces editor on my page and I want to submit the content to the server when the user focuses on a different component on the page.
<p:editor value="#{}">
<p:ajax />
</p:editor>
This works find for example with p:inputText, but with the editor I get this error:
Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
I also tried adding the onchange attribute to the p:editor and calling a remoteCommand to submit the content, like this:
<p:editor widgetVar="documentation" onchange="submitDocumentation" />
<p:remoteCommand name="submitDocumentation" process="#parent" update="#none" />
That works, but on every single keystroke. I only want to submit the content of the editor when the focus is lost.
Is it possible to use Ajax to submit the content of a Primefaces Editor when focus is lost?
Using Tomcat 7, Mojarra and Primefaces 4.0
You can do it in the next way.
$(document).ready(function() {
//documentation is the editor widgetVar
PF('documentation').jq.find("iframe").contents().find('body').blur(function(){
submitDocumentation();//remoteCommand
});
});
I have a problem with these two commandButton : Join and Leave.
I want to hide Join if I click on leave and vice-versa.
When I put ajax on false, there is no problem (but all the page is refresh and I don't find this optimal).
But when ajax attribut is on true with specific updating (cf comment in the code), the rendering is good but the new button whitch appear become inactive. If I click on it, nothing happens (well it's seems the actionListener trigger but the view is not refreshed, I have to manual refresh to see the difference)
Thanks for reading.
<h:form id="formWaitingList" rendered="#{connexion.connected}" >
<p:commandButton id="Join"
actionListener = "#{connexion.joinWaitingList()}"
rendered="#{!connexion.waiting}"
ajax="false"
<!-- ajax="true"
update="Join,Leave"-->
value="Join"/>
<p:commandButton id="Leave"
value="Leave"
ajax="false"
<!-- ajax="true"
udpate="Join,Leave"-->
rendered="#{connexion.waiting}"
actionListener ="#{connexion.leaveWaitingList()}" />
</h:form>
It seems that you're not entirely familiar with HTML/JavaScript. You know, JSF is basically a HTML/JavaScript(/CSS) code generator. Ajax updating works basically like this in JavaScript:
After sending the ajax request to JSF via XMLHttpRequest, retrieve a XML response which contains all elements which needs to be updated along with their client IDs.
For every to-be-updated element, use document.getElementById(clientId) to find it in the current HTML DOM tree.
Replace that element by new element as specified in ajax XML response.
However, if a JSF component has not generated its HTML representation because of rendered="false", then there's nothing in the HTML DOM tree which can be found and replaced. That totally explains the symptoms you're "seeing".
You basically need to wrap conditionally rendered JSF components in a component whose HTML representation is always rendered and then reference it instead in the ajax update.
For example,
<h:form>
...
<h:panelGroup id="buttons">
<p:commandButton ... update="buttons" rendered="#{condition}" />
<p:commandButton ... update="buttons" rendered="#{not condition}" />
</h:panelGroup>
</h:form>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Hi I have a graphicalImage and I want a method in the backingBean to be fired up on clicking on the image.Below is the code snippet that i am using but it is not working. Please help.
<h:graphicImage value="../resources/images/delete_button.png"
onclick="editBean.deleteStudyPlan"
style="float:center;height: 18px; width:20px;"
title="Delete the studyplan"/>
You need to wrap it in a <h:commandLink> or <p:commandLink> and specify the action there.
<h:commandLink action="#{editBean.deleteStudyPlan}">
<h:graphicImage ... />
</h:commandLink>
Alternatively, you can just specify the image as a CSS background image of the command link or button.
The onclick surely isn't a method expression to a JSF backing bean action method. It's a JavaScript function handler. JavaScript is an entirely different language which runs in the webbrowser, working on the HTML code produced by JSF.
So, let me show us my troubles :)
1 - When i click on a commandbutton
<h:commandButton value="Somethings">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax render="rendering"/>
</h:commandButton>
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle (allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
2 - When i click on image
<h:graphicImage value="img/img.png" alt="img">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="onclick" render="rendering"/>
</h:graphicImage>
This doesnt work. Why?
As usual, thanks for the help!!!!
1 - When i click on a commandbutton
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle
The f:setPropertyActionListener will be executed in the 5th phase as well.
(allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
The f:ajax just changes the behaviour from a synchronous submit to asynchronous (partial) submit. It does that by generating some additional JavaScript code to the desired event attribute of the parent component (e.g. onclick, onchange, etc, look in generated HTML output in webbrowser). It doesn't change anything in the JSF lifecycle. Only the rendered response will be a partial response which is exactly the part which is to be updated in the component(s) with ID as definied in render attribute.
2 - When i click on image
This doesnt work. Why?
Because the h:graphicImage does not support f:setPropertyActionListener at all. It only works in UICommand components.
You want to wrap it in a h:commandLink instead.
<h:commandLink>
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="action" render="rendering"/>
<h:graphicImage value="img/img.png" alt="img"/>
</h:commandLink>
(and if necessary style the border/underline caused by generated <a> element away with CSS)