ti*@exelsor.co.nz wrote:
Hello All
I am writing an asp app for generating quotes. What I would like to do
is allow the user to edit the quote lines without having to open a new
page each line.
On the quote I have created a loop which goes through the recordset and
populates a sort of data grid. Can you use javascript or something so
the user can click an edit icon on the appropriate line item in the
grid and edit the line details there instead of having to open another
page to edit the line item.
some pointers would be great
Depending on what users have to enter, you can:
- use a prompt to get a value that is written to the cell
- use a div with a textarea element to get the new text
- use a popup with a text area or similar to get the new text
Here's something to get you started. For the modDiv() you could
position the div more appropriately by using the location of the element
that was clicked on (there are plenty of posts showing how to do it),
I've just plonked it on the page. You could also do a lot more with
styling etc.
<html><head>
<title>play</title>
<script type="text/javascript">
// Use a prompt to get new text
function modPrompt(el)
{
var txt = getElText(el);
var newText = prompt('Current value: ' + txt);
if ( newText || '' == newText)
while(el.firstChild) {
el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode(newText));
}
// Use a div to get new text
function modDiv(el)
{
var txt = getElText(el);
// Create a div to use as a dialog
var mDiv = document.createElement('div');
mDiv.style.backgroundColor = '#dddddd';
mDiv.style.border = '1px solid #999999';
mDiv.style.position = 'absolute';
mDiv.style.top = '50px';
mDiv.style.left = '50px';
mDiv.appendChild(document.createTextNode(
'Edit the text, then click save or cancel'));
mDiv.appendChild(document.createElement('br'));
// Use a text area to edit content
var mTA = document.createElement('textarea');
mTA.value = txt;
mDiv.appendChild(mTA);
// Add close button
mDiv.appendChild(document.createElement('br'));
var oBut = document.createElement('input');
oBut.type = 'button';
oBut.value = 'Close';
oBut.onclick = function () {
mDiv.parentNode.removeChild(mDiv);
}
mDiv.appendChild(oBut);
// Add Save button
var oBut = document.createElement('input');
oBut.type = 'button';
oBut.value = 'Save';
oBut.onclick = function () {
while(el.firstChild) {
el.removeChild(el.firstChild);
}
var newText = mTA.value;
el.appendChild(document.createTextNode(newText));
mDiv.parentNode.removeChild(mDiv);
}
mDiv.appendChild(oBut);
document.body.appendChild(mDiv);
}
// Get the text content of an element
function getElText(el)
{
// DOM 3 browsers
if (el.textContent) return el.textContent;
// IE 6 or less (will 7 support textContent?)
if (el.innerText) return el.innerText;
// Others
var x = el.childNodes;
var txt = '';
for (var i=0, len=x.length; i<len; ++i){
if (3 == x[i].nodeType) {
txt += x[i].data;
} else if (1 == x[i].nodeType){
txt += getElText(x[i]);
}
}
return txt.replace(/\s+/g,' ');
}
</script>
<body>
<table border="1">
<tr>
<td>Click the right cell to edit - uses a prompt</td>
<td onclick="modPrompt(this);"> this
<b>Something</b>
needs to be changed
</td>
</tr>
<tr>
<td>Click the right cell to edit - uses a
div and text area</td>
<td onclick="modDiv(this);"> this
<b>needs changing</b>
too
</td>
</tr>
</table>
</body>
</html>
--
Rob