• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Need Help with Editable Combo/Dropdown Box in JSF

 
Gus Johnson
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi everybody,

I am developing a web application using JSF, that needs a dropdown box which is pre-populated with common values. But if the user doesn't find the value they need, they should be able to enter one. Is there any such component in JSF? If not, are there alternatives to solving this issue?

Thanks for your help.
 
Tim Holloway
Saloon Keeper
Pie
Posts: 18100
51
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There's no standard combo box control in JSF. One can be constructed using a dropdown list + a textbox + some JavaScript.

It's possible someone already has made a JSF custom control like this so you don't have to do all the work yourself - I just don't know of any offhand.
 
Tak Ng
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You might use a workaround. Have the drop down list activates another textfield only when the user selects "Other" option. Tell me if you need a working example on how to do it.
 
Gus Johnson
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Tak Ng, I would appreciate a working example, if you have one available...
 
Tak Ng
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
These are the steps taken by JSF life cycle:
1) if the drop down menu changes, selectedOptionChanged will get called.
2) if the value of selectedOption is "other", the flag activateOtherInput is activated; otherwise, it is off.
3) the other input textfield appears depending on the flag activateOtherInput.

The disadvantage of this method is an additional round trip to the server, but you avoid writing your own javascript.

class ExampleForm{
private String selectedOption;
private String otherInput;
private boolean activateOtherInput;

public void selectedOptionChanged(ValueChangeEvent event){
if(selectedOption.equals("other") //Or whatever value you might have
activateOtherInput = true;
else
activateOtherInput = false;
FacesContext context = FacesContext.getCurrentInstance();
selectedOption = (String)event.getNewValue();
context.renderResponse();
}
...
//Rest of code
}

example.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html><head></head><body>
<h:selectOneMenu value="#{exampleForm.selectedOption}" onchange="submit();"
valueChangeListener="#{exampleForm.selectedOptionChanged}">
<f:selectItem value="PC" label="PC"/>
<f:selectItem value="Mac" label="Mac"/>
<f:selectItem value="other" label="Other"/>
</h:selectOneMenu>
<h:inputText value="#{exampleForm.otherInput}" rendered="#{exampleForm.activateOtherInput}"></f:inputText>
</body>
</html>
 
Gus Johnson
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a million, Tak Ng...
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic