I am trying to implement cascading drop down in JSF. listing down the things that i did below please help me
XHTML code:
<h:selectOneMenu value="#{bean.country_id}" id="countries">
<f:selectItem itemLabel="-- Select a Country -- " itemValue="0"/>
<f:selectItems value="#{bean.countries}" var="country" id="countryList"/>
<f:ajax event="change" listener="#{bean.getCityList}" execute="countries" render="cityList" />
</h:selectOneMenu>
<h:selectOneMenu value="#{bean.city_id}" id="cities">
<f:selectItem itemLabel="-- Select a City -- " itemValue="0"/>
<f:selectItems value="#{bean.cities}" var="city" id="cityList" />
</h:selectOneMenu>
The call is going to getCityList once we change the country and we are getting the countries value int that method too but the list returned in the getcitylist is not getting applied to the cityList and the xhtml is throwing error.
Please help me in this regard
Thanks
KK
Use render="cities" in f:ajax. You have to rerender the whole selectOneMenu to see the updated list in the view.
Related
I have a big problem with selectOnMenu in JSF2, i tried to use this component with but not working , i tested also the primefaces example http://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml but without any new result .
i think that i miss some config or filter about ajax in my project or my page.
Here is dropdown code:
<p:selectOneMenu style="width:300px;" value="#{parameterBean.name}">
<f:selectItem itemLabel="Select parameter Type" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{parameterTypeBean.listParameterTypes}" var="ptype" itemValue="#{ptype.id}" itemLabel="#{ptype.name}" />
<p:ajax listener="#{parameterBean.serviceChange}" event="change" update="pTable" process="#form"/>
</p:selectOneMenu>
This is my simple actionBean :
public void serviceChange() {
System.out.println("change");
}
Can you help me to resolve this problem ?
remove process="#form" so it would be
<p:ajax listener="#{parameterBean.serviceChange}" event="change" update="pTable"/>
I'm using JSF 2 and Primefaces 4 and have the following issue:
I've got the following code in my XHTML:
<h:form id="form">
<table>
<tr id="formats">
<td>Formats</td>
<td>
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelect" />
</p:selectBooleanCheckbox>
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</td>
</tr>
</table>
</h:form>
It outputs a checkbox and a select menu and what I expect is that when I check the checkbox the select menu should appear and should disappear when I uncheck it.... but nothing happens, I check and uncheck it and the select menu is unaffected.
In theory this should work since the selectBooleanCheckbox value is bound to the entity.formatted boolean value and the rendered value in the selectOneMenu is bound to the entity.formatted value and the p:ajax points to the correct id in the update attribute and the event is correct. This last bit I know since I created a listener in my bean that printed the value of formatted:
public void changeListener(){
System.out.println(this.entity.isFormatted());
}
And changed the p:ajax to:
<p:ajax event="change" update="formatsSelect" listener="#{bean.changeListener}" />
And it printed the value of formatted in the console.
What am I doing wrong?
Since you used rendered on the component (p:selectOneMenu id="formatsSelect") and updating the same component, it wont work.
Because that component might not have been added to/present in component tree by the time you are updating.
So use a h:panelGroup around it and update it and use rendered on p:selectOneMenu.
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelectPG" />
</p:selectBooleanCheckbox>
<h:panelGroup id="formatsSelectPG">
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</h:panelGroup>
We are using JSF 1.2 for our project. Requirement is to update another selectonemenu options based on a value change in the current selectonemenu.
Based on select1 option, select2 needs to be updated.
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" onchange="javascriptMethod()">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
<h:panelGroup id="panel2">
<h:selectOneMenu id="select2" value="#{subscription.subscriptions2}">
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
</h:panelGroup>
You can use ajax support like this
<h:selectOneMenu id="select1" value="#{subscription.subscriptions}" >
<f:selectItem id="item1" itemLabel="News" itemValue="1" />
<f:selectItem id="item2" itemLabel="Sports" itemValue="2" />
</h:selectOneMenu>
Jsf 1.2 doesn't have ajax support the only thing you can do is full page reload which happens on a command button.
I presumed you are using richfaces as a third party for ajax and rich ui components.
Hope this helps.
If you are using primefaces then you can replace tag with like this
<p:ajax event="onchange" update="select2" action="if you want to anything in
backend"/>
If you want to do by javascript then have a hidden h:commandButton and put code in your
javascriptMethod() method like this
document.getElementById("myHiddenButtonId").click();
So I want to ajax up a data table to change and be filtered based on which state is selected in the drop down. I have the following:
<p>Choose State to Filter By:</p>
<h:selectOneMenu value="#{productListingBean.choosenState}">
<f:selectItem itemValue="All" />
<f:selectItems value="#{productListingBean.stateList}" />
</h:selectOneMenu>
<h:commandButton value="Sort">
<f:ajax event="action" render="myTable" />
</h:commandButton>
and
<h:dataTable id="myTable" value="#{productListingBean.getAllProducts()}" var="product" styleClass="hovertable">
<h:column>
<f:facet name="header">
ID
</f:facet> ...
my product bean is request scoped and I save the selection from the selectOnmenu in the Choosen state variable and getAllProducts() method handles the filtering.
What am I missing, this does not work?
The issues seems to be that this needs to be surrounded in a tag.
I am trying to delete an image which belongs to an album.
I provide 2 drop downs, the first allows to select the album the second to select an image of the album. The first when changes sets the second.
Then the remove button calls a remove method.
I have debugged it a number of times but the values are always null.
Do you know why? how can I make it work?
note: when I set the first drop down the value is present but after I set the second they both become null.
Thanks
<h:form>
<h:panelGrid>
<h:outputLabel value="#{diaryMB.selectedAlbum}"/>
<p:selectOneMenu
id="albums" value="#{diaryMB.selectedAlbum}" effect="drop">
<f:selectItem itemLabel="Select An Album" itemValue="-1" />
<f:selectItems value="#{diaryMB.albums}" var="album"
itemLabel="#{album}" itemValue="#{album}" />
<p:ajax event="change" listener="#{diaryMB.updateImage()}" update="images"/>
</p:selectOneMenu>
<h:outputLabel value="#{diaryMB.selectedImage}" />
<p:selectOneMenu
id="images" value="#{diaryMB.selectedImage}" effect="drop">
<f:selectItem itemLabel="Select An Image" itemValue="-1" />
<f:selectItems value="#{diaryMB.images}" var="image"
itemLabel="#{image}" itemValue="#{image}" />
</p:selectOneMenu>
<p:commandButton id="removeImageButton" value="Remove" ajax="false" action="#{diaryMB.removeImage()}"/>
</h:panelGrid>
</h:form>
public String removeImage(){
System.out.println("I am selected image:"+selectedImage);
System.out.println("I am slected album "+selectedAlbum);
if(selectedImage!=null && !selectedImage.equals("-1"))
{diaryManager.removeImageFromAlbum(diaryOwner, selectedAlbum, selectedImage);
return "Friends";}
else
return "Home";
}
It might be beacuase your managed bean is RequestScoped and is being recreated after every ajax request. Try using ViewScoped or SessionScoped and see if the values remain.