Link to home
Start Free TrialLog in
Avatar of Rose_Taylor
Rose_TaylorFlag for United States of America

asked on

How to do the dropdown with previos and next functionalities ?

How to create custom component in dorpdown ? requirment is dropdown with next and previous functionalities.

dropdown have list, we choose the list as well using next and previous button choose list from drop down.

this is jsf dropdown , how to implement the next and previous functions in the dorpdown.

(previous)<   (dropdown)    >(next)  

dropdown.JPG
Avatar of Sathish David  Kumar N
Sathish David Kumar N
Flag of India image

I have question here ?
if user press next button means what will happen ??
next value in the dropdown value will populate or ??
example i think ...
950612135195
950612135196
950612135197
 if i press next means you want to populate 950612135197 value correct ??  
SOLUTION
Avatar of Sathish David  Kumar N
Sathish David Kumar N
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rose_Taylor

ASKER

Your correct, but this logic can able to do in the java ?
I am using JSF so here i am having event handling method.So need the logic for next and previous values in the dropdown.
Hi Rose

Hope this works,


YourJSP

<%
FacesContext myJSFContext = FacesContext.getCurrentInstance();
NamingContainerComponent component = new NamingContainerComponent();
String namingSpaceId = component.getClientId(myJSFContext);	

%>



<script>
var index=0;
var namingSpaceId = "<%=namingSpaceId %>"; 
onclickNext(){
index=index+1;
// You can have conditions to prevent next, previous based on max availability of items in dropdown

var selObj = document.getElementById(namingSpaceId+':yourform:YourDropDown');
	selObj.selectedIndex = index;

}

</script>

<jsf-naming:namingContainer id="myJSFContainer">

<h:form id="yourform" ...>
<h:selectOneMenu id="yourDropDown" ...
></h:selectOneMenu>
</h:form>

</jsf-naming:namingContainer>

Open in new window

all you have to do is create two links next, previous and link the above JavaScript method to next, and create / reuse the method for Previous but with an index=index-1

and also you can put some if condition to not to exceed your list size.

Hope this helps
Is it possiable to do in java ?
Yes, you can do it in java (JSF) using RichFaces / A4J . in that case an ajax call is sent to the server and your components prev, next links, dropdown will update the state after ajax response.

in the background it still works based on JavaScript (generated by A4J / Richfaces) , the above solution is bit complex comphared the one with simple custom JS.

share your thoughts !
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
good