I have a 2 jsp files as shown below.
I have a parent jsp page where there are two options in the select drop down box.
And i have another jsp which displays select boxes inside a table.
I want the dispTable.jsp's output as an ajax response in the page parent.jsp if the user selects the option "one" in the drop down select box.
The problem i am facing is the parent.jsp page displays the content of the dispTable.jsp in the parent.jsp page as ajax response but the '>>' and '<<' buttons do not work.
But if i try to execute the dispTable.jsp by directly providing the parameter and value in the url the select tables and the buttons just work perfectly.
How is that the same output is not working for parent.jsp.
For the below url the output is working perfectly. http://student.details.com:8080/stud/dispTable.jsp?count=one
**parent.jsp**
<html>
<head>
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp
function showEmp(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="dispTable.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("emp").innerHTML=xmlHttp.responseText
}
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#add').click(function() {
return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));
});
$('#remove').click(function() {
return !$('#list2 option:selected').remove().appendTo('#list1');
});
});
var arrOldValues;
function FillListValues(CONTROL)
{
var intNewPos;
var arrNewValues = GetSelectValues(CONTROL);
for (var i = 0; i < arrNewValues.length; i++) {
if (arrNewValues[i] == 1) {
intNewPos = i;
}
}
for (var i = 0; i < arrOldValues.length; i++) {
if (arrOldValues[i] == 1 && i != intNewPos) {
CONTROL.options[i].selected = true;
} else if (arrOldValues[i] == 0 && i != intNewPos) {
CONTROL.options[i].selected = false;
}
if (arrOldValues[intNewPos] == 1) {
CONTROL.options[intNewPos].selected = false;
} else {
CONTROL.options[intNewPos].selected = true;
}
}
}
function GetSelectValues(CONTROL)
{
var strTemp = [];
for (var i = 0; i < CONTROL.length; i++) {
if (CONTROL.options[i].selected == true) {
strTemp.push(1);
} else {
strTemp.push(0);
}
}
return strTemp;
}
function GetCurrentListValues(CONTROL)
{
arrOldValues = GetSelectValues(CONTROL);
}
</script>
</head>
<body>
<select name = "ratingsClient" style="width: 150px" id="ratingsClient" onchange="showEmp(this.value)">
<option value="aaa">aaa</option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<br>
<div id="emp">
<table name="emp" >
</table>
</div>
</body>
</html>
**dispTable.jsp**
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#add').click(function() {
return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));
});
$('#remove').click(function() {
return !$('#list2 option:selected').remove().appendTo('#list1');
});
});
var arrOldValues;
function FillListValues(CONTROL)
{
var intNewPos;
var arrNewValues = GetSelectValues(CONTROL);
for (var i = 0; i < arrNewValues.length; i++) {
if (arrNewValues[i] == 1) {
intNewPos = i;
}
}
for (var i = 0; i < arrOldValues.length; i++) {
if (arrOldValues[i] == 1 && i != intNewPos) {
CONTROL.options[i].selected = true;
} else if (arrOldValues[i] == 0 && i != intNewPos) {
CONTROL.options[i].selected = false;
}
if (arrOldValues[intNewPos] == 1) {
CONTROL.options[intNewPos].selected = false;
} else {
CONTROL.options[intNewPos].selected = true;
}
}
}
function GetSelectValues(CONTROL)
{
var strTemp = [];
for (var i = 0; i < CONTROL.length; i++) {
if (CONTROL.options[i].selected == true) {
strTemp.push(1);
} else {
strTemp.push(0);
}
}
return strTemp;
}
function GetCurrentListValues(CONTROL)
{
arrOldValues = GetSelectValues(CONTROL);
}
</script>
<script type="text/javascript" src="select.js"></script>
</head>
<body>
<%
String name=request.getParameter("count");
if(name.equals("one"))
{
String buffer1="<table>";
buffer1=buffer1+"<tr>";
buffer1=buffer1+"<td>";
buffer1=buffer1+"<SELECT class=\"select\" NAME=\"list1\" onMouseDown=\"GetCurrentListValues(this);\" id=\"list1\" MULTIPLE SIZE=10 style=\"width:150px;\" onClick=\"FillListValues(this)\">";
buffer1=buffer1+"<option value=\"co_group\">Compnay Description</option>";
buffer1=buffer1+"<option value=\"pe_rev_name\">Contact Name</option>";
buffer1=buffer1+"<option value=\"co_tel_work\">Telephone</option>";
buffer1=buffer1+"<option value=\"action_flag\">Company Address</option>";
buffer1=buffer1+"<option value=\"co_group\">Compnay Description</option>";
buffer1=buffer1+"<option value=\"pe_rev_name\">Contact Name</option>";
buffer1=buffer1+"<option value=\"co_tel_work\">Telephone</option>";
buffer1=buffer1+"<option value=\"pe_position\">Contact Position</option>";
buffer1=buffer1+"<option value=\"pe_tel_work\">Contact Telephone</option>";
buffer1=buffer1+"<option value=\"ref_no\">ISBN</option>";
buffer1=buffer1+"</SELECT>";
buffer1=buffer1+"</td>";
buffer1=buffer1+"<td>";
buffer1=buffer1+"<INPUT TYPE=\"button\" NAME=\"right\" VALUE=\">>\" id=\"add\" style=\"width:40px;\"><BR><BR>";
buffer1=buffer1+"<INPUT TYPE=\"button\" NAME=\"left\" VALUE=\"<<\" id=\"remove\" style=\"width:40px;\"><BR><BR>";
buffer1=buffer1+"</td>";
buffer1=buffer1+"<td>";
buffer1=buffer1+"<SELECT NAME=\"list2\" onMouseDown=\"GetCurrentListValues(this);\" id=\"list2\" MULTIPLE SIZE=10 style=\"width:150px;\" onClick=\"FillListValues(this)\">";
buffer1=buffer1+"</SELECT></td></tr>";
buffer1=buffer1+"</table>";
response.getWriter().println(buffer1);
}
%>
</body>
</html>
You have the same Javascript both in "parent" and in "dispTable" - you need to remove it from one of them.
see functions like GetSelectValues(CONTROL) and FillListValues(CONTROL).
By the way - you don't need to use the "buffer" you can write something like this
....Please note I used "one".equals(name) and not name.equals("one") as it also handles null cases. please let me know if there's anything else you need that I might have missed.
Here is my working code (I had remove the if 'one'.equals condition on my workspace since it does not support JSP)
the parent file looks like this :
<html>
<head>
<script language="javascript" type="text/javascript">
function showEmp(str){
$("#emp").load("dispTable.jsp");
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
function add()
{
return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));
}
function remove()
{
return !$('#list2 option:selected').remove().appendTo('#list1');
}
</script>
<select name = "ratingsClient" style="width: 150px" id="ratingsClient" onchange="showEmp(this.value)">
<option value="aaa">aaa</option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<br>
<div id="emp">
<table name="emp" >
</table>
</div>
</body>
</html>
And the "dispTable" file looks like this
<table>
<tr>
<td>
<SELECT class="select" NAME="list1" id="list1" MULTIPLE SIZE=10 style="width:150px;">;
<option value="co_group">Compnay Description</option>
<option value="pe_rev_name">Contact Name</option>
<option value="co_tel_work">Telephone</option>
<option value="action_flag">Company Address</option>
<option value="co_group">Compnay Description</option>
<option value="pe_rev_name">Contact Name</option>
<option value="co_tel_work">Telephone</option>
<option value="pe_position">Contact Position</option>
<option value="pe_tel_work">Contact Telephone</option>
<option value="ref_no">ISBN</option>
</SELECT>
</td>
<td>
<INPUT TYPE="button" NAME="right" VALUE=">>" id="add" onclick="add()" style="width:40px;"><BR><BR>
<INPUT TYPE="button" NAME="left" VALUE="<<" id="remove" onclick="remove()" style="width:40px;"><BR><BR>
</td>
<td>
<SELECT NAME="list2" id="list2" MULTIPLE SIZE=10 style="width:150px;">
</SELECT>
</td>
</tr>
</table>
EDIT : extending the response to show how to send "value" of select box in the ajax request using "GET" method instead of "LOAD"
function showEmp(str){
$.get("dispTable.jsp",{"count":str},function(result){$("#emp").html(result)})
}