Funcion editar campo con Jquery

nh2006 · #1 (**permalink**) 29/01/2011, 21:20

Hola amigos,

Es un gusto saludarlos nuevamente, hace tiempo que no posteaba porque siempre encuentro la respuestas a mis dudas en los demás foros, de este super sitio pero en esta ocasión tengo un problema.

A ver les cuento:

Trabajo con PHP-Mysql y tengo un select que me devuelve todos los registros de una tabla, e implementado paginacion y todo va bien, la impresion de los registros se hace en el documento html, no ocupo campos de formulario para mostrarlos, el problema es que necesito agregarle un link a la par de cada valor de campo que diga "Editar" y cuando le de clic me aparezca un campo de formulario para darle un nuevo valor al campo en cuestión.

Pensé en Jquery porque es lo que he estado trabajando en estos días, ¿Me pueden hacer el favor de indicarme como solucionar estos?

Les dejo un ejemplo:

Nombre: Fulanito de Tal "Editar"

Al darle clic en Editar quedaría algo así:

Nombre: <input type="text" value="Fulanito de Tal"> Guardar

Otro problema es que no todos los campos son cuadros de texto, sino que muchos otros son cuadros de lista desplegable.

Creo que está algo complicado, por eso les pido su valiosa ayuda.

Ya que también estoy empezando con jquery

Gracias desde ya

Dany_s · #2 (**permalink**) 31/01/2011, 07:11

yo tengo algo asi simple con doble click para editar y enter para guardar

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
            
 
            $(function(){
                $('.editText').dblclick( function(){
                    var text = $(this).text();
                    $(this).empty().html('<input type="text" value="'+text+'">').find('input').focus();
                }).keypress( function(e){
                    if(e.keyCode == 13){
                        var text = $('input', this).val();
                        $(this).html( text );
                    }
                });
            });
        </script>
    </head>
    <style>
        body{font-family:Arial; font-size:12px}
        .editText{padding:5px; border:1px solid #ccc; background:#f4f4f4}
    </style>
    <body>
 
        Nombre: <span class="editText">Fulanito de tal</span>
 
    </body>
</html>

lo de la lista no sé si al hacer click en editar traes datos de la db para llenar la lista o traes toda la lista al entrar a la página y queres que esté oculto

nh2006 · #3 (**permalink**) 31/01/2011, 08:57

Hola Dany_s,

Bueno, gracias por tu ayuda, he modificado muy levemente el código que me publicaste para hacer que cuando presione enter se mande información a una página php y ahí, haga lo que debe hacer, me queda así:

Código Javascript:

Ver original<html>
        <head>
              <title>Ejemplo</title>
              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
             <script> 
                  $(function(){  
                      $('.editText').dblclick( function(){  
                          var text = $(this).text();  
                          $(this).empty().html('<input type="text" value="'+text+'">').find('input').focus();  
                      }).keypress( function(e){  
                          if(e.keyCode == 13){  
                              var text = $('input', this).val();  
                              $(this).html( text );  
                             /*enviar informacion:*/
                             e.preventDefault();
                             $("#destino").load("procesar.php", {nombre: "Juan", edad: 45}, function(){
                    alert("Campo actualizado");
                });
                          }  
                      });  
                  });  
              </script>  
          </head>  
          <style>  
              body{font-family:Arial; font-size:12px}  
              .editText{padding:5px; border:1px solid #ccc; background:#f4f4f4}  
          </style>  
          <body> 
              Nombre: <span class="editText">Fulanito de tal</span> 
            <div id="destino"></div>
          </body>  
      </html>

Luego en el archivo procesar.php solo mandas a llamar las variable que recibes por ejemplo:

echo $_POST["nombre"];
echo $_POST["edad"];

Lo que te comentaba el problema es que necesito que en algunos campos no aparezca un cuadro de texto, sino mas bien un cuadro de lista desplegable y ese cuadro de lista se llena a partir de los datos de una tabla en DB.

Por favor me podrías indicar cómo solventar esta situación?

desde ya muchas gracias

Dany_s · #4 (**permalink**) 02/02/2011, 06:34

fijate si te sirve algún plugin plugin
http://www.appelsiini.net/projects/jeditable

http://code.google.com/p/jquery-in-place-editor/

nh2006 · #5 (**permalink**) 02/02/2011, 20:18

Hola,

Gracias por las librerías, pero no logro comprender cómo usarlas, he estado tratando de apregiguar cómo capturo las variables que mandan ambas libreías en un script php pero no logro encontrar cómo.

Una vez he modificado el valor y luego de darle clic en el botón ok ó save, no sé como capturar las variables en el script del lado del servidor para poder usarlas.

Siu me puedes ayudar con eso por favor, no te publico código porque el que traté de modificar era el demo de ambos y en ninguno me funcionó para hacer lo que te digo.

nh2006 · #6 (**permalink**) 04/02/2011, 08:12

Bueno amigos, creo que mejor toca hacerlo a patita, al menos por el momento, ya tengo la ideal de cómo puede ir el select en lugar del cuadro de texto, me falta probarla, pero con lo que necesito ayuda es que me indique cómo podría hacer lo mismo pero con un textarea, ya que en estos controles si es válido presionar la tecla enter como parte de contenido, se me ocurre que cuendo edite agregarle además del textarea un botón que diga ok y otro cancelar tal como los demos de las librerías, pero no sé cómo podría plantearlo.

Me puedenb ayudar con esto por favor?

nh2006 · #7 (**permalink**) 06/02/2011, 18:17

Bueno, basándo en tu código, modifico lo siguiente.

Código Javascript:

Ver original$('.editSelectBoton').dblclick( function(){  
                        var text = $(this).text();  
                        $(this).empty().html('<select><option value="'+text+'">'+text+'</option><option value="Si">Si</option><option value="No">No</option></select><input type="button" id="ok" value="Ok" /><input type="button" id="cancel" value="Cancelar" />').find('select').focus();  
                 }).change( function(e){  
                        var text = $('select', this).val();  
                        $(this).html( text );  
                        /*enviar informacion:*/
                        e.preventDefault();
                        $("#destino").load("procesar.php", {nombre: text, edad: 45}, function(){
                            alert("Campo actualizado");
                        });                   
                 });

Mi pregunta es cómo le hago para que cuando de clic en ok (ya no sería el chage del select) se mande el resultado y cuando de clic en cancelar simplemete vuelva el html que tenia antes del doble clic en el texto del documento html?.

Bueno en realidad lo que quiero hacer es enviar los datos de un select multiple, asi que la idea es enviar todos los datos seleccionados cuando se de clic en el botó ok, aunque pensándolo bien no se necesita el botón ok, por eso les pido nuevamente de favor que me ayuden, y cómo sería para retomar los datos en un archivo php que se manden desde el select múltiple con jquery.

Gracias desde ya