File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes Struts and the fly likes dependent select boxes with ajax . Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "dependent select boxes with ajax ." Watch "dependent select boxes with ajax ." New topic

dependent select boxes with ajax .

sdeep anand

Joined: Jul 16, 2006
Posts: 7

i have 2 drop down boxes, the second drop down dependent on first.
Whenever the user selects an option from the first drop down I have to make an ajax call to the struts action class to get the list of options for the second drop down. I am using jstl tags in the jsp.

Can you point me to similar examples done with ajax?

Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864
I've done this in my applications. Here is the process:

1-Populate the first select using server-side code (JSTL, Struts tags, etc.).

2-In your server-side code, create the second select without options or with only a "please select" null option.

3-Use the onchange event of the first select to initiate an AJAX call.

4-Use the data returned from the AJAX call to clear the second select of any existing options and add the new ones based on the data returned.

I would highly recommend that you look into the DWR framework. It handles all the low-level mechanics of making an AJAX call. All you have to do is write a method in a Java class that will find the correct options and register the method with DWR. DWR then provides you with a JavaScript function that will handle making the AJAX call to the server and calling the Java method you've written.

Consultant, Sima Solutions
sdeep anand

Joined: Jul 16, 2006
Posts: 7

I tried passing the request through ajax to action class.

I have this javascript method

function getGrouping() {
alert("inside grouping");
var parameters= new Array();
var i=0;

var response = XMLHttpRequestSender('',
'3','secondary', displayResult);


function displayResult(req, idToChange)
alert('Inside displayResulte into '+idToChange);
//I am able to come into this method.
var result = req.responseText;
alert("inside result");

//here I have code to populate the second drop down
public ActionForward getValuesA(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) {
String primaryValue = request.getParameter("primaryValue");
List secondaryvalues= new ArrayList();
//I construct a string "optionsString" with the values and set it in request.
request.setAttribute("result", optionsString);

return null;// as I am returning to the same jsp i am returning this right.


So should I use another jsp and use request.getAttribute("result") to get the options from action class or how do I get the options set in the action class into this jsp.
Merrill Higginson
Ranch Hand

Joined: Feb 15, 2005
Posts: 4864
When you're using AJAX, you have to remember that everything is done in JavaScript and HTML except for the retrieval of the data. You're not refreshing the page, so there is no new JSP. Only the current HTML document.

Let me tell you up front that I don't use an Action class to retrieve my data. I use a regular POJO with some JDBC code to retrieve the data. I then register my class and method with DWR and have DWR make the AJAX call. I can give you a limited amount of help with the method you're using, but it's not the one I use or recommend.

Having said that, here are my comments on your code:

An Action class responding to an AJAX call must output an HTML or XML response. It doesn't put anything in the HttpServletRequest object. It simply sends back its data through the HttpServletResponse object. Therefore, remove the line:

request.setAttribute("result", optionsString);

and add these lines:

PrintWriter out = response.getWriter();
return null;

Then in your displayResult function, you should be able to view the string that you sent back. I suspect you'll want to use the innerHTML property of some JavaScript object to change your options. I know others have done it this way, but I've always used DWR, so I couldn't advise you on how to do it.

Good luck.
[ August 08, 2006: Message edited by: Merrill Higginson ]
sdeep anand

Joined: Jul 16, 2006
Posts: 7
Hi Merrill,

Thanks for your help. I struggled with this problem for whole day. It solved my problem. Your explaination was very helpful.
I agree. Here's the link:
subject: dependent select boxes with ajax .
It's not a secret anymore!