PDA

View Full Version : delete any row from table and rearrange the ids

arin
09-20-2006, 05:30 PM
Dear pals,
I have got stucked in an 'add-edit-delete row from a table' problem.Below is the display.jsp which gets the table data from a java request object.This jsp populates a table and through addNew, editpopup & delete buttons the table can be modified.the problem lies with the delete button as i can't select any row thereafter so i can't delete more than one row. Plz help me.a popup appears when add or edit buttons are pressed.but in case of delete it is not called though.if after selecting a row 'delete' button is pressed, then the row will be deleted without any popup appeared with the form values.i don't have any problem with add and edit actions.problem lies with delete only.Plz help asap.Thanks in anticipation.

display.jsp
---------------
<%@ page session="true"
import="java.util.*"
%>
<%@page import="com.cts.jdbcexample.helper.UserInfo"%>
<html>
<head>
<title>
Session Test
</title>
</head>

<%
int size=0;
ArrayList arrUserDetails = request.getAttribute("UserDetails") != null ? (ArrayList)request.getAttribute("UserDetails"): null;
if(arrUserDetails != null && arrUserDetails.size() > 0)
size = arrUserDetails.size();
%>
<script language="javascript">
function showPopup()
{
var actEdit = new String("Edit");
var hdnrowno = document.DisplayForm.hdnSelectedUser.value;
var userid=eval("document.DisplayForm.uid_"+hdnrowno).value;
var userName=eval("document.DisplayForm.uname_"+hdnrowno).value;
var emailId=eval("document.DisplayForm.emailid_"+hdnrowno).value;
var contactNo=eval("document.DisplayForm.contactno_"+hdnrowno).value;
var queryString='userId='+userid;
queryString=queryString+'&userName='+userName;
queryString=queryString+'&emailId='+emailId;
queryString=queryString+'&contactNo='+contactNo;
queryString=queryString+'&hdnrowNo='+hdnrowno;
queryString=queryString+'&action='+actEdit;
window.open('../jsp/editpopup.jsp?'+queryString,'newWindow','scrollbars=yes,status=yes,width=400,height=400,resizable=1, top=40,left=100');
}
var lastRowselected = 0;
function selectRow(rowSelected)
{
var rowId = 'userRow_' ;
var prevSelectedRow = rowId + lastRowselected;
objPrevRow = document.getElementById(prevSelectedRow);
objPrevRow.bgColor = '';

var selectedRow = rowId + rowSelected;
objSelectedRow = document.getElementById(selectedRow);
objSelectedRow.bgColor = '#8AA7CE';

document.DisplayForm.hdnSelectedUser.value = rowSelected;
lastRowselected = rowSelected;
}

function saveUpdate(a)
{
document.DisplayForm.Action.value=a;
document.DisplayForm.submit();
}
function addNew()
{
var actAdd=new String("Add");
var queryString ='action='+actAdd;
window.open('../jsp/editpopup.jsp?'+queryString,'newWindow','scrollbars=yes,status=yes,width=400,height=400,resizable=1, top=40,left=100');
}

function deleteRow()
{
var actDelete=new String("Delete");
var queryString ='action='+actDelete;
Reject();
}

function Reject ()
{
var tbl = document.getElementById('TBDY1');
var rowSelected = eval(eval("document.DisplayForm.hdnSelectedUser").value)+1;
var rows=tbl.getElementsByTagName('TR');
var ary=[];
for (var m=0;m<rows.length;m++)
{
ary.push(rows[m]);
}
for (var n=0;n<ary.length;n++){
if(n==rowSelected)
tbl.removeChild(ary[rowSelected]);
}
}

function Receive (a1,a2,a3,a4,b)
{
var maxindex = eval(eval("document.DisplayForm.Size").value) + 1;
var table = document.getElementById('TBDY1');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var td4 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var inp3 = document.createElement('INPUT');
var inp4 = document.createElement('INPUT');

inp1.setAttribute("uid_" +maxindex,"uid_" +maxindex);
inp1.name="uid_" +maxindex;
inp1.id="uid_" +maxindex;
inp1.value=a1;
inp1.style.border="";
inp1.style.background="url(/../img/cnvbkgnd.gif)";
inp1.readOnly="true";

inp2.setAttribute("uname_" +maxindex,"uname_" +maxindex);
inp2.name="uname_" +maxindex;
inp2.id="uname_" +maxindex;
inp2.value=a2;
inp2.style.border="";
inp2.style.background="url(/../img/cnvbkgnd.gif)";
inp2.readOnly="true";

inp3.setAttribute("emailid_" +maxindex,"emailid_" +maxindex);
inp3.name="emailid_" +maxindex;
inp3.id="emailid_" +maxindex;
inp3.value=a3;
inp3.style.border="";
inp3.style.background="url(/../img/cnvbkgnd.gif)";
inp3.readOnly="true";

inp4.setAttribute("contactno_" +maxindex,"contactno_" +maxindex);
inp4.name="contactno_" +maxindex;
inp4.id="contactno_" +maxindex;
inp4.value=a4;
inp4.style.border="";
inp4.style.background="url(/../img/cnvbkgnd.gif)";
inp4.readOnly="true";

td1.appendChild(inp1);
td1.width="20%";
td1.height="20"
td1.align="left"

td2.appendChild(inp2);
td2.width="20%";
td2.height="20"
td2.align="left"

td3.appendChild(inp3);
td3.width="20%";
td3.height="20"
td3.align="left"

td4.appendChild(inp4);
td4.width="20%";
td4.height="20"
td4.align="left"

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);

tr.name = "userRow_" + maxindex;
tr.id = "userRow_" + maxindex;
tr.height = "20";

table.appendChild(tr);

var tableRow = "userRow_" + maxindex;
document.all[tableRow].onclick = selectThisRow;
document.all[tableRow].ondblclick = showPopup;
}


function selectThisRow(){
var rowId = this.id;
var rowIndexArray = rowId.split("_");
var rowIndex = rowIndexArray[1];
selectRow(rowIndex);
}
</script>
<body background="../img/cnvbkgnd.jpg" bgcolor="#FFFFFF" text="#000000" link="#0066CC" vlink="#006666" alink="#996699">
<form method="post" name="DisplayForm" action="success">
<input type = "hidden" name = "Action" id = "Action" value = "">
<input type = "hidden" name = "hdnSelectedUser" id = "hdnSelectedUser" value = "">
<input type = "hidden" name = "Size" id = "Size" value = "<%= size%>">
<table border="0" cellpadding="0" width="100%">
<tr>
<td width="100%" height="140">
<h1 align="center"><font size="7" face="Algerian">LOGIN TEST DISPLAY</font></h1>
<p align="center"><img src="../img/cnvrule.gif"></p>
<p>&nbsp;</td>
</tr>
<tr>
<td width="100%" height="20" valign="top" align="left">
<table align="center" border="0" cellpadding="0" width="80%" height="129">
<tbody id="TBDY1" >
<tr>
<td width="20%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Login Id:</b></font>
</td>
<td width="20%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>User Name:</b></font>
</td>
<td width="40%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Email ID:</b></font>
</td>
<td width="20%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Contact:</b></font>
</td>
</tr>
<% for(int i=0;i<size;i++)
{
UserInfo usrBean = (UserInfo)arrUserDetails.get(i);
%>
<tr name = "userRow_<%=i%>" id = "userRow_<%=i%>" onclick = "selectRow(<%=i%>)" height = "20" ondblclick="showPopup()">
<td width="20%" height="20" align="left">
<input type="text" style="border:none; background:'../img/cnvbkgnd.gif'" name="uid_<%=i %>" id="uid_<%=i %>" size="25" value="<%= usrBean.getUserid()%>">
</td>
<td width="20%" height="20" align="left">
<input type="text" style="border:none; background:'../img/cnvbkgnd.gif'" name="uname_<%=i %>" id="uname_<%=i %>" size="25" value="<%= usrBean.getName()%>">
</td>
<td width="40%" height="20" align="left">
<input type="text" style="border:none; background:'../img/cnvbkgnd.gif'" name="emailid_<%=i %>" id="emailid_<%=i %>" size="25" value="<%=usrBean.getEmail()%>">
</td>
<td width="20%" height="20" align="left">
<input type="text" style="border:none; background:'../img/cnvbkgnd.gif'" name="contactno_<%=i %>" id="contactno_<%=i %>" size="25" value="<%=usrBean.getContactno()%>">
</td>
</tr>
<%
}
%>
</tbody>
</table>
</td>
<tr>
<td align=center width="100%">
<input type=button name=btnEdit value="EDIT POPUP" onclick="showPopup()">
<input type=button name=btnSave value="SAVE UPDATE" onclick="saveUpdate('Save')">
<input type=button name=btnAdd value="ADD NEW" onclick="addNew()">
<input type=button name=btnDelete value="DELETE" onclick="deleteRow()">
<input type=button name=btnClose value="CLOSE WINDOW" onclick="window.close()">
</td>
</tr>
</table>
</form>
</body>
</html>




editpopup.jsp
----------------
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Popup</title>
</head>
<%
String userId = (String)request.getParameter("userId")!= null ? (String)request.getParameter("userId"):"";
String name = (String)request.getParameter("userName")!= null ? (String)request.getParameter("userName"):"";
String emailId = (String)request.getParameter("emailId")!= null ? (String)request.getParameter("emailId"):"";
String contact = (String)request.getParameter("contactNo")!= null ? (String)request.getParameter("contactNo"):"";
String hdnrowSelected = (String)request.getParameter("hdnrowNo")!= null ? (String)request.getParameter("hdnrowNo"):"";
String action = (String)request.getParameter("action");

%>
<script language="javascript">
function saveData()
{
var hdnrowno = document.EditPopupForm.hdnSelectedUser.value;
var actionNext = document.EditPopupForm.actionNext.value
if (actionNext=="Edit")
{
eval("self.opener.document.DisplayForm.uid_"+hdnrowno).value=document.EditPopupForm.uid_popup.value;
eval("self.opener.document.DisplayForm.uname_"+hdnrowno).value=document.EditPopupForm.uname_popup.va lue;
eval("self.opener.document.DisplayForm.emailid_"+hdnrowno).value=document.EditPopupForm.emailid_popu p.value;
eval("self.opener.document.DisplayForm.contactno_"+hdnrowno).value=document.EditPopupForm.contactno_ popup.value;
}
else if (actionNext=="Add")
{
window.opener.Receive (document.EditPopupForm.uid_popup.value,document.EditPopupForm.uname_popup.value,
document.EditPopupForm.emailid_popup.value,document.EditPopupForm.contactno_popup.value,'TBDY1');
}
window.close();
}
</script>
<body>
<form method="post" name="EditPopupForm" action="success">
<input type = "hidden" name = "hdnSelectedUser" id = "hdnSelectedUser" value = "<%= hdnrowSelected%>">
<input type = "hidden" name = "actionNext" id = "actionNext" value = "<%= action%>">
<table align="center" border="0" cellpadding="0" width="80%" height="129">
<tr>
<td width="25%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Login Id:</b></font>
</td>
<td width="25%" height="20" align="left">
<input type="text" name="uid_popup" id="uid_popup" size="10" value="<%=userId%>">
</td>
</tr>
<tr>
<td width="25%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>User Name:</b></font>
</td>
<td width="25%" height="20" align="left">
<input type="text" name="uname_popup" id="uname_popup" size="25" value="<%=name%>">
</td>
</tr>
<tr>
<td width="25%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Email ID:</b></font>
</td>
<td width="25%" height="20" align="left">
<input type="text" name="emailid_popup" id="emailid_popup" size="40" value="<%=emailId%>">
</td>
</tr>
<tr>
<td width="25%" height="20">
<font face="Baskerville Old Face" color="#000080"><b>Contact:</b></font>
</td>
<td width="25%" height="20" align="left">
<input type="text" name="contactno_popup" id="contactno_popup" size="25" value="<%=contact%>">
</td>
</tr>
<tr>
<td align=center width="100%">
<input type=button name=Save value="Save" onclick="saveData()">
</td>
<td align=center width="100%">
<input type=button name=Close value="Close" onclick="window.close()">
</td>
</tr>
</table>
</body>
</html>
Kor
09-20-2006, 05:43 PM
can u isolate your problem? What goes wrong?
arin
09-21-2006, 09:19 AM
dear pal,
actually you don't need to concentrate on 'editpopup.jsp'.what is wrong is with the 'display.jsp'.the 'deleteRow()' function is not working properly.after one single row delete,my selectRow() function doesn't work, i.e. i can't select any other row.so, i can't delete more than one row at one go, which is not desired at all.moreover, i couldn't write the logic for resorting the row ids after every single deletion of a row.i hope it clarifies my problem to some extent.Plz help me.many thanks for your cooperation.
Kor
09-21-2006, 03:12 PM
It ius hard for us to see whwre's the problem when you have posted the whole page and, more then that, with some asp included which we don't know what generates as HTML code.

When I said try to isolate, I said, if possible for you, to post a fragment of the HTML/javascript code which gives you problem. What error to you get? have u tried to see on the FireFox console where could be the javascript error?
arin
09-21-2006, 06:29 PM
Below is my isolated code..My requirement is there will be a table (populated).if one clicks on any row the row color gets changed and if
he select any other row then tha previous row color vanishes and the new row gets highlighted with colour.Now after selecting any row if the user clicks on delete button,then that very row will get deleted with further re-
arrangement of the rows left out.My selectRow() and deleteRow() javascript functions are not working properly because it is faulty.i cannot fix it.moreover,i could not write the logic for "re-arrangement of row ids after deleting any row" because of my lack of knowledge in javascript. If you can write these two functions from scratch with the "re-arrangement of row ids after deleting any row" functionality, it will be very kind of you.i hope this clears the idea a bit.In very brief,my requirement is to select a row and delete it and after that the row ids should be again re-arranged.Plz help me out pal.i am in urgent need of it.

<%@ page session="true"
import="java.util.*"
%>
<%@page import="com.cts.jdbcexample.helper.UserInfo"%>
<%
int size=0;
ArrayList arrUserDetails = request.getAttribute("UserDetails") != null ? (ArrayList)request.getAttribute("UserDetails"): null;
if(arrUserDetails != null && arrUserDetails.size() > 0)
size = arrUserDetails.size();
%>-------////you may ignore upto this,just for continuity as this
'UsereInfo' class is used for populating the table inside
the HTML code-------////

<script language="javascript">
var lastRowselected = 0;

function selectRow(rowSelected)
{
var rowId = 'userRow_' ;
var prevSelectedRow = rowId + lastRowselected;
objPrevRow = document.getElementById(prevSelectedRow);
objPrevRow.bgColor = '';

var selectedRow = rowId + rowSelected;
objSelectedRow = document.getElementById(selectedRow);
objSelectedRow.bgColor = '#8AA7CE';

document.DisplayForm.hdnSelectedUser.value = rowSelected;
lastRowselected = rowSelected;
}

function deleteRow()
{
var actDelete=new String("Delete");
var queryString ='action='+actDelete;
var tbl = document.getElementById('TBDY1');
var rowSelected = eval(eval("document.DisplayForm.hdnSelectedUser").value)+1;
var rows=tbl.getElementsByTagName('TR');
var ary=[];
for (var m=0;m<rows.length;m++)
{
ary.push(rows[m]);
}
for (var n=0;n<ary.length;n++){
if(n==rowSelected)
tbl.removeChild(ary[rowSelected]);
}
}

<html>
<form method="post" name="DisplayForm" action="success">
<input type = "hidden" name = "hdnSelectedUser" id = "hdnSelectedUser" value = "">
<table >
<tbody id="TBDY1" >
<tr>
<td >
<font><b>Login Id:</b></font>
</td>
<td >
<font><b>User Name:</b></font>
</td>
<td >
<font ><b>Email ID:</b></font>
</td>
<td >
<font ><b>Contact:</b></font>
</td>
</tr>-----upto this is table header
<% for(int i=0;i<size;i++)-----table populating starts
{
UserInfo usrBean = (UserInfo)arrUserDetails.get(i);
%>
<tr name = "userRow_<%=i%>" id = "userRow_<%=i%>" onclick = "selectRow(<%=i%>)">///---dynamic row id assigned
<td>
<input type="text" name="uid_<%=i %>" id="uid_<%=i %>" value="<%= usrBean.getUserid()%>">
</td>
<td>
<input type="text" name="uname_<%=i %>" id="uname_<%=i %>" value="<%= usrBean.getName()%>">
</td>
<td>
<input type="text" name="emailid_<%=i %>" id="emailid_<%=i %>" value="<%=usrBean.getEmail()%>">
</td>
<td>
<input type="text" name="contactno_<%=i %>" id="contactno_<%=i %>" value="<%=usrBean.getContactno()%>">
</td>
</tr>
<tr>
<%
}
%>[B]///---table populating ends
<td>
<input type=button name=btnDelete value="DELETE" onclick="deleteRow()">
<input type=button name=btnClose value="CLOSE WINDOW" onclick="window.close()">
</td>
</tr>
</tbody>
</table>
</form>
</html>