AJAX - Edicion de registros mediante ventana modal

   
Vista:

Edicion de registros mediante ventana modal

Publicado por Javier (11 intervenciones) el 29/07/2015 21:29:04
Hola Y Gracias por responder!
Quería consultarles lo siguiente:

- Tengo un <table> que muestra el resultado de una consulta mysql.

- En cada fila tengo una columna con una imagen de enlace a una ventana modal (bootstrap) para realizar la edición del registro. Cada fila de la table tien un link definido usando data-id=". $row['codigo'] . " data-des=". $row["descripcion'] etc. Cada fila a su vez tiene el id='btn_modifica_tabla':

1
2
echo "<td> <a data-toggle='modal' data-id=".$row['marcaid' ]." data-des=".$row['marcades' ].
                                                  " id='btn_modifica_tabla' href='#win_modifica'>";


- Para capturar los datos del registro, capturo el click de este id 'modifica' en una funcion Js, tomo los valores de los data- y los asigno a los input que tengo en un formulario en la ventana modal, empleando los id de estos input.
1
2
3
4
5
6
7
8
9
10
11
12
<script>
       $(document).on("click", "#btn_modifica_tabla", function () {
 
          var dato1  = $(this).data("id");
          var dato2  = $(this).data("des");
 
          $('#win_modifica #marcaold').val( dato1 ) ;
          $('#win_modifica #m_marcaid').val( dato1 ) ;
          $('#win_modifica #m_marcades').val( dato2 ) ;
 
      });
   </script>


- Para procesar los datos cargados en los input, el evento click del boton "Aceptar" del formulario es capturado en otra funcion Js
que serializa los datos del form y hace una petición Ajax para validar los datos, insertar los datos en la tabla y devolver un objeto json que luego uso para ver que camino toma el procedimiento .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
          $(function() {
            $("#btn_modifica").click(function() {
 
               $.ajax({
                  url: 'marcas_mod.php',//Url a donde enviaremos los datos
                  type: 'POST',// Tipo de envio
                  dataType: 'json', //Tipo de Respuesta
                  data:$("#form_modifica").serialize(), //Serializamos el formulario
 
                  success: function(response) {//Cuando nuestra función finalice, recuperamos la respuesta
 
                     $("#respuesta1").html(response.mensaje) ;
 
                     if ( response.estado == "ok" ) {
                        $('#win_modifica').modal('hide');
                        location.reload();
                     }
                  },
 
                  error: function(objeto, quepaso, otroobj) {
                         //alert("ERROR!");
                         //alert("1.." + objeto);
                         //alert("2.." + quepaso);
                         alert("3.." + otroobj);
                  }
 
               })
 
               return false; // Evitar ejecutar el submit del formulario.
 
            });
       });
 
 
   </script>


Luego de varias horas de prueba , puedo decir que funciona bien este proceso.

La pregunta es: existe otra forma de hacerlo? Quizas mas sencilla?


Nuevamente gracias!
Javier
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder