aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Los usuarios de AjaxRegulus o AjaxContempt ya sabrán de que hablo. Bueno, en esencia es un editor desde el lugar de donde se muestra, uso algo parecido en el plugin de YourTags. Jod.. es más dificil explicarlo que hacerlo 😀

¿Que necesitamos 

1. Necesitamos un objeto XMLHTTP (yo, voy a usar XHConn)
2. Necesitamos una BD donde albergar los datos

¿Como lo montamos?

El procedimiento es muy simple, vamos a usar el evento doble click de HTML para convertir una etiqueta en un inputbox, para luego enviar los datos a la Base de Datos.

Vamos a utilizar un div con id etiqueta, donde tendrémos un texto cualquiera.

 

[…]

<div id="etiqueta" onDblClick="EditMe(‘etiqueta’);">HAZME DOBLE-CLICK</div>

[…]

Luego necesitaremos una función Javascript que realice la conversión al inputbox.

function EditMe(id)
{
    target= document.getElementById(div);
    var texto = target.innerHTML;
    var divLabel = "’" + div + "’";
    target.innerHTML = ‘<input id="’+div +’" type="text" value="’+texto+’" onChange="SaveChanges(‘ + divLabel + ‘);"/>’;
}

De esta forma ya tenemos convertido el div en un input y al realizar un cambio solo tenemos que enviar los datos a otra función javascript donde lanzaremos la llamada a la BD mediante ajax.

function SaveChanges(id)
{
        var myConn = new XHConn();
        if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
   
    var target= document.getElementById(id);
    var texto = target.value;
        var heTerminado = function (oXML) {  target.innerHTML = texto;};
        myConn.connect(URL, "POST", ‘action=modifica&texto=’ + texto + ‘, heTerminado);
}

Esta función nos envia a la propia página en donde estamos (reemplazando el nombre en URL) y recibimos los datos de esta forma.

<?
if ($_POST)
{
    $txt = $_POST[‘texto’]
    intertamos el valor en la BD con la estructura que deseemos
}

?>

De esta forma podemos insertar la variable $txt en nuestra BD.

Espero que pueda ser util, esta noche colgaré un ejemplo. 

Actualizo

Aqui hay una muestra y una forma de hacer con Ajax Edit in Place (una clase destinada a esto)