Solved

How to do the dropdown with previos and next functionalities ?

Posted on 2010-09-11
10
593 Views
Last Modified: 2013-11-24
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
0
Comment
Question by:Rose_Taylor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 20

Expert Comment

by:Sathish David Kumar N
ID: 33655874
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 ??  
0
 
LVL 20

Assisted Solution

by:Sathish David Kumar N
Sathish David  Kumar N earned 100 total points
ID: 33655883
use javascript while click next nutton
u can call some funtion
you can get the value of dropdown and add the one more value one set the value in drop down ! thats it ...
 
0
 

Author Comment

by:Rose_Taylor
ID: 33658324
Your correct, but this logic can able to do in the java ?
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

Author Comment

by:Rose_Taylor
ID: 33658328
I am using JSF so here i am having event handling method.So need the logic for next and previous values in the dropdown.
0
 
LVL 3

Expert Comment

by:prakash_parvath
ID: 33659897
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

0
 
LVL 3

Expert Comment

by:prakash_parvath
ID: 33659902
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
0
 

Author Comment

by:Rose_Taylor
ID: 33678913
Is it possiable to do in java ?
0
 
LVL 3

Expert Comment

by:prakash_parvath
ID: 33679452
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 !
0
 
LVL 3

Accepted Solution

by:
prakash_parvath earned 400 total points
ID: 33679459
and also please note that above solution may need you to add additional libraries to your application
-jars and dependencies for A4J / RichFaces
0
 

Author Closing Comment

by:Rose_Taylor
ID: 34294824
good
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

By the end of 1980s, object oriented programming using languages like C++, Simula69 and ObjectPascal gained momentum. It looked like programmers finally found the perfect language. C++ successfully combined the object oriented principles of Simula w…
Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question