aspose file tools*
The moose likes JSF and the fly likes dynamic drop down menu Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "dynamic drop down menu" Watch "dynamic drop down menu" New topic
Author

dynamic drop down menu

Fernando Guerrero
Greenhorn

Joined: Apr 26, 2011
Posts: 14

Hello

I would like to create a dynamic drop down menu in which the menu items are associated with a web page. So when a user clicks on a menu item, it will take the person to that web site. How can I do this?

I have a JSf project, in this project I have a Java Bean, in this Java bean I have a method that returns me a List , in every element of this list I have a name (lavel) and a web address (link) , Inside a xhtml I am calling this bean and this method. This is my code:

<nxu:set var="tfmxactions" value="#{tfmxPermissions.getDashboardList()}">
<h:selectOneMenu id="list2" value="#{tfmxactions}" var="listactions" onchange="#{listactions.link}" >
<nxu:selectItems var="taction" value="#{tfmxactions}" itemLabel="#{taction.label}"></nxu:selectItems>
</h:selectOneMenu>
</nxu:set>

I'm able to create the menu itself OK, but don't know how to get the link portion to work. #{listactions.link} is already in the form "window.open(\'" +tURL() + "\')"
the values that we get from #{listactions.link} and #{taction.label} are the two values that are together in every element of my list.

Thanks in advance.
Guy deLyonesse
Ranch Hand

Joined: Apr 12, 2011
Posts: 200

Welcome to the forum, Fernando.

Which version of JSF are you working with? My reply is based on JSF 1.2.

I'm unfamiliar with some of the syntax you're using, but there are a couple of things that grab my attention...

<h:selectOneMenu id="list2" value="#{tfmxactions}" var="listactions" onchange="#{listactions.link}" >

The value you're setting for your selectOneMenu should reference a member of a managed bean in the form #{managedBean.member} and in the case of a selectOneMenu we're talking about a String.

Also, you've defined the var as "listactions" which you normally don't have in a selectOneMenu. Is that something required by this "nxu" taglib?

Normally I use an <f:selectItems> tag and my syntax would be something like

<f:selectItems value="#{backingBean.itemList}"/> where the itemList member of the backingBean is an ArrayList of SelectItem objects. (Again, you want to reference those objects in a bean.member syntax.)
Fernando Guerrero
Greenhorn

Joined: Apr 26, 2011
Posts: 14

Thanks Guy deLyonesse


I already modify my code, you were right about the var attribute in the <h:selectOneMenu> tag, the special tags that I am using (nxh) work in the same way that the normal tags, It just that I am working in a plug in for an open source application and I have to use those tags.
This is my new code:


I have never done a JavaScript code before, so I am not sure how to do this, the problem is still the same,
Guy deLyonesse
Ranch Hand

Joined: Apr 12, 2011
Posts: 200

Looking better, but I still see a couple things:



In your tfmxPermissions.getDashboardList() you'll want to change that to tfmxPermissions.dashboardList

See, the JSF EL will take "dashboardList" and automatically search your bean for a getter for that member. You don't need to specify the name of the getter since it assumes you'll use that format in your class.

Although there should be a value attribute set for your selectOneMenu that points to the current selected value.

You need to make the same change on your value="#{tfmxactions}" attribute in your selectItems tag (bean.member). that value should reference your ArrayList of items.
Fernando Guerrero
Greenhorn

Joined: Apr 26, 2011
Posts: 14

So far the html code that is generated is the code that I wanted, it is working as I expected, the only thing that I need to know is how to read/know which option was selected.

I have a little code for testing, this code is not working, and I have not idea why, If I can make this code work, I can make the otherone work.


Edited to add code tags
Fernando Guerrero
Greenhorn

Joined: Apr 26, 2011
Posts: 14

Finally I got it

I will put here the code just in case someone can need this information.


<script language="javascript">
function gotoLink()
{
var optionIndex=document.getElementById('dynamic_dropdown:list2');
var link= optionIndex.options[optionIndex.selectedIndex].value;
window.open(link);
}
</script>

<h:form id="dynamic_dropdown">
<nxu:set var="tfmxactions" value="#{tfmxPermissions.getDashboardList()}">
<h:selectOneMenu id="list2" onchange="gotoLink()" >
<nxu:selectItems var="taction" value="#{tfmxactions}" itemLabel="#{taction.label}" itemValue="#{taction.link}"></nxu:selectItems>
</h:selectOneMenu>
</nxu:set>

</h:form>

I did a little modification to my java bean, so when I call "#{taction.link}" I get http://www.google.com, before the modification I used to get window.open(http://www.google.com);
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: dynamic drop down menu