getting this Ajax code to work with jsp

[Zubi Pen]

Hello Everyone,

I need some help to implement a filter on a dropdown list in a jsp page using Javascript. I have got the filtering working in Java code and jsp, but do not know how to use javascript to run the jsp on changes made to the dropdown.

Basically, I have three dropdown list, the first of displays the list of student names, second one displays list of exams taken and the last one displays exams passed. What I am trying to do is, when the user selects a student name from the first dropdown, it filters the second dropdown list and only displays the exams taken by the student name selected in the first dropdown. And similarly when the user selects exams taken from the second dropdown, it filters the third dropdown and only displays the list of exams passed by student name and exam name selected in the above two dropdowns.

I have got the filtering working in the java code and the filter works fine in jsp, providing I keep presses the refresh button. I need help with the Javascript event.

Below is my code in jsp:

  
<tr><td>
//This is the first DropDown
<select name="studentID" id="studentID">
        <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()
 
<select name="examID" id="examID">
        <option value="0" selected>Select...</option>
        <%=exam.createList(stuForm.getStudentID(), stuForm.getExamID())%> 
        </select>  
</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 my explanation of the above:

1. The first dropdown simply creates a list of student name by using method <%=student.getList(stuForm.getStudentID())%>

2. The second dropdown creates a list of exams details by taking in a value returned by stuForm.getStudentID(), and if the dropdown was already selected then it would display the current value returned by stuForm.getExamID()
<%=exam.createList(stuForm.getStudentID(), stuForm.getExamID())%>

3. The third dropdown creates a list of exam passed by taking in values returned by stuForm.getStudentID() and stuForm.getExamID() and if the dropdown was already slected then it would display the current value returned by stuForm.getPassID()

I hope I am making sense. Again I need help with javascript that could pass the right IDs and run the method on clientside based on changes in the dropdown. I am a newbie in javascript and would really appreciate any help and guidance.

Thanks
Zub

[ March 23, 2008: Message edited by: Bear Bibeault ]

[ March 23, 2008: Message edited by: Bear Bibeault ]

[ March 25, 2008: Message edited by: Zubi Pen ]
[ March 25, 2008: Message edited by: Bear Bibeault ]

[pravin kantipudi]

hey do this , I am not sure what you want to do with thta value. just to give you a start

<script type="text/javascript">
function eun(var id) {
//retrieve the value using this statement
document.getElementById(id).value
}
</script>

<select name="studentID" id="studentID" onchange="javascript:run(studentID);return false;">

<select name="examID" id="examID" onchange="javascript:run(examID);return false;">

<select name="passID" id="passID" onchange="javascript:run(passID);return false;">

[Bear Bibeault]

onchange="javascript:

This is not correct. You do not specify any pseudo-protocol on event handler attributes.

[Bear Bibeault]

Zubi Pen, you have a misunderstanding regarding how JSP's work. The JSP runs on the server in order to format the page and send it to the browser. Once sent, it is no longer possible to use JSP mechanisms.

Please read this article for an explanation.

[Zubi Pen]

Thanks for all the replies and advise.

Once sent, it is no longer possible to use JSP mechanisms.

In this case, how can I run a Filter on the dropdown on the client side then? I simply want to filter the dropdowns based on user selections. A simple example will be if user selects United Kingdom in the country dropdown and then in the city Dropdown it returns all the cities located in UK. The only thing is my case is the DropDown List is created using a method called createList() passing the appropriate parameter.
[ March 24, 2008: Message edited by: Zubi Pen ]

[Bear Bibeault]

Originally posted by Zubi Pen:
In this case, how can I run a Filter on the dropdown on the client side then?

If the operation must contact the server, to grab the info from a DB for example, you must make a new request to the server. Nowadays, Ajax is the most common means to perform such ancillary contacts (rather than submitting and refreshing the whole page).
[ March 24, 2008: Message edited by: Bear Bibeault ]

[Zubi Pen]

Since you guys advised me to use Ajax to filter the dynamic dropdown, I used the code from this Ajax site, heres the link:

Ajax

But it doesnt seem to work. Below is my full jsp code. Could anymore advise me how to get the ajax code to work with my jsp page.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/page3.dwt.jsp" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
 
<body>
 
<script type="text/javascript">
 
var AdminResponse = "";
 
function parseResponse(){
 
var nText = AdminResponse.getElementsByTagName('optionText');
var nVal = AdminResponse.getElementsByTagName('optionVal');
document.forms[0]['group'].options.length = 1;
for (i=0; i<nText.length; i++)
{ 
 var nOption = document.createElement('option'); 
 var isText = document.createTextNode(nText[i].firstChild.data); 
 nOption.setAttribute('value',nVal[i].firstChild.data); 
 nOption.appendChild(isText); 
 document.forms[0]['group'].appendChild(nOption); 
}
}
 
function update(nVal){
 
var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
AdminRequest.onreadystatechange = function()
{
   if (AdminRequest.readyState == 4)
{
 if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseResponse();
}
 else {
alert('Error student.jsp File '+ AdminRequest.statusText); //I wasn't too sure what to put here since your example was for update.php, I have simply put the name of my current jsp page
}
}
}
var infoStr = "?choice="+nVal;
AdminRequest.open("GET", "student.jsp"+infoStr, true); //I wasn't too sure what to put here since your example was for update.php, I have simply put the name of my current jsp page
AdminRequest.send(null); 
}
 
</script>
 

<tr><td>
//This is the first DropDown
<select name="studentID" id="studentID">
        <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()
 
<select name="examID" id="examID">
        <option value="0" selected>Select...</option>
        <%=exam.createList(stuForm.getStudentID(), stuForm.getExamID())%> 
        </select>  
</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>

[Zubi Pen]

I cannot seem to figure out the Ajax code here, is there any Javascript code that simply reloads the page each time I have a selection in the dropdown

[Patricia Samuel]

Originally posted by Zubi Pen:
Since you guys advised me to use Ajax to filter the dynamic dropdown, I used the code from this Ajax site, heres the link:
[/CODE]

Dear Zubi,
AJAX can help you in your problem. Tell me how did you implement AJAX in your code. Are you able to make a hit on server whenever you click on a dropdown.

Best Regards

[Zubi Pen]

Hi Pat,

Thanks for your reply. I have got it to work in Ajax, I was passing the wrong student ID which was causing the problem all along...

Thanks,
Zub