Hi,
I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (
http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly.
I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links.
The code that does this is as follows:
HTML CODE:
Code:
<span id="userName" class="editText">John Doe</span>
JAVASCRIPT - controls when text is clicked for input to appear:
Code:
//edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
width = widthEl(actual.id) + 20;
height =heightEl(actual.id) + 2;
if(height < 40){
if(width < 100) width = 150;
actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
}else{
if(width < 70) width = 90;
if(height < 50) height = 50;
actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
}
changing = true;
}
actual.firstChild.focus();
}
JAVASCRIPT - Initiated the update of the field.
Code:
function fieldBlur(campo,idfld) {
if (campo.value!="") {
elem = document.getElementById( idfld );
remotos = new datosServidor;
nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
elem.innerHTML = nt;
changing = false;
return false;
}
}
I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie.
Code:
onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');"
But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box?
If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from -
http://www.yvoschaap.com/weblog/ajax...pdate_text_20/
Thanks in advance
Before you post, read our: 
