struts-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From missy <jl_8...@yahoo.com>
Subject nid help on creating a cascaded multiple dynamic drop down list
Date Fri, 13 Apr 2007 17:24:53 GMT

Hi! I'm trying to create a cascaded multiple dynamic drop down list(as i call
it) wherein the first drop down list would be for selecting a region, the
second for selecting a province (contents based on the selected region), and
the third for selecting a city within the selected province.

I've downloaded javawebparts on sourceforge.net and intended to use
jwpcb_dds for this but the problem is that i need to populate the third drop
down list based on the selection made in the second drop down list which was
populated by the first drop down list.

First i edited the dynamicDoubleSelectServlet by adding a function that
would return a response that would write onto the jsp. the code snippet
looks like this:

private void listCities (HttpServletRequest request, HttpServletResponse
response) throws IOException 
{
String province = (String) request.getParameter("province");
		String[] cities = getCities(province);
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();
		
		out.print("<select name=\"citySelect\">\n");
		for (int i = 0; i < cities.length; i++) {
			out.print("<option value=\"");
			out.print(province);
			out.print(i);
			out.print("\">");
			out.print(cities[i]);
			out.print("</option>\n");
		}
		out.print("</select>\n");
}

Then i tried to include writing
out.print("<ajax:eventajaxRef=\"DynamicDoubleSelectForm/provinceChange\"/>");
at the end of the function below so that it will also be ajax enabled in
order to populate the third selectbox dynamically.

private void listProvinces(HttpServletRequest request, HttpServletResponse
response) throws IOException 
{
		String region = (String) request.getParameter("region");
		String[] provinces = getProvinces(region);
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();

	  out.print("<select name=\"provinceSelect\">\n");
	  out.print("<option> </option>\n");
		for (int i = 0; i < provinces.length; i++) {
			out.print("<option value=\"");
			out.print(region);
			out.print(i);
			out.print("\">");
			out.print(provinces[i]);
			out.print("</option>\n");
		}
	    out.print("</select> ");
}

But the third drop down list does not appear after selecting an element in
the second drop downlist. Need help on this.

My index.jsp look like this:

<%@ taglib prefix="ajax" uri="javawebparts/ajaxparts/taglib" %>
<html>
<head>
  <title>Java Web Parts Cookbook: Dynamic Double Select</title>
</head>
<body>
  Java Web Parts Cookbook
  <br/>
  Dynamic Double Select
  <br/><br/>
  This shows how a selection in one &lt;select&gt; element can change the
  contents of another based on a request to the server. This can be done 
  in more than one way, we show you the most common one's from APT.
  <br/><br/>
  <form name="DynamicDoubleSelectForm">
  <table cellpadding="20" width="90%">
   <tr>
     <td width="50%">
	    Select one of the regions to see a list of provinces under it:<br/>
	    <select name="regionSelect">
	      <option> </option>
	      <option value="CAR">CAR</option>
	      <option value="R01">Region I</option>
	      <option value="R02">Region II</option>
	      <option value="R03">Region III</option>
	      <option value="NCR">NCR</option>
	    </select> <ajax:event ajaxRef="DynamicDoubleSelectForm/regionChange"/>
     </td>
    </tr>
   </table>
   
  <table cellpadding="20" width="90%">
   <tr>
     <td>
	  Here's the list of provinces:
	   <div id="provinces">
	   </div>
     </td>
    </tr>
   </table>
   
    <table cellpadding="20" width="90%">
     <tr>
       <td>
         List of Cities:
  
  		 <div id="cities">
     	 </div>
       </td>
     </tr>
    </table>
    
</form>
</body>
</html>
<ajax:enable debug="debug" logger="JWPAlertLogger"/>

My ajax_config.xml looks like this:

<ajaxConfig>
	<group ajaxRef="DynamicDoubleSelectForm">
		<element ajaxRef="regionChange">
			<event type="onchange">
				<requestHandler type="std:QueryString" method="get"
target="/dynamicDoubleSelect?method=first">
					<parameter>region=regionSelect</parameter>
				</requestHandler>
				<!-- When we get back, just insert the returned results into the -->
				<!-- div named provinces on the page, which contains the second -->
				<!-- select element. -->
				<responseHandler type="std:InnerHTML">
					<parameter>provinces</parameter>
				</responseHandler>
			</event>
		</element>

		<element ajaxRef="provinceChange">
			<event type="onchange">
				<requestHandler type="std:QueryString" method="get"
                                                                      
target="/dynamicDoubleSelect?method=second">
					<parameter>province=provinceSelect</parameter>
				</requestHandler>
				<responseHandler type="std:InnerHTML">
					<parameter>cities</parameter>
				</responseHandler>
			</event>
		</element>
	</group>
</ajaxConfig>

-- 
View this message in context: http://www.nabble.com/nid-help-on-creating-a-cascaded-multiple-dynamic-drop-down-list-tf3572893.html#a9983146
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Mime
View raw message