correct Ajax script syntax for second DropDown

[Zubi Pen]

Hello eveyone,

I am new to Ajax and have been fiddling with it for the last couple of days. I am trying to get a dropdown filter to work. I have managed to sort out the filter for the frist dropdown using a Ajax script but cannot get the second drop down to work. I am not too sure to write the correct Ajax syntax. My question is on the second dropdown, how can I pass the id for the first onChange event and the second onChange event...

Here is my explanation on what I am trying to achieve,

When a user selects Student Name from the frist dropDown, then the onchange event runs the Ajax script
and filters the second Dropdown and displays all the exams details by the student name selected above. The code works fine uptill this point.

Now, when I select the second dropdown, I want it to take the value of the frist dropdown and the second dropdown and
then filter the third dropdown. I do not know the correct syntax in Ajax on how to pass the onChange event on the frist two dropdowns.

Here is my html dropdown code:

    
<tr><td>
//This is the first DropDown
<select name="studentID" id="studentID" onChange="ajaxStudentID(this)">
        <option value="0" selected>Select...</option>
        <%=student.getList(stuForm.getStudentID())%>
        </select>
</td></tr>
 
<tr><td>
//This is my Second DropDown
//This basically filters the list and gives a dropdownlist of Exams taken by the value returned
//from the method stuForm.getStudentID()
<div id="examDropDownList">
<select name="examID" id="examID">
        <option value="0" selected>Select...</option>
        <%=exam.createList(stuForm.getStudentID(), stuForm.getExamID())%> 
        </select>  
</div>
</tr></td>
//This is my Last DropDown 
//This basically filters the list and gives a dropdownlist of Exams Passed taken by the values returned
//from the method stuForm.getStudentID() and method stuForm.getExamID()
 
<select name="passID" id="passID">
        <option value="0" selected>Select...</option>
        <%=pass.createList(stuForm.getStudentID(), stuForm.getExamID(), stuForm.getPassID())%> 
        </select>  
 
</tr></td>

Here is the Ajax script I am using:

    
<script>
function registerAjaxStuff() {
ajaxEngine.registerRequest( 'ajaxStudentID', 'dropdownlist.jsp' );
ajaxEngine.registerAjaxElement( 'examDropDownList' ); //This is the div, I want to run
}

function ajaxStudentID(selectBox) {
//var id = selectBox.options[selectBox.selectedIndex].value;
var id = selectBox.value;
//alert("groupid = " + id);
ajaxEngine.sendRequest( 'ajaxStudentID', "id=" + id);
}

registerAjaxStuff();
</script>

Here is the dropdownlist.jsp page that runs the Ajax and gets the values for the second dropdown..

   
<%response.setContentType("text/xml");%>
<%@ include file="header.jsp" %>
 
<jsp:useBean id="examList" class="student.DropDown"/>
 
<%
examList.useDb(db);
 
int id = utils.servletUtils.isNumber(request.getParameter("id"),0);
%>
<ajax-response>
   <response type="element" id="examDropDownList">
<select name="examList" id="examList" onchange="ajaxStudentID(this)">
<option value="0">Select</option>
<%=examList.createList(id,0)%>
</select>
   </response>
   
</ajax-response>

My Question is how can I write the correct syntax for running the Ajax script on the onChage event of the
second dropdown?
[ March 28, 2008: Message edited by: Bear Bibeault ]

[Zubi Pen]

Ok no reply so far! I think my post is a bit confusing. Let me explain from a different approach. I am using Using the rico.js file , I have the following script:

    
<script> 
function registerAjaxStuff() { 
ajaxEngine.registerRequest( 'ajaxStudentID', 'dropdownlist.jsp' ); 
ajaxEngine.registerAjaxElement( 'examDropDownList' ); //This is the div, I want to run 
} 
 
function ajaxStudentID(selectBox) { 
//var id = selectBox.options[selectBox.selectedIndex].value; 
var id = selectBox.value; 
//alert("groupid = " + id); 
ajaxEngine.sendRequest( 'ajaxStudentID', "id=" + id); 
} 
 
registerAjaxStuff(); 
</script

This passes "ajaxStudentID" to the file dropdownlist.jsp at the onChange event of the dropdownlist and filters the dropdown list below were div id = "examDropDownList". How can do the same filtering above but this time passing two values so the original "ajaxStudentID" and the onChange "value" of the second downdown, in order to filter the third dropdown.

[Patricia Samuel]

Zubi,

In your last post i ask you how you are implementing AJAX. See use a correct framework can help you in solving all the problems for AJAX. Just implement DWR framework for implementing ajax.
Please tell me are you using struts in you application.

Regards

[Patricia Samuel]

Zubi

go through this link
http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html
and let me know if you face any problem implementing dwr in your application.

Thanks

[vinod kalghatgi]

[Edit: thread hi-jack removed. Please post your own questions in a new topic.]
[ June 09, 2008: Message edited by: Bear Bibeault ]