Inline Text Edit Issue

[shanejeffery86]

Hey all.

 

I am using a script I found the web for doing an AJAX inline text edit.  Here is the JS that is in the script:

 

Found at: http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20/

 

<!--
//script by http://www.yvoschaap.com

//XMLHttpRequest class function
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
	// Mozilla / Safari
	this._xh = new XMLHttpRequest();
} catch (e) {
	// Explorer
	var _ieModelos = new Array(
	'MSXML2.XMLHTTP.5.0',
	'MSXML2.XMLHTTP.4.0',
	'MSXML2.XMLHTTP.3.0',
	'MSXML2.XMLHTTP',
	'Microsoft.XMLHTTP'
	);
	var success = false;
	for (var i=0;i < _ieModelos.length && !success; i++) {
		try {
			this._xh = new ActiveXObject(_ieModelos[i]);
			success = true;
		} catch (e) {
		}
	}
	if ( !success ) {
		return false;
	}
	return true;
}
}

datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}

datosServidor.prototype.procesa = function() {
if (this._xh.readyState == 4 && this._xh.status == 200) {
	this.procesado = true;
}
}

datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
	this.iniciar();
}
if (!this.ocupado()) {
	this._xh.open("GET",urlget,false);
	this._xh.send(datos);
	if (this._xh.readyState == 4 && this._xh.status == 200) {
		return this._xh.responseText;
	}

}
return false;
}


var urlBase = "update.php";
var formVars = "";
var changing = false;


function fieldEnter(campo,evt,idfld) {
evt = (evt) ? evt : window.event;
if (evt.keyCode == 13 && campo.value!="") {
	elem = document.getElementById( idfld );
	remotos = new datosServidor;
	nt = remotos.enviar(urlBase + "?fieldname=" +encodeURI(elem.id)+ "&content="+encodeURI(campo.value)+"&"+formVars,"");
	//remove glow
	noLight(elem);
	elem.innerHTML = nt;
	changing = false;
	return false;
} else {
	return true;
}


}

/*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,"");

	alert(nt);

	elem.innerHTML = nt;
	changing = false;
	return false;
}
}*/

//edit field created
function editBox(actual) {

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();
}

function printObject(object) {
var str = '';
for(prop in object) {
	if(object.hasOwnProperty(prop))
		str += prop + " : " + object[prop] + "\n";
}
alert(str);
}

//find all span tags with class editText and id as fieldname parsed to update script. add onclick function
function editbox_init(){
if (!document.getElementsByTagName){ return; }
var spans = document.getElementsByTagName("span");

// loop through all span tags
for (var i=0; i<spans.length; i++){
	var spn = spans[i];

        	if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) {
		spn.onclick = function () { editBox(this); }
		spn.style.cursor = "pointer";
		spn.title = "Click to edit!";	
       		}

}


}

//crossbrowser load function
function addEvent(elm, evType, fn, useCapture)
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Please upgrade your browser to use full functionality on this page");
  }
}

//get width of text element
function widthEl(span){

if (document.layers){
  w=document.layers[span].clip.width;
} else if (document.all && !document.getElementById){
  w=document.all[span].offsetWidth;
} else if(document.getElementById){
  w=document.getElementById(span).offsetWidth;
}
return w;
}

//get height of text element
function heightEl(span){

if (document.layers){
  h=document.layers[span].clip.height;
} else if (document.all && !document.getElementById){
  h=document.all[span].offsetHeight;
} else if(document.getElementById){
  h=document.getElementById(span).offsetHeight;
}
return h;
}

function highLight(span){
            //span.parentNode.style.border = "2px solid #D1FDCD";
            //span.parentNode.style.padding = "0";
            span.style.border = "1px solid #000000";          
}

function noLight(span){
        //span.parentNode.style.border = "0px";
        //span.parentNode.style.padding = "2px";
        span.style.border = "0px";   


}

//sets post/get vars for update
function setVarsForm(vars){
formVars  = vars;
}

addEvent(window, "load", editbox_init);
--> 

 

Now, with that Javascript, I am using the following line:

 

<b>First Name:</b><span id=\"fname\">" . $user_data['fname'] . "<a href=\"\" onClick=\"editBox(document.getElementById('fname'))\">edit</a>

 

So, as you guys can see, I am trying to have an edit button next to the field that is supposed to get the inline text edit. 

 

Whenever I click the edit button, it gives me the edit box for that field, but then the edit box just goes away.

 

I cannot figure out what in the JS or the call the issue is.

 

Any ideas?

 

Please let me know if you need any further code.

 

Thanks.

[abazoskib]

How it works

 

A small piece of javascript reads al SPAN tags, checks if it has class=“editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

 

That is directly from the site you got it from. You sure you following those directions?

[abazoskib]

http://www.yvoschaap.com/instantedit/

 

example ^^

[shanejeffery86]

I am not trying to follow the example.  What I want to do is have an edit button that is separate from the text, so that it is much more intuitive.  Users are going to have an issue figuring out to do if I just stick with the base of this script.

 

I need to figure out the set of functions that are being called and the order they are being called in, in order to replicate it with a edit button on the left side of the text that will also pop up the inline edit.

[abazoskib]

I need to figure out the set of functions that are being called and the order they are being called in, in order to replicate it with a edit button on the left side of the text that will also pop up the inline edit.

that's exactly why you should look at the example. to figure out how its done.

[shanejeffery86]

Well, I figured out the problem, now just needing to figure out a solution.

 

<span id=\"fname\" class=\"editText\">" . $user_data['fname'] . "</span><a href=\"\" onClick=\"editBox(document.getElementById('fname'))\">edit</a>

 

When the editBox() function is being called, the entire page is refreshing after the call.  Is there anyway to detect or stop a JS refresh?

[abazoskib]

i think the problem is in the fieldEnter function. looks like there's a url formed in there

[shanejeffery86]

I think it is the onblur event that is the issue.  Look at the editBox function.

 

When I do the onclick event in the HTML page, it calls the editBox function.  Since I am technically not focused on the box that is being edited, it could just be auto-running the fieldBlur function, thereby refreshing the page.

[shanejeffery86]

Alright, getting closer to narrowing it now:

 

<span id=\"fname\">" . $user_data['fname'] . "</span></td><a href=\"\" onClick=\"editBox(document.getElementById('fname'))\" \">edit</a>

 

This function is being hit:

 

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 + "\" 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;\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
	}

	//alert(actual.innerHTML);

	changing = true;
}

alert(actual.id);
}

 

If I put an alert in the highlight function, the alert pops up.  If I put an alert into fieldBlur or fieldEnter, the alert does not pop up.

 

So, after this function call to editBox and then after it calls the highlight function, the page reloads for some reason.

 

Any ideas?

 

The full JS file in the OP.

 

 

[abazoskib]

you have fieldBlur commented out above thats why i didnt say it was the problem. But if it is not commented out then look in the function. It is obviously forming a url.