dynamically populating d 1st dropdown & dn d 2nd based on 1st dropdwn using jsp&jstl

[Gayatri1987]

I am making a online movie tickets booking website and in my index page I have 5 drop down boxes movies, timings, theatre name, date and price. All these drop down boxes use 2 sql tables.
What I need is that the drop down boxes get populated from the databse based on each others value. For eg. the movie name to be populated from database and then the show timing and theatre name based on the movie name.

Please help me as I have searched a lot regarding this but all in vein. It is urgent as I need to submit my project in 10 days.

Thanks in advance.

[kvprajapati]

Welcome Gayatri1987,
You must read rule at Daniweb:
1.Homework policy
2.How to post source code?

Show your code work. Do not forget to use code tags. Source code must be surrounded with code tags.
For example,

[CODE=jsp] ... statements..

[/code]

[Gayatri1987]

I will send the code for sure in the evening..Right now I am not having the code. But till then at least you can give me the idea of how it can be done?

[masijade]

This "dynamic population", as you call it, would happen on the client side, but JSP, of course, runs on the server side, so you have three options

1. Send all of the data (either in the form of hidden fields or prepopulated JavaScript Arrays) and use JavaScript to replace the contents of one depending on the selection in the other.

2. Use AJAX to request a list of values from the server and update the second list whenever a value is chosen in the first.

3. Submit the form to populate the second list whenever a value is chosen in the first list.

[peter_budo]

masijade, what about JSTL and its ability of SQL querying? Wouldn't that work?

[masijade]

Unfortunately, not in the way he wishes. He wishes to have the user be able to select an option in one list, and from that, populate the options in the second list.

So, he can use those on the third option. I.E. when the user selects a value in the first drop down, the form gets submitted (probably to some alternate url, or the original must check whether the second list has a selected value or not), then he can use the JSTL query tags to populate the second list. But, JSTL does not help on the client-side. JSTL tags are used server-side. I.E. They are evaluated on the server in order to produce HTML.

Actually, he might use them in all of the options, the only question is when and how. In the first option, in order to find all possible values, and the second option in the page that the AJAX call refers to.

[Gayatri1987]

aijade thanx for ur comment. I dn't know ajax and ajax is not to be used in my project..I need to use only jsp and javascripts to do teh same. Can you please tell me from where can I get the javascri[t example so that I could apply the same in my project as I dn't have good knwledga of javascripts.

[peter_budo]

aijade thanx for ur comment. I dn't know ajax and ajax is not to be used in my project..I need to use only jsp and javascripts to do teh same. Can you please tell me from where can I get the javascri[t example so that I could apply the same in my project as I dn't have good knwledga of javascripts.

You sure you no supposed to use AJAX? In case you do not know AJAX stands for Asynchronous JavaScript and XML, basically enhanced JavaScript...

[masijade]

By asking on a JavaScript forum, maybe?

People here, however, due to the terms and conditions for this site, are not supossed to just "give it to you", though.

And Peter is correct. AJAX is JavaScript, it just has comes as a buch of "prepackaged" functions and utilities.

[Gayatri1987]

As I told earlier I want to populate the value in the second drop down box according to values in first drop down box. The first drop down box is populated from the database. I am posting the code which I tried, but it doesn't work. The second drop down box is not populated with any value. I dn't understand how to do. Please help.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
The taglib directive below imports the JSTL library. If you uncomment it,
you must also add the JSTL library to the project. The Add Library... action
on Libraries node in Projects view can be used to add the JSTL 1.1 library.
--%>

<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c'%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SSE-Sount and Stage Entertainment</title>
<style type="text/css">

body{margin:0px; padding:0px; background-color:#0d4c71;}
table,td,th{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color:#000000; line-height:18px; text-decoration:none;}
.bg_table{ background-image:url(images/bg3.gif); background-position:left; background-repeat:repeat-x;}
.bg_table1{ background-image:url(images/top-nav1.gif); background-repeat:no-repeat; background-position:left; height:24px;}
.bg_1{background-image:url(images/now_showing_tab.jpg); background-repeat:no-repeat; height:24px; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold }
.top_menu_selected{color:#02233c; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration:none;}
.top_menu_selected:hover{color:#02233c; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration: underline;}
.top_menu{color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration:none;}
.top_menu:hover{color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration: underline;}
.txt{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color:#FFFFFF;}
a.txt1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color:#FFFFFF; text-decoration:none;}
a.txt1:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color:#FFFFFF; text-decoration:underline;}
.bg_button1{background:url(images/logonbutton.gif); background-position:left; background-repeat: no-repeat;}
</style>
<sql:setDataSource var="dataSource" driver="com.microsoft.sqlserver.jdbc.SQLServerDriver"
	url="jdbc:sqlserver://ADMINISTRATOR\\SQLEXPRESS:1433;DatabaseName=SSE" user="sa" password="ganeshan@123"
	scope="session" />
 
    <script type='text/javascript'>
function populateValues(){
	var form1 = document.form1;
	form1.location.value = form1.selectmovies.options[form1.selectmovies.selectedIndex].value;
}
</script>


    
</head>

<sql:query var="moviesretrieval" dataSource="${dataSource}">
  select distinct vMovieName from movie
  </sql:query>
 
 <sql:query dataSource="${dataSource}" var="locationretrieval">
    select vtheatreName from movie_theatres a , movie b where a.cTheatre_Code=b.cTheatre_Code and vMovieName= ?
    <sql:param value="${param.location}" />
				
		</sql:query>
 
 
  <body class="bg_table">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center" style="padding-top:10px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td><img src="images/logo4.gif" alt="" /></td>
  </tr>
  <tr>
    <td colspan="2" align="left" valign="top" style="padding-top:20px;"  ><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="136px" align="center" valign="middle" class="bg_table1" ><a href="index.jsp" class="top_menu_selected">Home</a></td>
    <td width="136px" align="center" valign="middle" class="bg_table1"><a href="movie_reviews.htm" class="top_menu">Movie Reviews</a></td>
    <td width="136px" align="center" valign="middle" class="bg_table1"><a href="coming_soon.htm" class="top_menu">Coming Soon</a></td>
    <td width="136px" align="center" valign="middle" class="bg_table1"><a href="pos.jsp" class="top_menu">Point of Sales</a></td>
	 <td width="136px" align="center" valign="middle" class="bg_table1"><a href="about_us.htm" class="top_menu">About Us </a></td>
  </tr>
</table></td>
    </tr>
</table></td>
  </tr>
  <tr>
    <td style="padding-top:25px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="38%" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding-left:14px;"><table width="58%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bg_1" style="padding-right:10px; padding-left:15px;" >Now Showing</td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td><img src="images/movies.gif" alt="" /></td>
  </tr>
</table></td>
    <td width="2%">&nbsp;</td>
    <td width="60%"  align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style=" padding-left:14px;" ><table width="58%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bg_1" style="padding-right:10px; padding-left:15px;" >Book Tickets</td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="3%" align="right" valign="top"><img src="images/lft_curve.jpg" alt="" width="14" /></td>
    <td width="94%" align="left" valign="top" style=" border-top: 2px solid #0c5681; border-bottom:2px solid #0c5681; padding-left:30px; padding-top:15px;" >
	 
	 <form action="" method="post" name="form1" id="form1">
	
	<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0">
  <tr>
    <td width="40%" class="txt">Movie</td>
    <td width="60%"><select name="selectmovies" tabindex="1" onChange="populateValues()">
      <c:forEach var="row" items="${moviesretrieval.rows}">
	          <option value="moviename" id="moviename" >${row.vMovieName}</option>
      </c:forEach>
    </select></td>
  </tr>
  
  <tr>

    <td class="txt">Location</td>
    <td><select name="selectlocation" id="selectlocation">
<c:forEach var="row" items="${locationretrieval.rows}">
            <option selected="selected" value="">Select Location:</option>
                 <option value="theatrename" id="theatrename" value="${row.vTheatreName}">${row.vTheatreName}</option>
 
           
</c:forEach>
              </select>
			  
			  <input type="hidden" id="location" name="location">
			  
			  </td>
  </tr>
  <tr>
    <td class="txt">Number Of Seats</td>
    <td><select name="seat" id="selectseats">
                <option selected="selected" value="">Select Number of Seats:</option>
				<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
        </select>    </td>
  </tr>
  <tr>
    <td class="txt">Date</td>
    <td>
      <select name="date" id="selectdate">

                <option selected="selected" value="">Select Date:</option>
              </select></td>
  </tr>
  <tr>
    <td class="txt">Show Timings</td>
    <td><select name="session_id" id="selecttime">
                <option selected="selected" value="">Select Time:</option>
              </select>
			  
			  <input type="hidden" id="showtime" name="showtime">
			  
			  </td>
  </tr>
  <tr>
    <td class="txt">Price</td>
    <td><select name="price_code" id="selectprice">
                <option selected="selected" value="">Select Price:</option>
				<option value="Rs.80">Rs.80</option>
				<option value="Rs.100">Rs.100</option>
              </select></td>
  </tr>
  <tr>
    <td colspan="2" align="center" valign="top" class="txt" ><table width="65%" border="0" cellspacing="0" cellpadding="3">
  <tr>
      <td width="47%" align="right"><input type="submit" value="submit" class="bg_button1" height="23" width="93" style=" font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;"></td>
    <td width="53%"><input type="submit" value="Reset" class="bg_button1" height="23" width="93" style=" font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;"></td>
  </tr>
</table></td>
    </tr>
</table>


</form>




</td>
    <td width="3%" align="left" valign="top"><img src="images/rght_curve.jpg" alt="" width="14" /></td>
  </tr>
</table></td>
  </tr>
</table></td>
  </tr>
  
  
</table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top" style="padding-top:20px; padding-left:14px;"><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bg_1" style="padding-right:10px; padding-left:15px;" >Top 10 on SSE</td>
  </tr>
</table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1%" align="left" valign="top"><img src="images/lft_curve_1.jpg" alt="" /></td>
    <td width="98%" align="left" valign="top" style=" border-top:2px solid #0068aa; border-bottom:2px solid #0068aa;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left" valign="top" style="padding-top: 20px;"><table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="60%" class="txt">1. New York</td>
    <td width="40%"><img src="images/3star.jpg" alt=""  /></td>
  </tr>
  <tr>
  <td class="txt">2. Paying Guests</td>
    <td><img src="images/2.9star.jpg" alt="" /></td>
    
  </tr>
  <tr>
    <td class="txt">3. 99 </td>
    <td><img src="images/3star.jpg" alt=""  /></td>
  </tr>
  <tr>
   <td class="txt">4. Kal Kissne Dekha </td>
    <td><img src="images/2star.jpg" alt="" /></td>
  </tr>
  <tr>
  <td class="txt">5. Fast and Furious 4 </td>
    <td><img src="images/3.5star.jpg" alt="" /></td>
    
  </tr>
</table>
</td>
    <td width="50%" align="left" valign="top" style="padding-top: 20px;"><table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td width="60%" class="txt">6. Team - The Force</td>
    <td width="40%"><img src="images/2star.jpg" alt="" /></td>
  </tr>
  <tr>
    <td class="txt">7. Maruti Mera Dost </td>
    <td><img src="images/2star.jpg" alt=""/></td>
  </tr>
  <tr>
    <td class="txt">8. Detective Naani </td>
    <td><img src="images/2star.jpg" alt="" /></td>
  </tr>
  <tr>
    <td class="txt">9. Karma </td>
    <td><img src="images/2star.jpg" alt="" /></td>
  </tr>
  <tr>
    <td class="txt">10. Zor Lagaa Ke... Haiya!</td>
    <td><img src="images/2star.jpg" alt="" /></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>
    <td width="1%" align="left" valign="top"><img src="images/rght_curve_1.jpg" alt="" /></td>
  </tr>
</table>


</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;"><a href="index.jsp" class="txt1">Home</a>  <span class="txt">|</span>  <a href="about_us.htm" class="txt1">About Us</a> <span class="txt">|</span> <a href="contact_us.htm" class="txt1">Contact Us </a><span class="txt">|</span> <a href="privacy_policy.htm" class="txt1">Privacy Policy </a> <span class="txt">|</span> <a href="admin_login.jsp" class="txt1"> Administrators </a><span class="txt">|</span> <a href="pos.jsp" class="txt1">POS Portal </a></td>
  </tr>
</table>
</td>
  </tr>
</table>
</body>
</html>

[peter_budo]

Have look on this example http://www.ibm.com/developerworks/web/library/wa-aj-enable2/index.html and try to apply to your case