I am working with MyFaces/Primefaces and I have a problem to get information using ajax.
My page contains a list of panel, inside each panel, the user can select value in a dropdown list, and click on a checkbox which will update its panel (Ajax), I hope I am clear.
This is my code:
<p:panel>
...
<h:selectOneMenu id="beanSet" value="#{myBean.selectedSet}">
<f:selectItem itemLabel=" " noSelectionOption="true" />
<f:selectItems value="#{langSet}" />
</h:selectOneMenu>
<h:selectBooleanCheckbox
id="chkbxBeanSet"
value="#{myBean.selectedSetChkbx}" >
<p:ajax
event="click" render="#parent"
listener="#{action.updateSet}"
execute="#form"
immediate="true"
/>
</h:selectBooleanCheckbox>
...
<p:panel>
And here my java code:
public void updateSet(AjaxBehaviorEvent e) {
UIComponent source = (UIComponent)e.getSource();
System.out.println("Value:"+((HtmlSelectBooleanCheckbox)source).getValue());
UIComponent parent = source.getParent();
List<UIComponent> children = parent.getChildren();
HtmlSelectOneMenu lvSet = (HtmlSelectOneMenu)parent.findComponent("beanSet");
Object value = lvSet.getValue();
System.out.println("value: " + value);
I get the beanSet component, but I can't get its value. As I understand, the getValue calls the getSelectedSet from myBean which is not set (it is in request scope).
I don't understant how I can get the selected value in the dropdown list using ajax.
Another way is to post all the form, but in that case, I have to determine which checkbox was clicked by the user...
If someone can explain me where I am wrong?
The culprit is immediate="true" on the ajax action. This will skip all input components which do not have this attribute set during the processing. You should finetune the to-be-processed components in the process attribute of <p:ajax>. Yes, another culprit is that you used execute instead of process. The <p:ajax> uses process where <f:ajax> uses execute. Also, the way how you accessed the dropdown value is unnecessarily overcomplicated. Just access the selectedSet property directly. JSF will set it in the same bean anyway.
So, this should do
<h:selectOneMenu id="beanSet" value="#{myBean.selectedSet}">
<f:selectItem itemLabel=" " noSelectionOption="true" />
<f:selectItems value="#{langSet}" />
</h:selectOneMenu>
<h:selectBooleanCheckbox id="chkbxBeanSet" value="#{myBean.selectedSetChkbx}">
<p:ajax process="#this beanSet" listener="#{action.updateSet}" update="#parent" />
</h:selectBooleanCheckbox>
with
public void updateSet() {
System.out.println(selectedSet);
}
Note that I omitted event="click" from <p:ajax>. It's already the default for checkboxes.
place this (listener is optional) , the <f:ajax event="change" is what you need the most
<f:ajax event="change" render="IdsOfComponentToRender" listener="#{myBean.someMethod}" />
inside your <h:selectOneMenu id="beanSet" value="#{myBean.selectedSet}">
this is the signature of the listener
public void someMethod(AjaxBehaviorEvent ev) {...
b.t.w what is that updateLvSet method , and where you call it , and you should not access you data that way...
Related
I have a problem and I need your helps!!! I want to get selected value of p:selectOneListbox when I click on a tree, but the value is always null, even though I clicked on p:selectOneListbox first. Here is my xhtml code:
<h:form>
<p:selectOneListbox id="selectRole"
value="#{grandUseAuthoritiesBean.selectedRoleId}"
filter="true" filterMatchMode="contains">
<f:selectItems value="#{grandUseAuthoritiesBean.roleList}"
var="role" itemLabel="#{role.code}" itemValue="#{role.roleId}" />
</p:selectOneListbox>
<p:tree value="#{grandUseAuthoritiesBean.root}"
selectionMode="single" var="node"
style="font-size:13px; width:100%;border-width:0">
<p:treeNode icon="ui-icon-calculator">
<h:outputText value="#{node}" />
</p:treeNode>
<p:ajax event="select" update="#([id$=privilegeChecbox])"
listener="#{grandUseAuthoritiesBean.onNodeSelect()}">
</p:ajax>
</p:tree>
</h:form>
and here is my manage bean's code:
public String selectedRoleId;
public String getSelectedRoleId() {
return selectedRoleId;
}
public void setSelectedRoleId(String selectedRoleId) {
this.selectedRoleId = selectedRoleId;
}
public void onNodeSelect(NodeSelectEvent event) {
if (selectedRoleId!=null)
System.out.println("selected Role Id: "+ this.selectedRoleId);
}
I can't print the variable "selectedRoleId" coz it is null but if I use a button'method to call this variable, I can get its value. What should I do? Thanks for reading my question!
The thing is when you choose something from listbox it is not visible inside backing bean until you send a form or do a partial sending so hence null value. Add partial processing to <p:selectOneListbox> and check again:
<p:ajax process="#this" partialSubmit="true" />
Also similar topic:
https://stackoverflow.com/a/14988129/3803447
I have a grid group that should be rendered when change the value of the selectOneMenu. I have attached a valueChangeListener to the selectOneMenu and it access succefully the function assigned to it , but the html component does not rerender. the strange thing that the flag the determines the rendering is called anyway.
<h:selectOneMenu value="#{channelsAdmin.profileID}" id="profileDrp" valueChangeListener="#{channelsAdmin.setProfileInit}">
<f:selectItems value="#{channelsAdmin.profiles}" var="Profile"
itemLabel="#{Profile.profileName}"
itemValue="#{Profile.profileId}" />
<f:ajax execute="#this" immediate="true" render="pnl"></f:ajax>
</h:selectOneMenu>
<h:panelGroup id="pnl" rendered="#{channelsAdmin.ccpAuthPanelFlage}">
<h:inputText id="sest" value="hew">
</h:inputText>
</h:panelGroup>
Bean:
public void setProfileInit(ValueChangeEvent e) {
ccpAuthPanelFlage=true;
ccpPurchPanelFlage=true;
}
The <f:ajax render="pnl"> works roughly as follows:
When the ajax response is arrived, obtain the update element with id="pnl" from XML response.
Now obtain the element with id="pnl" from HTML document by document.getElementById().
Replace its contents with the update element from XML response.
In your particular case, step 2 failed because there's no such element in the HTML document. It doesn't exist in the HTML document because it's never been rendered in first place.
You need to make sure that <f:ajax render="..."> refers an element which is always rendered so that JavaScript can find it by document.getElementById() in order to replace its contents.
<h:selectOneMenu value="#{channelsAdmin.profileID}" id="profileDrp" valueChangeListener="#{channelsAdmin.setProfileInit}">
<f:selectItems value="#{channelsAdmin.profiles}" var="Profile"
itemLabel="#{Profile.profileName}"
itemValue="#{Profile.profileId}" />
<f:ajax execute="#this" immediate="true" render="pnl"></f:ajax>
</h:selectOneMenu>
<h:panelGroup id="pnl">
<h:panelGroup rendered="#{channelsAdmin.ccpAuthPanelFlage}">
<h:inputText id="sest" value="hew">
</h:inputText>
</h:panelGroup>
</h:panelGroup>
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
I trying to use the onChange event of selectOneMenu, but it doesn't work and the component is not displayed when I add onChange attribue.
Can someone tell me how can I handle the onChange event of <p:selectOneMenu>?
Here is my view:
<p:selectOneMenu id="service" filterMatchMode="startsWith">
<f:selectItem itemLabel="Selectionner un Service : " />
<f:selectItems value="#{newOpProgramme.listeSevice}" var="service" itemValue="#{service.serviceId}" itemLabel="#{service.serviceNom}"/>
<f:ajax event="change" execute="#this" listener="#{newOpProgramme.serviceChange()}" render="nomCdp"/>
</p:selectOneMenu>
And here is the <f:ajax listener> method in a request scoped bean:
public void serviceChange() {
System.out.println("change");
}
When I change the menu, however, nothing is been printed.
How is this caused and how can I solve it?
First of all, onChange is the wrong event name. It's change. Secondly, if you intend to call the HTML attribute name, onChange is also the wrong attribute name. It's onchange.
Coming back to your concrete problem; the standard JSF <f:ajax> is not compatible with PrimeFaces components. You should be using PrimeFaces own <p:ajax> instead.
<p:selectOneMenu ...>
...
<p:ajax listener="#{newOpProgramme.serviceChange()}" update="nomCdp" />
</p:selectOneMenu>
Note that I omitted the event and the process attributes. They both have already the right default value of valueChange and #this respectively.
See also:
What values can I pass to the event attribute of the f:ajax tag?
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
When I want to update something after change in selectOneMenu, I use <f:ajax> tag inside selectOneMenu like this:
<h:selectOneMenu value="#{bean.selected}" >
... select items here
<f:ajax event="change" execute="#this" render="search" />
</h:selectOneMenu>
Where search is the Id of the object you want to update.
Other solution is that you should try onchange not onChange.
<p:selectOneMenu value="#{someBean.myAttr.id}" valueChangeListener="#someBean.mySelectioMethodListener}">
<f:selectItems value="#{someBean.listAttrs}" var="item"
itemLabel="#{item.name}" itemValue="#{item.id}" />
<p:ajax process="#this" update="someElementId" />
</p:selectOneMenu>
You must put an Id for <f:selectItems /> and set your selection on backing bean side by posted ajax itemValue (id).
Server side method bean without a converter:
public void mySelectionMethodListener(ValueChangeEvent event) {
ApplicationContext context = FacesContextUtils.getWebApplicationContext(FacesContext.getCurrentInstance());
SomeBeanDao someBeanDao = (SomeBeanDao) context.getBean(SomeBeanDao.class);
myAttr = someBeanDao.byId((Long) event.getNewValue());
System.out.println("value changed...");
}
I have a table that uses a radio button to select a row. When the radiobutton is clicked ajax executes some code to update another field and then render the form. Everything works fine, except that the radio selection disappears and all the radio buttons are unselected. I'm not sure why this is happening? The button was clicked so the value shouldn't change. And it's not the onchange javascript, I removed that as a test and still the same problem. I also can't just render the updated field because it's separate from the code below, I get a servlet exception - unknown id error (maybe someone could tell me how to get around that also?)
<h:dataTable id="addClient" styleClass="dataTable"
value="#{AddEntryMB.clientValues}" var="c" binding="#{AddEntryMB.dataTable}"
rendered="#{AddEntryMB.renderClientTable}">
<f:facet name="header" >
Select Client to Associate with Appointment
</f:facet>
<h:column>
<f:facet name="header">Select</f:facet>
<h:selectOneRadio valueChangeListener="#{AddEntryMB.setSelectedItem}"
immediate="true" onchange="dataTableSelectOneRadio(this);" >
<f:selectItem itemValue="null" />
<f:ajax event="click" render="#form"/>
</h:selectOneRadio>
</h:column>
Look like the value of your selection isn't saved in the backing bean.
First you should bind your h:selectOneRadio component to a backing bean value:
<h:selectOneRadio valueChangeListener="#{AddEntryMB.setSelectedItem}"
value=#{c.radioValue}
immediate="true" onchange="dataTableSelectOneRadio(this);" >
then try to process the dataTable within your ajax like:
<f:ajax event="click" render="#form" execute="addClient"/>
Also I would also add an itemLabel beside itemValue to see what is selected:
<f:selectItem itemValue="null" itemLabel="NULL"/>
It gets unselected because the value is not been set in a model value and the form get refreshed by ajax. You could prevent the unselection by binding the value to the model.
<h:selectOneRadio ... value="#{AddEntryMB.selected[c.id]}">
with
private Map<Long, Boolean> selected = new HashMap<Long, Boolean>(); // +getter
In this example, I assume that the type represented by #{c} has a private Long id property which represents the unique ID.
I'm running in a little issue here regarding jsf related dropdown selection.
I have 2 dropdown selection: the first one is independent, the second one shows result depending from This is the code:
<h:panelGroup id="addressPanel">
<h:outputLabel styleClass="label" value="Provincia: " />
<h:selectOneMenu onchange="updateCombos()"
value="#{indirizzoCtrl.codiceProvincia}" >
<f:selectItem itemValue="" itemLabel=""></f:selectItem>
<f:selectItems value="#{indirizzoCtrl.allProvincia}" var="c"
itemLabel="#{c.nome}" itemValue="#{c.siglaProvincia}" />
</h:selectOneMenu>
<h:outputLabel styleClass="label" value="Comune: " />
<h:selectOneMenu
value="#{indirizzoCtrl.codiceComune}" >
<f:selectItem itemValue="" itemLabel=""></f:selectItem>
<f:selectItems value="#{indirizzoCtrl.allComuni}" var="c"
itemLabel="#{c.descrizione}" itemValue="#{c.codiceComune}" />
</h:selectOneMenu>
</h:panelGrid>
</h:panelGroup>
<p:remoteCommand name="updateCombos" update="addressPanel masterForm:msg" />
<p:commandButton styleClass="commandButton" value="Save"
actionListener="#{indirizzoCtrl.save}">
</p:commandButton>
Well, when the user save the form after selecting both the value, the managed bean indirizzoCtrl (request scoped) cannot map the value of the second dropdown back to the list, because there's no list.
In fact the #{indirizzoCtrl.allComuni} call a getter that retrieve the data from the DB only if indirizzoCtrl.codiceProvincia!=null... and that's false before the update model phase.
So the first time the getter for the list is called cannot retrieve any values, and that's bring the update model phase to fail.
How can I handle this scenario... I think it's a pretty common one, so I'm missing something here...
Put the bean in the view scope instead. It will live as long as you're interacting with the same view by ajax. A request scoped bean get indeed recreated on every single request, also ajax requests, so bean properties would reinitialize to their defaults.
#ManagedBean
#ViewScoped
public class IndidizzoCtrl implements Serializable {
// ...
}
See also:
How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu
How to choose the right bean scope?
Unrelated to the concrete problem, I also strongly recommend to change your getter methods to not do any business job, but just return data. Do the business job in (action)listener methods instead. E.g.
<h:selectOneMenu value="#{bean.menu1item}">
<f:selectItems value="#{bean.menu1items}" />
<f:ajax listener="#{bean.updateMenu2}" render="menu2" />
</h:selectOneMenu>
<h:selectOneMenu id="menu2" value="#{bean.menu2item}">
<f:selectItems value="#{bean.menu2items}" />
</h:selectOneMenu>
with
public void updateMenu2() {
menu2items = loadItBasedOn(menu1item);
}
See also:
Why JSF calls getters multiple times