[SOLUCIONADO] Consulta con edición "en vivo"

[Miguelithox]

Hola colegas,

En estos momentos me encuentro realizando un panel de administración, la cosa es que estoy por lo que es editar (Ya sea boletín de noticias, usuarios, moderadores) y me acordé de que en una tienda muy conocida aquí. (PCFactory) Tienen algo que yo creo que se llama "edición en vivo". ¿En qué consiste? Bueno lo que yo quiero saber cómo hacer es que uno al hacer clic en "Editar", todo lo que sea título y descripción pasen de texto a inputs.

Ejemplo:

Noticia 1
- Ésto es el cuerpo de la noticia.
Publicado ayer
[Editar] | [Eliminar]

Lo que me gustaría saber cómo se hace es que al hacer clic en "Editar", donde dice "Noticia 1" pase a ser un campo de texto o input con el contenido "Noticia 1", lo mismo con el cuerpo de la noticia. Todo esto sin refrescar la página y ocurra donde mismo, que se haga un formulario. La verdad no tengo ni la más mínima idea con Javascript, por eso pregunto aquí.

¿Alguien me ayuda?

Saludos y gracias de antemano.

[Dradi7]

Bueno amigo te dejo un ejemplo básico tu lo puedes ya mejorar de como hacer lo que quieres

Código HTML:

<div id="main">
    <div id="title">
        NOTICIA 1
    </div>
    <br />
    <div id="content">
        CONTENIDO
    </div>
<div>
<a id="edit" href="#">Editar</a>
<script>
 

Código Javascript:

// FUNCION QUE SE ENCARGA DE SACAR LOS ESPACIOS EN BLANCO DE UNA CADENA
    String.prototype.Trim = function() {
        return this.replace(/^\s+|\s+$/g,"");
    }
    // FUNCION QUE ME PERMITE MANEJAR LOS EVENTOS DE LOS NAVEGADORES
    function createEvent(elem,even,func){
        if (elem.addEventListener){
            elem.addEventListener(even, func, false);
        }
        else{
            elem.attachEvent('on' + even, func);
        }
    }
    // FUNCION CUANDO INICIALIZA MI PAGINA
    function init(){
        var edit = document.getElementById("edit");
        createEvent(edit,"click",function(){
            editar();
            return false;
        });
    }
    // ESTA ES LA FUNCION EDITAR EN VIVO
    function editar(){
        var main = document.getElementById("main");
        var title = document.getElementById("title");
        var content = document.getElementById("content");
        var editTitle = document.createElement("input");
        var editContent = document.createElement("textarea");
        var edit = document.getElementById("edit");
        var save = document.createElement("input");
        var space1 = document.createElement("br");
        var space2 = document.createElement("br");
        
        editTitle.id = "editTitle";
        editContent.id = "editContent";
        save.id = "save";
        space1.id = "space1";
        space2.id = "space2";
        
        editTitle.type = "text";
        save.type = "button";
        
        editTitle.value = title.innerHTML.Trim();
        editContent.innerHTML = content.innerHTML.Trim();
        save.value = "Editar";
        
        title.style.display="none";
        content.style.display="none";
        edit.style.display="none";
        
        main.insertBefore(editTitle);
        main.insertBefore(space1);
        main.insertBefore(editContent);
        main.insertBefore(space2);
        main.insertBefore(save);
        
        createEvent(save,"click",function(){
            var _main = document.getElementById("main");
            var _title = document.getElementById("title");
            var _content = document.getElementById("content");
            var _edit = document.getElementById("edit");
            var _editTitle = document.getElementById("editTitle");
            var _editContent = document.getElementById("editContent");
            var _save = document.getElementById("save");
            var _space1 = document.getElementById("space1");
            var _space2 = document.getElementById("space2");
            
            _title.innerHTML = _editTitle.value;            
            _content.innerHTML = _editContent.value;
            
            _main.removeChild(_editTitle);
            _main.removeChild(_editContent);
            _main.removeChild(_save);
            _main.removeChild(_space1);
            _main.removeChild(_space2);
            
            _title.style.display="block";
            _content.style.display="block";
            _edit.style.display="block";
            
            return false;
        });
    }
 
    window.onload = init;
 

[Miguelithox]

¡Muchas gracias! Lo estuve probando y funciona en IE, pero no en Mozilla Firefox :( y ¿Cómo le hago para agregarle un formulario? Muchas gracias :D

[emprear]

Creo que construyendo los forms directamente para presentar las noticias te sería más sencillo

Código HTML:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
 
input.noticias{
width: 400px;
border: none;
margin-bottom: 5px;
font-weight: bold;
font-size: 14pt;
}
textarea.noticias{
width: 400px;
height: 70px;
border: none;
margin-bottom: 5px;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function editar(noti){
var idnoticia = noti.split('_');
var tit = 'titulo'+idnoticia[1];
var cont = 'contenido'+idnoticia[1];
var bot = 'botones'+idnoticia[1];
var tit_original = document.getElementById(tit).value;
var cont_original = document.getElementById(cont).value;
document.getElementById(tit).readOnly = false;
document.getElementById(tit).style.backgroundColor = '#9DC864';
document.getElementById(cont).readOnly = false;
document.getElementById(cont).style.backgroundColor = '#73C567';
document.getElementById(cont).style.overflow = 'auto';
document.getElementById(bot).style.display = 'inline-block';
}
//]]>
</script>
</head>
<body>
 
<h1>Noticias</h1>
<div id="contenedor_noticias">
<form action="#">
<input class="noticias" type="text" name="titulo" id="titulo1" readonly="readonly" value="Título Noticia 1"><br />
<textarea cols="10" rows="10" class="noticias" style="overflow: hidden;" name="contenido" id="contenido1" readonly="readonly">Contenido noticia 1</textarea><br />
<input type="button" onclick="editar('noticia_1')" value="Editar" /> <span id="botones1" style="display: none;">
<input type="button" onclick="cancelar('noticia_1')" value="Cancelar" /> 
<input type="button" onclick="guardar('noticia_1')" value="Guardar" /> </span> 
<input type="button" onclick="eliminar('noticia_1')" value="Eliminar" /> 
</form>
</div>
</body>
</html>
 

Para cancelar, guardar, eliminar, utilizás ajax
cancelar:
recuperás el texto original y lo pones en el titulo y contenido correspondiente al id de la noticia
guardar: guardás en la base de datos y restableces el readonly y ocultás los botones
Eliminar: borrás de la base de datos y le hacés innerHTML = ""; al contenedor individual de la noticia

SAludos

[gebremswar]

Hola Miguelithox, que tal.

Iniciado por Miguelithox

¡Muchas gracias! Lo estuve probando y funciona en IE, pero no en Mozilla Firefox :( y ¿Cómo le hago para agregarle un formulario? Muchas gracias :D

primer ejemplo de Dradi7 no funcionaba correctamente por que las lineas 51, 52, 53, 54 y 55 deberían quedar así:

Código Javascript:

main.insertBefore(editTitle, null);
main.insertBefore(space1, null);
main.insertBefore(editContent, null);
main.insertBefore(space2, null);
main.insertBefore(save, null);
 

[Dradi7]

Iniciado por gebremswar

Hola Miguelithox, que tal.

primer ejemplo de Dradi7 no funcionaba correctamente por que las lineas 51, 52, 53, 54 y 55 deberían quedar así:

Código Javascript:

main.insertBefore(editTitle, null);
main.insertBefore(space1, null);
main.insertBefore(editContent, null);
main.insertBefore(space2, null);
main.insertBefore(save, null);
 

Muy buena aclaración como lo hice tan rápido no me percate de eso

[Miguelithox]

Gracias a todos denuevo. Modifiqué las líneas por las que me dijieron y empezó a funcionar en Mozilla Firefox (Gracias nuevamente). Lo que tengo es una lista de noticias en el boletín (Cada noticia tiene un identificador) y quiero hacer que ese javascript funcione para cada una. Probé colocándole el índice a cada div. Por ejemplo

<div id="main{$b->ID_NOTICIA}">
<div id="title{$b->ID_NOTICIA}">
NOTICIA 1
</div>
<br />
<div id="content{$b->ID_NOTICIA}">
CONTENIDO
</div>
</div>
<a id="edit{$b->ID_NOTICIA}" href="#">Editar</a>
<script>...</script>

También lo modifiqué en el código javascript, pero me modifica el último y los anteriores no hacen nada. ¿Qué hago mal?

Saludos y gracias de antemano.

[Miguelithox]

Hola nuevamente colegas,

En el post anterior creo que no me habré expresado bien.
¿Qué es lo que quiero hacer?

Por ejemplo tengo una lista de noticias:

Noticia 1
- Cuerpo 1
[Editar]

Noticia 2
- Cuerpo 2
[Editar]

Noticia 3
- Cuerpo 3
[Editar]

¿Cómo hago para que el código anteriormente dado funciona para distintas noticias? (Creo que se hace con un identificador)
¿Cuál es la forma correcta de hacerlo?

Saludos y gracias de antemano.

[Carloosolrac]

Otro camino es así

Código Javascript:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('.editar').live('click', function(){
            var id_noticia = $(this).parent('div').attr('id');
            var text = $('#'+id_noticia).find('#titulo').text();
            $('#'+id_noticia).find('#titulo').html('<input type="text" id="bla" name="bla" value="'+text+'">');
            $('#'+id_noticia).find('.editar').html('[GUARDAR]').removeClass('editar').addClass('guardar');
        });
        $('.guardar').live('click', function(){
            var id_noticia = $(this).parent('div').attr('id');
            var text = $('#'+id_noticia).find('#bla').val();
            $('#'+id_noticia).find('#titulo').html(text);
            $('#'+id_noticia).find('.guardar').html('[EDITAR]').removeClass('guardar').addClass('editar');
        }); 
 
    });
</script>
</head>
<body>
    <div id="noticia1">
        <div id="titulo">NOTICIA 1</div>
        <div id="contenido">
            CONTENIDO
        </div>
        <a href="#" class="editar">[EDITAR]</a>
    </div>
*****************************************************
    <div id="noticia2">
        <div id="titulo">NOTICIA 2</div>
        <div id="contenido">
            CONTENIDO
        </div>
        <a href="#" class="editar">[EDITAR]</a>
    </div>
*****************************************************
<div id="noticia3">
        <div id="titulo">NOTICIA 3</div>
        <div id="contenido">
            CONTENIDO
        </div>
        <a href="#" class="editar">[EDITAR]</a>
    </div>
 
</body>
</html>
 

Aunque le falta muchoo. Está hecho bien rápido para guíar más que nada. Después guardar los valores con ajax y creas más opciones ;)

[Miguelithox]

¡Muchas gracias! Lo puse pero no funciona ni para Mozilla Firefox, ni Internet Explorer. Les agradezco a todos de antemano.

[Carloosolrac]

El código que escribí lo probé con Chrome, Mozillaa y Opera (No tengo IE xD) y funciona perfectamente. Seguramente te faltó poner la librería JQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

[Miguelithox]

¡Toda la razón! Carloosolrac. Gracias encerio, Te has ganado Karma. Lo demás lo trataré de hacer con PHP. Se agradece a ti y a todos los que me intentaron ayudar. (Los demás también tienen Karma :P) Saludos.

[gebremswar]

Miguelithox la verdad es que no recomiendo el metodo .Live() de JQuery. En este artículo que comparto se fundamenta el porque no usarlo: Porqué no debemos usar nunca jQuery Live. También se mencionan alternativas a su uso.

Puedes buscar alternativas a .live() para el codigo compartdo muy amablemente por Carloosolrac.

[Carloosolrac]

Buen articulo sobre .live() :)

[Miguelithox]

Iniciado por gebremswar

Miguelithox la verdad es que no recomiendo el metodo .Live() de JQuery. En este artículo que comparto se fundamenta el porque no usarlo: Porqué no debemos usar nunca jQuery Live. También se mencionan alternativas a su uso.

Puedes buscar alternativas a .live() para el codigo compartdo muy amablemente por Carloosolrac.

La verdad no me manejo mucho en el tema de Javascript o JQuery. Pero me lo dice alguien que sabe sobre el tema (como tú). ¿Sabes cómo hacer para adaptar el código que publicaron en el principio para hacerlo como explique?

Saludos y Gracias :D

[Carloosolrac]

En vez de

.live('click',function() {

puedes usar

$('body').delegate('.editar', 'click', function(){
y
$('body').delegate('.guardar', 'click', function(){


Y ahí estarías cambiando el .live() por .delegate() :3