Edit Multiple rows in a table

Hi ,

I have a table with multiple records in it and every record is associated with a check-box.
Now my problem is I am not able to make the fields in the record editable as and when the check-box is clicked.
Be it a single record or multiple records, i am stuck in making them editable. And i want to edit only dos records whose corresponding check-box is ticked.
Please help.

Its very critical and URGENT!!!

Thanks in Advance
Harish

Harish Venkatesh wrote:
Its very critical and URGENT!!!

No it isn't. Please read this --> EaseUp

You problem description isn't very clear. Do you already have input fields that need to change from read-only to editable? How about showing us some code for what you have so far?

In any case, it sounds like you're going to need to use Javascript to capture the change event on the checkbox and act accordingly.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@page import="java.util.List"%>
<%@page import="com.bristlecone.cokemrcDAO.RefurbOCDBean"%>
<html>
<% List blist=(List)request.getAttribute("Refurblist"); %>
<head>
<script type="text/javascript">
function elementsById(ids){
var idsget = [].slice.call(arguments), result = {};
for (var i=0;i<idsget.length;i=i+1){
result[idsget[i]] = document.getElementById(idsget[i]);
}
return result;
}
function load()
{
document.getElementById("dueDate");
var tbl = document.getElementById("table");
var tblrows=tbl.cells.length;
alert(tbl.cells.length);
alert(document.getElementsByTagName("td"));
//document.getElementById("dueDate").value="readonly";
var visible = true;
var tds = findElementsWithClass('td');
//alert(document.gridForm.dd.value);
//var dueDate=document.getElementById("dueDate").innerHTML;
//alert(tbl.childNodes[0].innerHTML);
tbl.childNodes[0].readOnly="true"
for(var i=1; i<tblrows; i++){
//tbl.cells[i].innerHTML.readOnly="true";
//document.getElementsByTagName("input")("dueDate")=false;
//for (var i=0, len=tds.length; i<len; ++i) {
// tds[i].parentNode.style.display = visible ? '' : 'none';

}
}
function checkAll()
{
var elements=new Array();

elements = document.getElementsByClassName(className);

alert(elements.length);

for(var i=0; i<elements.length; i++){

alert('here');

alert(elements[i].id);

removeAttribute('readOnly');

}
/*var table = document.getElementById("table");
alert(table.cells[3].innerHTML);
for (var i = 0, cell; cell = table.cells[i]; i++) {
if(cell.childNodes[0].checked==true){
alert(cell.childNodes[1].innerHTML);
//table.cells[3].childNodes[0].disabled=false;
//document.getElementsByTagName("input")[3].childNodes[0].readonly=false;
//table.cells[3].childNodes[0].removeAttribute('readonly');
document.getElementById("dueDate").removeAttribute('readOnly');
cell.removeAttribute('readOnly'); */
}

}
}

</script>
</head>

<body onload="load()">
<form name="gridForm">
<table border="1" id="table">
<tr>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Request ID</th>
<th nowrap="nowrap">Request Date</th>
<th nowrap="nowrap">Due Date</th>
<th>Quantity</th>
<th>Impact</th>
<th>Source</th>
<th>Destination</th>
<th>Part</th>
<th>Part Description</th>
<th>Dgi Part</th>
<th>Dgi Part Description</th>
<th>Unit Cost</th>
<th>Repair Cost</th>
<th>Extended Cost</th>
<th>Status</th>
<th>Network</th>
<th>Last Modified Date</th>
<th>Last Modified By</th>
<th>Created by Step</th>
</tr>
<tr>
<%

for (int i = 0; i < blist.size(); i++) {
RefurbOCDBean viewDO =(RefurbOCDBean)blist.get(i);
%>

<!—give class name for all those fields you want to edit on click of check box-->

<td><input type="checkbox" id="act" onclick=”enable(‘editable’);” /></td>
<td><input type="text" id="requestID" class=”.editable” value="<%=viewDO.getRequestID()%>" readonly="readonly" /></td>
<td><input type="text" id="requestDate" class=”.editable” value="<%=viewDO.getRequestDate()%>" readonly="readonly" /></td>
<td><input type="text" id="dueDate" name="dd" class=”.editable” value="<%=viewDO.getDueDate()%>" readonly /></td>
<td><input type="text" id="quantity" class=”.editable” value="<%=viewDO.getQuantity()%>" readonly="readonly" /></td>
<td><input type="text" id="impact" class=”.editable” value="<%=viewDO.getImpact()%>" readonly="readonly" /></td>
<td><input type="text" id="source" class=”.editable” value="<%=viewDO.getSource()%>" readonly="readonly" /></td>
<td><input type="text" id="destination" class=”.editable” value="<%=viewDO.getDestination()%>" readonly="readonly" /></td>
<td><input type="text" id="part" value="<%=viewDO.getPart()%>" readonly="readonly" /></td>
<td><input type="text" id="partdescription" value="<%=viewDO.getPartdescription()%>" readonly="readonly" /></td>
<td><input type="text" id="dgipart" value="<%=viewDO.getDgipart()%>" readonly="readonly" /></td>
<td><input type="text" id="dgipartdescription" value="<%=viewDO.getDgipartdescription()%>" readonly="readonly" /></td>
<td><input type="text" id="unitcost" value="<%=viewDO.getUnitcost()%>" readonly="readonly" /></td>
<td><input type="text" id="repaircost" value="<%=viewDO.getRepaircost()%>" readonly="readonly" /></td>
<td><input type="text" id="extendedcost" value="<%=viewDO.getExtendedcost()%>" readonly="readonly" /></td>
<td><input type="text" id="status" value="<%=viewDO.getStatus()%>" readonly="readonly" /></td>
<td><input type="text" id="network" value="<%=viewDO.getNetwork()%>" readonly="readonly" /></td>
<td><input type="text" id="lastmodifieddate" value="<%=viewDO.getLastmodifieddate()%>" readonly="readonly" /></td>
<td><input type="text" id="lastmodifiedby" value="<%=viewDO.getLastmodifiedby()%>" readonly="readonly" /></td>
<td><input type="text" id="createdbyStep" value="<%=viewDO.getCreatedbyStep()%>" readonly="readonly" /></td>
</tr>
<%} %>
</table>

<input type="button" value="EDIT" />
</form>
</body>
</html>

Please use code tags and proper indentation so your code is easier to read.

So what happens when you run this code? Does it compile? Runtime exception? Javascript error? I can't run the code to test it as I don't have Struts installed, nor do I have the RefurbOCDBean.

I suspect you are using a text editor instead of an IDE. There's nothing wrong with that. I strongly believe it's the best way to learn. However, NetBeans picked up a couple of errors that an editor won't catch, like the extra curly brace on line 74.

When I saved the file, NetBeans warned me that it contained characters that might be damaged when saving with ISO-8859-1 encoding. I've never seen that error before, but I notice some odd double quotation marks such as those on line 115. I'm not sure what the resolution is to this one, but there seems to be a conflict between the encoding used by your system and the encoding expected based on the page directive.

function deletePR()
{
alert("**********");
var tbl = document.getElementById("table");
var counter=tbl.rows.length;
alert(tbl.rows.length);
for(var i=1; i<=counter; i++){
document.getElementById("dueDate")[i].setAttribute('readOnly',true);

}

}

when i call this function on click of edit button. i get an error saying document.getElementByID(...)[..] is null or not an object. First im trying to make readOnly property to true.
then i want all the checked(checkbox=checked) values based on this only those fields(input type text) should be editable.And finally pass these values to jsp page's list.so far i was successful in making
only first field as readOnly.
Im very new to this javascript just trying different codes from the web.

Thanks for your time.

Harish Venkatesh wrote:
document.getElementById("dueDate")[i].setAttribute('readOnly',true);

I don't think it's valid to use an index with getElementById like that. I did a quick search and didn't find an example like that, but I could be wrong.

Bear, we might get more answers if this is moved to the Javascript forum. I think we've established that this is a Javascript issue, not a JSP issue.