Using Ajax with Struts

As part of some Ajax functionality I've implemented for a Struts application, I have in a JSP code similar to:

<html:form action="save" ...
...
<select id="AA" onchange="refreshBB();">
<option value="1">1</option>
<option value="2">2</option>
</select>
...
<select id="BB">

</select>
...

Select list BB is dynamic and dependent on what the user chooses for select list AA. refreshBB() is a JavaScript function that gets the selected value for AA and uses a XMLHttpRequest to send a request to a Struts action which we'll call dynamicListAction. This dynamicListAction determines the correct values for BB based on AA and returns the results in an XML response.

This works fine, but when I submit the form--calling the "save" action--the ActionForm does not have the AA property. I tried changing the AA select list in the html to

<html:select property="AA"> ... </html:select>

but this caused issues with getting the user-selected value in the refreshBB() JavaScript function. I was using

var AA = document.getElementById("AA").value;

but obviously this no longer works with <html:select>.

I'd appreciate any ideas on how I can get the value of what the user selected for the AA list in my Struts save action. Or on how I can get the selected value in refreshBB() if I use <html:select> instead of the plain <select>.

Struts uses the "name" property of an input to match it with a property on the ActionForm. Therefore, if you change:

<select id="AA" onchange="refreshBB();">

to

<select id="AA" name="AA" onchange="refreshBB();">

It should work, provided there is a setAA() method on the ActionForm bean.

Thank you, Merrill, that did the trick.

With the following HTML and JavaScript snippets...

<html:select property="AA" onchange="refreshAA();">
<html

ptionsCollection name="listAA" label="label" value="value"/>
</html:select>

function refreshAA() {
var A = document.getElementById("AA").value;
...
}

...does anyone know how I can access in refreshAA() what the user selected for the AA dropdown? Obviously the getElementById() method doesn't get the value. Thanks.

[ January 31, 2006: Message edited by: J Chung ]

[ January 31, 2006: Message edited by: J Chung ]
[ January 31, 2006: Message edited by: J Chung ]

All <html:xxx> tags support an "id" property that is passed along to the <input> or <select> tag when the html is rendered.

So, if you write:

<html:select property="AA" id="AA" onchange="refreshAA();">

You can use getElmentById to find the select control.

Another way to do it would be to use the "this" keyword to pass the value as a parameter as in:

onchange="refreshAA(this.value);"

Thanks for your reply, Merrill.

Adding an "id" attribute to the html:select tag produces an "invalid attribute" error, but using the "styleId" attribute works.

Yes, you're right. Specifying styleId="xxx" in an html:xxx tag produces id="xxx" in the rendered html tag.

Sorry about that.

Thanks ..This was useful.id doesnt work in html:select

Hi Chung,

Are you able to get the request.responseXML object.

when in my javaScript i am getting NULL value.

expecting reply from you.

Murali, I saw your earlier post also.

Why don't you try request.reponseText?

while building the respose before adding the actual contents, you can do something like this.
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.flush();

Note that you return null from your action class method.(you will have to come back to the same jsp). I have not tried going to another JSP after Ajax call (I read in some article that you have to come back to same JSP).
Second thing is, if you ahve to go to different JSP, why need Ajax(XMLHttpRequest)? We can use normal HttpRequest.

hi Chung,

Thankx for the so early reply. great.
But my problem is how can i access the XML tag values which i have written from Action class , by using the request.responseText

there is no method like getElementByTagName("tagname"); on responseText object

can u help me how can i read the returned XML stuff by using responseText.

hi VANI,

Thankx for the so early reply. great.
But my problem is how can i access the XML tag values which i have written from Action class , by using the request.responseText

there is no method like getElementByTagName("tagname"); on responseText object

Depending on data that i returned from XML i want to insert the option values into select box