Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Cuadro de dialogo para confirmar o cancelar

Estas en el tema de Cuadro de dialogo para confirmar o cancelar en el foro de Jquery en Foros del Web. Hola a todos, estoy intentando realizar un cuadro de dialogo de confirmación que se muestre al pulsar sobre un determinado elemento, en este caso, sobre ...
  #1 (permalink)  
Antiguo 03/06/2014, 14:05
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 9 meses
Puntos: 3
Pregunta Cuadro de dialogo para confirmar o cancelar

Hola a todos, estoy intentando realizar un cuadro de dialogo de confirmación que se muestre al pulsar sobre un determinado elemento, en este caso, sobre un link para borrar un registro. Dicho cuadro muestra un mensaje que indica si realmente se desea borrar dicho registro y dos botones: uno para aceptar y otro para cancelar.

El problema está en que no encuentro la forma de hacerlo para que al pulsar sobre aceptar se ejecute una función que se encargue de borrar dicho registro, bueno, en realidad lo que no consigo es poder pasar la variable que indica el proceso que se debe ejecutar. Se que existen plugins para hacer cuadros de dialogo, pero me gustaría aprender a hacerlos yo.

Pongo el código que uso:

El HTML sería algo así

Código HTML:
Ver original
  1. <a href="proceso.php?id=1" class="eliminar">Eliminar Post</a>

Despues uso jQuery para que se muestre el cuadro de dialogo y los dos botones:

Código Javascript:
Ver original
  1. $('.eliminar').click(function(event){
  2.  
  3.     event.preventDefault();
  4.  
  5.     var href   =   $(this).attr('href'); //recogemos la dirección del Proceso PHP
  6.  
  7. //mostramos el cuadro de dialogo con los botones
  8.  
  9.     $('#dialog').fadeIn(400, function() {
  10.       $(this).html('¿Realmente desea eliminar este post?<br><br>');
  11.       $(this).append("<input type='button' id='ejecutar_proceso'  value='Aceptar'>");
  12.       $(this).append("<input type='button' id='cerrar_dialogo'  value='Cancelar'>");
  13.     });    
  14.  
  15. });

Ahora uso .on de jquery para capturar el evento, y defino las funciones que se deben ejecutar en cada caso

Código Javascript:
Ver original
  1. $('#dialog').on("click", "#ejecutar_proceso", ejecutar);
  2. $('#dialog').on("click", "#cerrar_dialogo", cerrar);
  3.  
  4. //función que sirve para cerrar el cuadro de dialogo
  5.     function cerrar() {
  6.       $('#dialog').fadeOut();
  7.     }
  8.  
  9. //función para ejecutar el proceso
  10.     function ejecutar(){
  11.       alert(href);
  12.     }

Por simplicidad en la función ejecutar he puesto un simple alert, el problema es que no se como hacer para recoger la variable href en la función ejecutar. He intentado usar la función en línea utilizando el evento onclick, pero en ese caso me indica que la función no se encuentra definida. La función cerrar funciona perfectamente y oculta el cuadro de diálogo.

¿Puede alguien echarme una mano por favor?

Gracias a todos
  #2 (permalink)  
Antiguo 03/06/2014, 15:55
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años, 3 meses
Puntos: 29
Respuesta: Cuadro de dialogo para confirmar o cancelar

Declaración de variable:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.        
  3.         var href; // <-- aquí
  4.        
  5.         $('.eliminar').click(function(e) {
  6.           e.preventDefault();
  7.           //recogemos la dirección del Proceso PHP
  8.           href = $(this).attr('href');
  9.           //mostramos el cuadro de dialogo con los botones
  10.           $('#dialog').fadeIn(400, function() {
  11.             $(this).html('¿Realmente desea eliminar este post?<br><br>');
  12.             $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
  13.             $(this).append("<input type='button' id='cerrar_dialogo' value='Cancelar'>");
  14.           });
  15.         });
  16.         $('#dialog').on("click", "#ejecutar_proceso", ejecutar);
  17.         $('#dialog').on("click", "#cerrar_dialogo", cerrar);
  18.         //función que sirve para cerrar el cuadro de dialogo
  19.         function cerrar() {
  20.           $('#dialog').fadeOut();
  21.         }
  22.         //función para ejecutar el proceso
  23.         function ejecutar() {
  24.           alert(href);
  25.         }
  26.       });
Código HTML:
Ver original
  1. <a href="proceso.php?id=1" class="eliminar">Eliminar Post</a>
  2. <button id = "comprobar">Comprobar</button>
  3. <div id="dialog"></div>
  #3 (permalink)  
Antiguo 03/06/2014, 16:08
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Cuadro de dialogo para confirmar o cancelar

También podrías hacerlo con el cuadro de diálogo confirm de JavaScript.

Código Javascript:
Ver original
  1. $('.eliminar').click(function(event){
  2.     event.preventDefault();
  3.     if (confirm("¿Realmente desea eliminar este post?"));
  4.         window.location = this.href;
  5. });

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #4 (permalink)  
Antiguo 03/06/2014, 16:16
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Cuadro de dialogo para confirmar o cancelar

Hola. Gracias a los dos por responder.

bathorz ya había probado a declarar la variable href como global, pero el problema haciendo eso es que no me devuelve la dirección y el id, sino que al hacer el alert me devuelve un objeto y la verdad es que no se que hacer con eso jejeje

Alexis, gracias por tu respuesta, la historia está en que quiero un cuadro de dialogo un poco más elegante y acorde con el sitio que estoy diseñando.

Alguna solución?

Gracias de nuevo
  #5 (permalink)  
Antiguo 03/06/2014, 16:39
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Cuadro de dialogo para confirmar o cancelar

Pues, yo armaría mi ventana modal y dentro de ella, irían la pregunta y los dos botones. Luego, cuando pulse el botón de confirmación, redirecciono hacia el valor del atributo href del enlace, caso contrario, oculto la ventana modal.



Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #6 (permalink)  
Antiguo 03/06/2014, 16:52
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Cuadro de dialogo para confirmar o cancelar

Gracias de nuevo por responder Alexis. La verdad es que no he entendido del todo tu ejemplo, llevo poco con Javascript, además prefiero usar si es posible jQuery, me parece mucho más simple el código.

A nadie se le ocurre como poder pasar la dirección con el ejemplo que he puesto?

Un abrazo a todos
  #7 (permalink)  
Antiguo 03/06/2014, 16:57
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: Cuadro de dialogo para confirmar o cancelar



Código Javascript:
Ver original
  1. $("identificador_enlace").click(function(event){
  2.     event.preventDefault();
  3.     //Muestras el cuadro de diálogo
  4. });
  5.  
  6. $("identificador_confirmacion").click(function(){
  7.     var enlace = $("identificador_enlace").prop("href");
  8.     window.location = enlace;
  9. });
  10.  
  11. $("identificador_negacion").click(function(){
  12.     //Ocultas el cuadro de diálogo
  13. });

Sería mejor que tengas tus botones de confirmación y negación ya creados en lugar de estar añadiéndolos cada vez que se muestra el cuadro de diálogo. Ojo con los identificadores de cada elemento.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #8 (permalink)  
Antiguo 04/06/2014, 02:29
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años, 3 meses
Puntos: 29
Respuesta: Cuadro de dialogo para confirmar o cancelar

No sé si he entendido bien lo que quieres.
Al pulsar Aceptar:
1.- Elimina el registro en la BBDD mediante proceso.php?id=....
2.- Elimina el enlace.
Código Javascript:
Ver original
  1. function ejecutar() {
  2.           // eliminar el registro (id=..) con php
  3.           $.ajax({
  4.             type: "GET",
  5.             //url: "proceso.php?id=1",
  6.             url: href,
  7.             //data: "",
  8.             success: function(data) {
  9.               $('#dialog').html('Eliminado ' + href);
  10.             }
  11.           });
  12.           // eliminar el enlace seleccionado del html
  13.           $("a[href='" + href + "']").remove();
  14.         }
  #9 (permalink)  
Antiguo 04/06/2014, 04:34
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Cuadro de dialogo para confirmar o cancelar

Hola de nuevo, a ver me explico.

En el panel de administración que estoy haciendo, muestro una tabla con todos los post que hay en la base de datos. En dicha tabla tengo un campo que muestra un enlace para eliminar el post sobre el que se hace click. Cuando se hace click sobre el link eliminar, por seguridad quiero preguntar si se quiere borrar o cancelar. Al tener muchos posts en la tabla, necesito obtener la dirección y el id para saber que registro tiene que borrarse. Es decir tengo el código html así

Código HTML:
Ver original
  1. <a href="proceso.php?id=<?php echo $id;?> class="eliminar">Eliminar Post</a>

El problema es que al hacer que se muestre el cuadro de diálogo para la confirmación, no soy capaz de pasar la variable href a la función ejecutar, que es la que se encarga de enviar los datos mediante ajax al proceso php.

Al hacer la variable href global, como me dijiste en la primera respuesta, no se devuelve la dirección, es decir no me devuelve "proceso.php?id=x", sino que me devuelve un objeto. Al ejecutar console.log sobre lo que se supone que me debería retornar la dirección url, me devuelve un evento con cantidad de datos.

No se si me explico.... Un abrazo
  #10 (permalink)  
Antiguo 04/06/2014, 06:27
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 6 años, 3 meses
Puntos: 29
Respuesta: Cuadro de dialogo para confirmar o cancelar

A mí esto me funciona.
En prueba.php
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.         var href;
  3.  
  4.         $('.eliminar').click(function(e) {
  5.           e.preventDefault();
  6.           href = $(this).attr('href');
  7.           $('#dialog').fadeIn(400, function() {
  8.             $(this).html('¿Realmente desea eliminar este post?<br><br>');
  9.             $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
  10.             $(this).append("<input type='button' id='cerrar_dialogo' value='Cancelar'>");
  11.           });
  12.         });
  13.         $('#dialog').on("click", "#ejecutar_proceso", ejecutar);
  14.         $('#dialog').on("click", "#cerrar_dialogo", cerrar);
  15.        
  16.         function cerrar() {
  17.           $('#dialog').fadeOut();
  18.         }
  19.  
  20.         function ejecutar() {
  21.           $.ajax({
  22.             type: "GET",
  23.             url: href, //url: "proceso.php?id=x",
  24.             //data: "",
  25.             success: function(data) {
  26.               $('#dialog').html('href tipo: ' + typeof href + ' --> ' + href + '<br>' + data);
  27.             }
  28.           });
  29.           $("a[href='" + href + "']").remove();
  30.         }
  31.       });
Los id de php puestos a mano para la simulación
Código HTML:
Ver original
  1. <?php $id = 1; ?>
  2. <a href="proceso.php?id=<?php echo $id; ?>" class="eliminar">Eliminar Post 1</a><br>
  3. <?php $id = 2; ?>
  4. <a href="proceso.php?id=<?php echo $id; ?>" class="eliminar">Eliminar Post 2</a><br>
  5. <button id="comprobar">Comprobar</button>
  6. <div id="dialog"></div>

En proceso.php única línea para verificar que llegan los id:
Código PHP:
Ver original
  1. echo 'DELETE registro FROM tabla WHERE id='.$_GET["id"].';';

Última edición por bathorz; 04/06/2014 a las 06:34
  #11 (permalink)  
Antiguo 04/06/2014, 10:01
 
Fecha de Ingreso: marzo-2010
Mensajes: 128
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Cuadro de dialogo para confirmar o cancelar

Gracias de nuevo bathorz, ahora lo probaré. De todas formas también lo había solucionado de la siguiente forma

Código Javascript:
Ver original
  1. $('.eliminar').click(function(event){
  2.  
  3. event.preventDefault();
  4.  
  5. var href  =   $(this).attr('href'); //recogemos la dirección del Proceso PHP
  6.  
  7.  
  8.  $('#dialog').fadeIn(400, function() {
  9.  $(this).html('¿Realmente desea eliminar este post?<br><br>');
  10.  $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
  11.  $(this).append("<input type='button' id='cerrar_dialogo'  value='Cancelar'>");
  12.  
  13.   $('#ejecutar_proceso').click(function() {
  14.      ejecutar(href);
  15.   });
  16.  
  17.  $('#dialog').on("click", "#cerrar_dialogo", cerrar);
  18.  
  19. });

Y declarando las funciones ejecutar y cerrar fuera. De esta forma me pasa la variable href del modo esperado.

Gracias de nuevo

Etiquetas: cancelar, confirmar, cuadro, dialogo, funcion, html, input, javascript, php, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:50.