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':
- 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.
- 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 .
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
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
0