Paso de codigo ajax para php a asp

[jtoribioa]

Hola a todos no se mucho de ajax y quisiera que alguien me explicase que hace este codigo, la idea es que guarda un pequeño texto de un input y luego convierte el input en un span pero no entiendo todas las lineas y quisiera saberlas por que quiero cambiar ese codigo para que envie a una pagina Guardar.asp y creo que hay que cambiar algunas cosas, alguien puede podria explicarme por favor y si no fuese mucha molestia ayudar a cambiarlo a asp aunque creo que seria suficiente con una explicacion.

Código:

var urlBase = "guarda.php?coded=";


function guardaEnter(campo,evt,idfld) {
	evt = (evt) ? evt : window.event;
	if (evt.keyCode == 13 && campo.value!="") {
		campo.value = campo.value.replace("/\|/","");
		elem = document.getElementById("cont" + idfld + "top");
		remotos = new datosServidor;
		nt = remotos.enviar(urlBase + escape(b64.encode(elem.className + "|" + campo.value)),"");
		elem.innerHTML = "<span ondblclick=\"cambia(" + idfld + ",this);\">" + nt + "</span>";
		//elem.innerHTML = urlBase + escape(b64.encode(elem.className + "|" + campo.value));
		return false;
	} else {
		return true;
	}
}

function guardaBlur(campo,idfld) {
	if (campo.value!="") {
		campo.value = campo.value.replace("/\|/","");
		elem = document.getElementById("cont" + idfld + "top");
		remotos = new datosServidor;
		nt = remotos.enviar(urlBase + escape(b64.encode(elem.className + "|" + campo.value)),"");
		elem.innerHTML = "<span ondblclick=\"cambia(" + idfld + ",this);\"></span>";
		elem.firstChild.innerHTML = nt;
		return false;
	}
}

este codigo es llamado asi

Código:

html:

<span id="cont1top" class="nombre"><span ondblclick="cambia(1,this);">123</span></span>

javascript:

function cambia(nn,actual) {
	elem = document.getElementById("cont" + nn + "top");
	elem.innerHTML = "<input maxlength=\"30\"type=\"text\" value=\"" + actual.innerHTML + "\" size=\"30\" onkeypress=\"return guardaEnter(this,event," + nn + ")\" onblur=\"return guardaBlur(this," + nn + ")\" />";
	elem.firstChild.focus();
}

espero haber sido claro sino lo pueden ver de donde lo saque -->http://www.ideasfreelance.com/lab/instant_edit/

Saludos

[zalvatore]

Jtoribioa, estuve con lo mismo que vos todo el dia de ayer y hoy y al fin lo pude sacar... era mucho mas simple de lo que parecia (como pasa siempre)
Te mando los 3 archivos (js, asp que muestra, asp que updatea)


instantEdit.js

Código:

<!--
//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.asp";
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,"");
		elem.innerHTML = nt;
		changing = false;
		return false;
	}
}

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



//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 #54CE43";          
}

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

muestra.asp

Código:

<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="Connections/connCombo.asp" -->
<%
Set rsSecciones = Server.CreateObject("ADODB.Recordset")
rsSecciones.ActiveConnection = MM_connCombo_STRING
rsSecciones.Source = "SELECT Seccion, idSeccion  FROM Secciones"
rsSecciones.CursorType = 0
rsSecciones.CursorLocation = 2
rsSecciones.LockType = 1
rsSecciones.Open()

rsSecciones_numRows = 0
%>
<%
Repeat1__numRows = -1
Repeat1__index = 0
rsSecciones_numRows = rsSecciones_numRows + Repeat1__numRows
%>

<script src="instantEdit.js"></script>

<% 
While ((Repeat1__numRows <> 0) AND (NOT rsSecciones.EOF)) 
%>
<span id="<%=(rsSecciones.Fields.Item("idSeccion").Value)%>" class="editText"><%=rsSecciones("Seccion")%></span><br>
<% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  rsSecciones.MoveNext()
Wend
%>
<%
rsSecciones.Close()
Set rsSecciones = Nothing
%>

update.asp

Código:

<!--#include file="Connections/connCombo.asp" -->
<%
strContenido = Request("content")
intId = Request("fieldname")
%>
<%
'if(Request.QueryString("content") <> "") then Update__strContent = Request.QueryString("content")
'if(Request.QueryString("fieldname") <> "") then Update__intId = Request.QueryString("fieldname")
%>
<%
set Update = Server.CreateObject("ADODB.Command")
Update.ActiveConnection = MM_connCombo_STRING
Update.CommandText = "UPDATE Secciones  SET Seccion = '" + strContenido + "' WHERE IdSeccion = " + intId + ""
Update.CommandType = 1
Update.CommandTimeout = 0
Update.Prepared = true
Update.Execute()
%>

<%=strContenido%>

Bueno, asi sale andando... tenes que tener una base de datos Access con una tabla Secciones con 2 campos IdSeccion y Seccion
El IdSeccion es el id (autonumerocio) del span y Seccion es el contenido del span...

Bueno cualquier duda avisame!

Saludos!