Ver Mensaje Individual
  #9 (permalink)  
Antiguo 07/08/2012, 00:59
Carloosolrac
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 11 años, 9 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