Sh_Rashed
asked on
Apply same ajax in many drop menus in one Form
Hi Experts,
I have a jsb page that has a table . This table are auto-generated according to the database records. For each row , I have ajax apply to its drop menu 1 and fill drop meun 2 and this ajax is applied to all table rows.
so, Can I pass the id of the drop menu (that I wish to fill) in ajax request to the Servlet . Then in my javaScript I get the id to fill the data on it?
for example,
var dropdown = document.getElementById("d ropdown"+i );
and i should get it from the Servlet response ?
I have a jsb page that has a table . This table are auto-generated according to the database records. For each row , I have ajax apply to its drop menu 1 and fill drop meun 2 and this ajax is applied to all table rows.
so, Can I pass the id of the drop menu (that I wish to fill) in ajax request to the Servlet . Then in my javaScript I get the id to fill the data on it?
for example,
var dropdown = document.getElementById("d
and i should get it from the Servlet response ?
could u explain me briefly
Of course you can. You can send any parameters to the request. It does not differ from any other request. Just the response differs.
ASKER
this is my form http://www.4img.com/ar/up/06/11/23/63a7769efbcc83107e5e385ccc6429de.jpg
all the rows int the form has index i from 0 to n (n = number of database records I retreive).
so When I select (in row number 0) ItemModel, the srial number will be displayed in the Serial Number drop box (in the same row 0).
But When I select (in row number 1) ItemModel, the serial number will be displayed in the serial Number drop box (in the row 0).
Because in the javaScript (that receive the response and fill the drop box ), will fill the dropbox that has id = "dropbox2". becuase it hard coded
as the following:
function writeSN(snXML){
var result = snXML;
array2 = result.split("#");
var dropdown = document.getElementById("d ropdown2") ; <------------- Here
dropdown.innerHTML = "";
for ( var I = 0 ; I < array2.length ; I++){
dropdown.options.add(new Option(array2[I],array2[I] ));
}
}
I need to write the response in dropdown+i Where the i is the row number in the form ..
I hope that is clear explaination .. =)
any idea?
all the rows int the form has index i from 0 to n (n = number of database records I retreive).
so When I select (in row number 0) ItemModel, the srial number will be displayed in the Serial Number drop box (in the same row 0).
But When I select (in row number 1) ItemModel, the serial number will be displayed in the serial Number drop box (in the row 0).
Because in the javaScript (that receive the response and fill the drop box ), will fill the dropbox that has id = "dropbox2". becuase it hard coded
as the following:
function writeSN(snXML){
var result = snXML;
array2 = result.split("#");
var dropdown = document.getElementById("d
dropdown.innerHTML = "";
for ( var I = 0 ; I < array2.length ; I++){
dropdown.options.add(new Option(array2[I],array2[I]
}
}
I need to write the response in dropdown+i Where the i is the row number in the form ..
I hope that is clear explaination .. =)
any idea?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
in my example.. as I understood .. i did the following:
function getSN(itemModel) {
var e = itemModel.name; <--- do u mean this ?
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req,w riteSN);
req.open("POST", "cart.do", true);
req.setRequestHeader("Cont ent-Type", "application/x-www-form-ur lencoded") ;
req.send("e"=itemModel); <-- and send it
}
but it gives me alert message: undefined.
function getSN(itemModel) {
var e = itemModel.name; <--- do u mean this ?
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req,w
req.open("POST", "cart.do", true);
req.setRequestHeader("Cont
req.send("e"=itemModel); <-- and send it
}
but it gives me alert message: undefined.
your problem is to identify which row select box the user selects??
ASKER
yes
then that was the solution....
in the above posted code what is itemModel send me the html code where u call this function
in the above posted code what is itemModel send me the html code where u call this function
ASKER
<%@page language="java" import="java.util.*,core.* "%>
<html>
<head>
<meta http-equiv="Content-Langua ge" content="en-us">
<script type="text/javascript" language="javascript" src="ajax1.js"></script>
<script type="text/javascript" language="javascript" src="cart.js"></script>
<script language="JavaScript" type="text/JavaScript">
function checkAll(checked){
for (var i = 0; i<document.issuing.element s.length; i++) {
if ((document.issuing.element s[i].type == "checkbox")) {
document.issuing.elements[ i].checked = checked;
}
}
}
</script>
</head>
<body>
<p> </p>
<%
//String username = session.getAttribute("user name");
%>
<form method="POST" action="action.do">
<input name = "action" type="hidden" value="IssueToEmployee">
<p>Issue to Employee belong to: <select size="1" name="orgnization">
<option>Court</option>
<option>Public</option>
</select> <input type="submit" value="View" name="B1"></p>
</form>
<%
try {
Vector result = new Vector();
result = (Vector)request.getAttribu te("result ");
Helper h = new Helper();
Vector models = new Vector();
if (result.isEmpty() ){
System.out.println("Herrrr rre");
}
else {
System.out.println(" result not empty");
%>
<form method="POST" name = "issuing"action="action.do ">
<table border="1" width="100%" id="table1">
<tr>
<td>Index</td>
<td>Employee Username</td>
<td>Category</td>
<td>Item Model</td>
<td>Item Serial Number</td>
<td><input type="checkbox" name="chkallbox" value="ON" onclick="checkAll(this.che cked)"> </td>
</tr>
<%
for (int i = 0; i <result.size();i++){
Request r = (Request)result.get(i);
models = h.getCatModel(r.getRequest ());
int index = i +1;
%>
<tr>
<td><input name = "i<%= i %>" type = "hidden" value = "<%= i %>"><%=index%></td>
<td><input name = "username<%= i %>" type = "hidden" value = "<%= r.getUsername() %>"><%= r.getUsername()%></td>
<td><input name = "request<%= i %>" type = "hidden" value = "<%= r.getRequest() %>"><%= r.getRequest()%></td>
<td><select size="1" name = "ItemModel<%=i%>" onchange= "getSN(this.options[this.s electedInd ex].value) " >
<option> Select Item Model </option>
<%
for (int c =0 ; c < models.size();c++){
Item ItemModel = (Item)models.get(c);
System.out.println("This is Item Model:"+ItemModel.getItemM odel());
%>
<option value ="<%= ItemModel.getItemModel() %>"><%= ItemModel.getItemModel() %></option>
<%
}// end of for 2
%>
</select></td>
<td><select size="1" name="ItemSNs<%=i %>" id = "dropdown<%= i %>"> </select></td>
<td><input type="checkbox" name="issue" value="ON"></td>
</tr>
<%
}// end of 1 for
%>
</table>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<%
}// end of else
}// end of try
catch (Exception e){
System.out.println("Except ion in Issue To employee"+e.getMessage());
}// end of catch
%>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Langua
<script type="text/javascript" language="javascript" src="ajax1.js"></script>
<script type="text/javascript" language="javascript" src="cart.js"></script>
<script language="JavaScript" type="text/JavaScript">
function checkAll(checked){
for (var i = 0; i<document.issuing.element
if ((document.issuing.element
document.issuing.elements[
}
}
}
</script>
</head>
<body>
<p> </p>
<%
//String username = session.getAttribute("user
%>
<form method="POST" action="action.do">
<input name = "action" type="hidden" value="IssueToEmployee">
<p>Issue to Employee belong to: <select size="1" name="orgnization">
<option>Court</option>
<option>Public</option>
</select> <input type="submit" value="View" name="B1"></p>
</form>
<%
try {
Vector result = new Vector();
result = (Vector)request.getAttribu
Helper h = new Helper();
Vector models = new Vector();
if (result.isEmpty() ){
System.out.println("Herrrr
}
else {
System.out.println(" result not empty");
%>
<form method="POST" name = "issuing"action="action.do
<table border="1" width="100%" id="table1">
<tr>
<td>Index</td>
<td>Employee Username</td>
<td>Category</td>
<td>Item Model</td>
<td>Item Serial Number</td>
<td><input type="checkbox" name="chkallbox" value="ON" onclick="checkAll(this.che
</tr>
<%
for (int i = 0; i <result.size();i++){
Request r = (Request)result.get(i);
models = h.getCatModel(r.getRequest
int index = i +1;
%>
<tr>
<td><input name = "i<%= i %>" type = "hidden" value = "<%= i %>"><%=index%></td>
<td><input name = "username<%= i %>" type = "hidden" value = "<%= r.getUsername() %>"><%= r.getUsername()%></td>
<td><input name = "request<%= i %>" type = "hidden" value = "<%= r.getRequest() %>"><%= r.getRequest()%></td>
<td><select size="1" name = "ItemModel<%=i%>" onchange= "getSN(this.options[this.s
<option> Select Item Model </option>
<%
for (int c =0 ; c < models.size();c++){
Item ItemModel = (Item)models.get(c);
System.out.println("This is Item Model:"+ItemModel.getItemM
%>
<option value ="<%= ItemModel.getItemModel() %>"><%= ItemModel.getItemModel() %></option>
<%
}// end of for 2
%>
</select></td>
<td><select size="1" name="ItemSNs<%=i %>" id = "dropdown<%= i %>"> </select></td>
<td><input type="checkbox" name="issue" value="ON"></td>
</tr>
<%
}// end of 1 for
%>
</table>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<%
}// end of else
}// end of try
catch (Exception e){
System.out.println("Except
}// end of catch
%>
</body>
</html>