Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Consulta con edición "en vivo" en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/07/2012, 17:01
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Pregunta Consulta con edición "en vivo"

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:
Cita:
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.
  #2 (permalink)  
Antiguo 31/07/2012, 17:46
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 5 meses
Puntos: 220
Respuesta: Consulta con edición "en vivo"

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

Código HTML:
Ver original
  1. <div id="main">
  2.     <div id="title">
  3.         NOTICIA 1
  4.     </div>
  5.     <br />
  6.     <div id="content">
  7.         CONTENIDO
  8.     </div>
  9. <div>
  10. <a id="edit" href="#">Editar</a>

Código Javascript:
Ver original
  1. // FUNCION QUE SE ENCARGA DE SACAR LOS ESPACIOS EN BLANCO DE UNA CADENA
  2.     String.prototype.Trim = function() {
  3.         return this.replace(/^\s+|\s+$/g,"");
  4.     }
  5.     // FUNCION QUE ME PERMITE MANEJAR LOS EVENTOS DE LOS NAVEGADORES
  6.     function createEvent(elem,even,func){
  7.         if (elem.addEventListener){
  8.             elem.addEventListener(even, func, false);
  9.         }
  10.         else{
  11.             elem.attachEvent('on' + even, func);
  12.         }
  13.     }
  14.     // FUNCION CUANDO INICIALIZA MI PAGINA
  15.     function init(){
  16.         var edit = document.getElementById("edit");
  17.         createEvent(edit,"click",function(){
  18.             editar();
  19.             return false;
  20.         });
  21.     }
  22.     // ESTA ES LA FUNCION EDITAR EN VIVO
  23.     function editar(){
  24.         var main = document.getElementById("main");
  25.         var title = document.getElementById("title");
  26.         var content = document.getElementById("content");
  27.         var editTitle = document.createElement("input");
  28.         var editContent = document.createElement("textarea");
  29.         var edit = document.getElementById("edit");
  30.         var save = document.createElement("input");
  31.         var space1 = document.createElement("br");
  32.         var space2 = document.createElement("br");
  33.        
  34.         editTitle.id = "editTitle";
  35.         editContent.id = "editContent";
  36.         save.id = "save";
  37.         space1.id = "space1";
  38.         space2.id = "space2";
  39.        
  40.         editTitle.type = "text";
  41.         save.type = "button";
  42.        
  43.         editTitle.value = title.innerHTML.Trim();
  44.         editContent.innerHTML = content.innerHTML.Trim();
  45.         save.value = "Editar";
  46.        
  47.         title.style.display="none";
  48.         content.style.display="none";
  49.         edit.style.display="none";
  50.        
  51.         main.insertBefore(editTitle);
  52.         main.insertBefore(space1);
  53.         main.insertBefore(editContent);
  54.         main.insertBefore(space2);
  55.         main.insertBefore(save);
  56.        
  57.         createEvent(save,"click",function(){
  58.             var _main = document.getElementById("main");
  59.             var _title = document.getElementById("title");
  60.             var _content = document.getElementById("content");
  61.             var _edit = document.getElementById("edit");
  62.             var _editTitle = document.getElementById("editTitle");
  63.             var _editContent = document.getElementById("editContent");
  64.             var _save = document.getElementById("save");
  65.             var _space1 = document.getElementById("space1");
  66.             var _space2 = document.getElementById("space2");
  67.            
  68.             _title.innerHTML = _editTitle.value;           
  69.             _content.innerHTML = _editContent.value;
  70.            
  71.             _main.removeChild(_editTitle);
  72.             _main.removeChild(_editContent);
  73.             _main.removeChild(_save);
  74.             _main.removeChild(_space1);
  75.             _main.removeChild(_space2);
  76.            
  77.             _title.style.display="block";
  78.             _content.style.display="block";
  79.             _edit.style.display="block";
  80.            
  81.             return false;
  82.         });
  83.     }
  84.  
  85.     window.onload = init;
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 31/07/2012, 18:15
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

¡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
  #4 (permalink)  
Antiguo 31/07/2012, 22:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Consulta con edición "en vivo"

Creo que construyendo los forms directamente para presentar las noticias te sería más sencillo
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Html5</title>
  5.  
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. input.noticias{
  10. width: 400px;
  11. border: none;
  12. margin-bottom: 5px;
  13. font-weight: bold;
  14. font-size: 14pt;
  15. }
  16. textarea.noticias{
  17. width: 400px;
  18. height: 70px;
  19. border: none;
  20. margin-bottom: 5px;
  21. }
  22.  
  23. /*]]>*/
  24. <script type="text/javascript">
  25. //<![CDATA[
  26. function editar(noti){
  27. var idnoticia = noti.split('_');
  28. var tit = 'titulo'+idnoticia[1];
  29. var cont = 'contenido'+idnoticia[1];
  30. var bot = 'botones'+idnoticia[1];
  31. var tit_original = document.getElementById(tit).value;
  32. var cont_original = document.getElementById(cont).value;
  33. document.getElementById(tit).readOnly = false;
  34. document.getElementById(tit).style.backgroundColor = '#9DC864';
  35. document.getElementById(cont).readOnly = false;
  36. document.getElementById(cont).style.backgroundColor = '#73C567';
  37. document.getElementById(cont).style.overflow = 'auto';
  38. document.getElementById(bot).style.display = 'inline-block';
  39. }
  40. //]]>
  41. </head>
  42.  
  43. <h1>Noticias</h1>
  44. <div id="contenedor_noticias">
  45. <form action="#">
  46. <input class="noticias" type="text" name="titulo" id="titulo1" readonly="readonly" value="Título Noticia 1"><br />
  47. <textarea cols="10" rows="10" class="noticias" style="overflow: hidden;" name="contenido" id="contenido1" readonly="readonly">Contenido noticia 1</textarea><br />
  48. <input type="button" onclick="editar('noticia_1')" value="Editar" /> <span id="botones1" style="display: none;">
  49. <input type="button" onclick="cancelar('noticia_1')" value="Cancelar" />
  50. <input type="button" onclick="guardar('noticia_1')" value="Guardar" /> </span>
  51. <input type="button" onclick="eliminar('noticia_1')" value="Eliminar" />
  52. </form>
  53. </div>
  54. </body>
  55. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 31/07/2012, 22:57
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 10 meses
Puntos: 57
Información Respuesta: Consulta con edición "en vivo"

Hola Miguelithox, que tal.
Cita:
Iniciado por Miguelithox Ver Mensaje
¡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:
Ver original
  1. main.insertBefore(editTitle, null);
  2. main.insertBefore(space1, null);
  3. main.insertBefore(editContent, null);
  4. main.insertBefore(space2, null);
  5. main.insertBefore(save, null);
  #6 (permalink)  
Antiguo 01/08/2012, 00:28
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 5 meses
Puntos: 220
Respuesta: Consulta con edición "en vivo"

Cita:
Iniciado por gebremswar Ver Mensaje
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:
Ver original
  1. main.insertBefore(editTitle, null);
  2. main.insertBefore(space1, null);
  3. main.insertBefore(editContent, null);
  4. main.insertBefore(space2, null);
  5. main.insertBefore(save, null);
Muy buena aclaración como lo hice tan rápido no me percate de eso
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #7 (permalink)  
Antiguo 01/08/2012, 23:19
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

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
Cita:
<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.
  #8 (permalink)  
Antiguo 07/08/2012, 00:14
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

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:
Cita:
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.
  #9 (permalink)  
Antiguo 07/08/2012, 00:59
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 12 años, 3 meses
Puntos: 60
Respuesta: Consulta con edición "en vivo"

Otro camino es así
Código Javascript:
Ver original
  1. <script type="text/javascript" charset="utf-8">
  2.     $(document).ready(function(){
  3.         $('.editar').live('click', function(){
  4.             var id_noticia = $(this).parent('div').attr('id');
  5.             var text = $('#'+id_noticia).find('#titulo').text();
  6.             $('#'+id_noticia).find('#titulo').html('<input type="text" id="bla" name="bla" value="'+text+'">');
  7.             $('#'+id_noticia).find('.editar').html('[GUARDAR]').removeClass('editar').addClass('guardar');
  8.         });
  9.         $('.guardar').live('click', function(){
  10.             var id_noticia = $(this).parent('div').attr('id');
  11.             var text = $('#'+id_noticia).find('#bla').val();
  12.             $('#'+id_noticia).find('#titulo').html(text);
  13.             $('#'+id_noticia).find('.guardar').html('[EDITAR]').removeClass('guardar').addClass('editar');
  14.         });
  15.  
  16.     });
  17. </script>
  18. </head>
  19. <body>
  20.     <div id="noticia1">
  21.         <div id="titulo">NOTICIA 1</div>
  22.         <div id="contenido">
  23.             CONTENIDO
  24.         </div>
  25.         <a href="#" class="editar">[EDITAR]</a>
  26.     </div>
  27. *****************************************************
  28.     <div id="noticia2">
  29.         <div id="titulo">NOTICIA 2</div>
  30.         <div id="contenido">
  31.             CONTENIDO
  32.         </div>
  33.         <a href="#" class="editar">[EDITAR]</a>
  34.     </div>
  35. *****************************************************
  36. <div id="noticia3">
  37.         <div id="titulo">NOTICIA 3</div>
  38.         <div id="contenido">
  39.             CONTENIDO
  40.         </div>
  41.         <a href="#" class="editar">[EDITAR]</a>
  42.     </div>
  43.  
  44. </body>
  45. </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 ;)
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #10 (permalink)  
Antiguo 07/08/2012, 21:43
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

¡Muchas gracias! Lo puse pero no funciona ni para Mozilla Firefox, ni Internet Explorer. Les agradezco a todos de antemano.
  #11 (permalink)  
Antiguo 07/08/2012, 22:06
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 12 años, 3 meses
Puntos: 60
Respuesta: Consulta con edición "en vivo"

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>
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #12 (permalink)  
Antiguo 07/08/2012, 22:27
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

¡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.
  #13 (permalink)  
Antiguo 07/08/2012, 22:32
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 10 meses
Puntos: 57
Respuesta: Consulta con edición "en vivo"

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.
  #14 (permalink)  
Antiguo 07/08/2012, 22:36
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 12 años, 3 meses
Puntos: 60
Respuesta: Consulta con edición "en vivo"

Buen articulo sobre .live() :)
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #15 (permalink)  
Antiguo 07/08/2012, 23:15
Avatar de Miguelithox  
Fecha de Ingreso: diciembre-2008
Ubicación: Viña del Mar
Mensajes: 287
Antigüedad: 16 años
Puntos: 7
Respuesta: Consulta con edición "en vivo"

Cita:
Iniciado por gebremswar Ver Mensaje
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
  #16 (permalink)  
Antiguo 08/08/2012, 07:51
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 12 años, 3 meses
Puntos: 60
Respuesta: Consulta con edición "en vivo"

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
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker

Etiquetas: edición, formulario, vivo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:21.