1

He tenido problemas con el guardado de los datos a la base de datos, tengo un formulario donde tengo que seleccionar el área, cantidad y concepto para ingresar horas extras, al dar click en "continuar" se abre una modal mostrando los empleados que pertenecen al área seleccionada en una tabla, cada fila tiene un checkbox y debe guardarse solamente los que he seleccionado, al seleccionarlos le doy click en el boton "confirmar". Hasta ahí todo esta bien, me guarda los datos a la base de datos sin ningún problema.

Pero cuando abro la modal y no hago ninguna acción, la cierro y la vuelvo abrir y le doy click en confirmar "Los registros se guardan doble vez", o cuando le doy click en confirmar me guarda, se cierra la modal y al seleccionar otra ´área y doy confirmar "nuevamente", se guardan varias veces.

Aqui esta todo el código que tengo porque no he encontrado cual ha sido el error:

Esta el html y el Javascript

Espero sea clara mi pregunta

5
  • como he mencionado en un anterior post = por favor actualiza tu pregunta con el enlace de tu pregunta anterior. NO he tenido este problema, pero yo probaría limpiando la caché, además de revisar el código, es posible que tu método (el que guarda la información) se invoque en otra parte del formulario, también te recomiendo vaciar los campos una vez hayas terminado de guardar. Commented el 12 ago. 2016 a las 20:25
  • Y estuve revisando el código y limpia los campos al momento de guardar y no se invoca en otro lado Commented el 12 ago. 2016 a las 20:33
  • Es un problema interesante. Similar al de esta otra pregunta, de hecho, la causa del problema es la misma. No sé si escribir una respuesta o marcar la pregunta como duplicado.
    – Alvaro Montoro
    Commented el 12 ago. 2016 a las 20:36
  • ya lo intenté en ese post @AlvaroMontoro y no me funcionó pues porque no envio un formulario sino con evento on('click'), recorro la tabla y guardo los datos Commented el 12 ago. 2016 a las 20:39
  • OK. Deja y escribo una respuesta explicándolo mejor para este caso en particular
    – Alvaro Montoro
    Commented el 12 ago. 2016 a las 20:39

1 respuesta 1

0

La causa del problema es bastante similar al de esta otra pregunta. Voy a poner aquí una versión reducida del código que tienes en JSFiddle:

$('#upload').on('click', function(){

  // código y operaciones
  // abrir modal
  // más código y operaciones

  confirm.on('click', function(){
    // pedir confirmación
    // serializar la tabla
    // petición AJAX y cerrar modal
  });

});

El botón con ID "upload" es el que se encarga de abrir el modal, y el botón con ID "confirm" es que realiza la petición AJAX y cierra el modal.

Como la asociación del controlador del evento click del botón "Confirm" se realiza dentro del evento click del botón "upload", eso quiere decir que se va a asociar un controlador al botón "confirm" cada vez que se pulse en el botón "upload".

Vamos a verlo paso a paso:

  1. Inicio de página, se asocia el controlador del evento click al botón "upload"
  2. El usuario pulsa en el botón "upload"
    1. Se abre el modal
    2. Se asocia un controlador del evento click al botón "Confirm" (lo llamaré Confirm1)
  3. El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
    1. Se lanza el controlador Confirm1 que realiza la llamada AJAX
  4. El usuario sigue trabajando y pulsa de nuevo el botón "upload"
    1. Se abre el modal
    2. Se asocia un controlador del evento click al botón "Confirm" (lo llamaré Confirm2)
  5. El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
    1. Se lanza el controlador Confirm1 que realiza la llamada AJAX
    2. Se lanza el controlador Confirm2 que realiza la llamada AJAX
  6. El usuario sigue trabajando y pulsa de nuevo el botón "upload"
    1. Se abre el modal
    2. Se asocia un controlador del evento click al botón "Confirm" (lo llamaré Confirm3)
  7. El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
    1. Se lanza el controlador Confirm1 que realiza la llamada AJAX
    2. Se lanza el controlador Confirm2 que realiza la llamada AJAX
    3. Se lanza el controlador Confirm3 que realiza la llamada AJAX
  8. ....

¿Ves lo que está ocurriendo? Cada vez que se pulsa en "upload" se asocia de nuevo el mismo controlador que realiza la llamada AJAX y por eso se acaban guardando los datos múltiples veces (tantas como veces se haya pulsado en "upload").

La solución: como el modal ya existe en la página y lo que se hace es mostrarlo/esconderlo, no necesitar asociar el controlador del click para "confirmar" cada vez que se abra el modal, basta con que lo hagas una vez al principio de la página:

$('#upload').on('click', function(){

  // código y operaciones
  // abrir modal
  // más código y operaciones

});

confirm.on('click', function(){
  // pedir confirmación
  // serializar la tabla
  // petición AJAX y cerrar modal
});

Prueba con eso y dime cómo te va.

2
  • Gracias por a probar y te comento Commented el 12 ago. 2016 a las 20:57
  • Muchas gracias, no me había dado cuenta que simplemente era eso! :) estaba bloqueado en esa parte Commented el 12 ago. 2016 a las 21:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.