Dynamic Population of Drop Down List using AJAX

Hello All,
I am very new to AJAX and am trying to use it in a web application that I am working on. I need some guidance from the experts.

Here is the scenario:

Initially, the user logs onto the application and goes to the product selection screen.

The product selection screen has two drop downs, one for the Carrier ID and the other for Product Name.

I would like to use AJAX to dynamically populate the Product Name drop down list depending upon the Carrier ID selected by the user.

How can this be done in AJAX? I would really appreciate if someone can point me in the right direction.

Thanks in advance.

Regards,
Kunal

Here is my JSP with some AJAX code in it. I am still working on it and have not completed it. So, any help will be highly appreciated.

<%@ page language="java" contentType="text/html" %>
<%@ page session="true" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld"  prefix="bean"  %>
<%@ taglib uri="/WEB-INF/struts-html.tld"  prefix="html"  %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
 
<tiles:importAttribute scope="request" />
 
<script language=JavaScript>
var XmlHttpObj;
function CreateXmlHttpObj()
{
try
{
XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
} 
catch(oc)
{
XmlHttpObj = null;
}
}

if(!XmlHttpObj && typeof XMLHttpRequest != "undefined") 
{
XmlHttpObj = new XMLHttpRequest();
}
 
}
 
function productNameListOnChange() {
var carrierList = document.getElementById("carrierId");

// get selected carrier from dropdown list
var selectedCarrierId = carrierList.options[carrierList.selectedIndex].value;

var requestUrl;
requestUrl = "/PopulateExamList" + "?company_id=" + encodeURIComponent(selectedCarrierId);

CreateXmlHttpObj();

// verify XmlHttpObj variable was successfully initialized
if(XmlHttpObj)
{

}

}
 

</script>
 
<html:form action="/processProductSelection" onsubmit="displayWaitMessage()">
 
<tiles:insert page="/pages/appEntry/buttons.jsp">      
<tiles :-P	 ut name="cancel" value="true"/>
<tiles :-P	 ut name="next" value="true"/>
 </tiles:insert>
 
 <div align="left" width="100%">
 
<table width="100%">
 
<tr>
<td align="left" class="tC" width="30%">
<bean:message key="label.carrierId"/>:*
</td>
 
<td align="left" class="tE" width="70%">
<bean :mrgreen: efine id="carrierIds" name="sessionData" property="carrierIds"  />
<html:select property="carrierId" tabindex="3" onchange="javascript:setProductIds()">
<html :-o	 ptions collection="carrierIds" property="value" labelProperty="label" />
</html:select>
</td>
</tr>
<tr>
<td align="left" class="tC" width="30%">
<bean:message key="label.checkinProductName"/>:*
</td>
 
 <td align="left" class="tE" width="70%">

</div>
</html:form>

I didn't take a close look at your code -- looking at a bunch of Struts tags is less than illuminating -- but the premise of the dependent drowdown is fairly easy.

1. When a selection is made from dropdown #1, an Ajax request is made to a server-side resource with the value chosen.
2. Using that value, the server-side resource collects and returns the list of values that are to become the options of dropdown #2. I usually employ JSON for this purpose as it's easy to digest on the client.
3. The client handler for the request converts the JSON to a Javascript construct and uses the information to add the options to dropdown #2.

A cursory look at your code reveals that you are doing all the Ajax stuff directly. That's madness in my opinion. Better to get acquainted with one of the toolkits that vastly simplifies the process by masking browser dependencies and that handle the ready-change protocol. I'm partial to Prototype and jQuery myself.

Thanks Bear. I shall implement your suggestions and let you know.

May I suggest you check Ajax.Autocompleter ?

That's not really the same thing.

Hello Bear,

What should be the url that we send to the server side?

Regards,
Kunal

In the above code, the url is:

Should PopulateExamList be an entry in the struts-config file

If you want to implement your resource as a Struts Action, then you would address it just like any other action. The difference would be in what the Action returns as the response. Instead of a full HTML page, the response would be the text of a JSON construct or an XML document or however else you decide to return the option data to the client.

Hey Bear,

The following is what I am trying to do. Please let me know if I am headed in the right direction.

From the Javascript in the JSP Page, i am calling the retrieveURL method where I am passing the Struts Entry as shown below

<%@ page language="java" contentType="text/html" %>
<%@ page session="true" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld"  prefix="bean"  %>
<%@ taglib uri="/WEB-INF/struts-html.tld"  prefix="html"  %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
 
<tiles:importAttribute scope="request" />
 
<script type="text/javascript" src="pages/common/javascript/Ajax.js"></script>
 
<html:form action="/processProductSelection" onsubmit="displayWaitMessage()">
 
<tiles:insert page="/pages/appEntry/buttons.jsp">      
<tiles :-P	 ut name="cancel" value="true"/>
<tiles :-P	 ut name="next" value="true"/>
 </tiles:insert>
 
 <div align="left" width="100%">  
 
<table width="100%">
<tr>
<td align="left" class="tC" width="30%">
<bean:message key="label.carrierId"/>:*
</td>
 
<td align="left" class="tE" width="70%">
<bean :mrgreen: efine id="carrierIds" name="sessionData" property="carrierIds"  />
<html:select property="carrierId" tabindex="3" onchange="javascript:retrieveURL('populateProductList.do?ask=carrierId','checkinForm')">
<html :-o	 ptions collection="carrierIds" property="value" labelProperty="label" />
</html:select>
</td>
</tr>

<tr>

</div>
</html:form>

I have a Struts Entry as follows in the Struts Config file

The control is flowing to the ShowAjaxAction class. Should I be creating a JSON Object in the ShowAction class? Also how do I pass it to the JSP and how do I use it in the JSP page.

Any comment will be highly appreciated.

Regards,
Kunal

Thanks for your help Bear!

I have been successfully implemented the solution.

I used the following link as a reference.

Hope this is helpful to somebody else as well.

http://today.java.net/pub/a/today/2005/10/27/sprinkle-ajax-magic-into-struts-webapp.html

Regards,
Kunal

Hi Kunal Sathe and Bear ,
Could you please help me with this issue.Im facing the same problem

"I would like to use AJAX to dynamically populate the Product Name drop down list depending upon the Carrier ID selected by the user. "

Can you please post the workable code,so that we can use it for reference.

Thanks
Deepak

Rather than posting to an old topic, please start a new one with your question.

And here are a few tips:

Include your code -- no one is going to qrite code for you

Use code tags to post code

Use color sparingly and only for emphasis