[SOLUCIONADO] Cuadro de dialogo para confirmar o cancelar

[rubiomike]

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:

<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:

$('.eliminar').click(function(event){
 
    event.preventDefault();
 
    var href   =   $(this).attr('href'); //recogemos la dirección del Proceso PHP
 
//mostramos el cuadro de dialogo con los botones
 
    $('#dialog').fadeIn(400, function() {
      $(this).html('¿Realmente desea eliminar este post?<br><br>');
      $(this).append("<input type='button' id='ejecutar_proceso'  value='Aceptar'>");
      $(this).append("<input type='button' id='cerrar_dialogo'  value='Cancelar'>");
    });    
 
});
 

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

Código Javascript:

$('#dialog').on("click", "#ejecutar_proceso", ejecutar);
$('#dialog').on("click", "#cerrar_dialogo", cerrar);
 
//función que sirve para cerrar el cuadro de dialogo
    function cerrar() {
      $('#dialog').fadeOut();
    }
 
//función para ejecutar el proceso
    function ejecutar(){
      alert(href);
    }
 

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

[bathorz]

Declaración de variable:

Código Javascript:

$(document).ready(function() {
        
        var href; // <-- aquí
        
        $('.eliminar').click(function(e) {
          e.preventDefault();
          //recogemos la dirección del Proceso PHP
          href = $(this).attr('href');
          //mostramos el cuadro de dialogo con los botones
          $('#dialog').fadeIn(400, function() {
            $(this).html('¿Realmente desea eliminar este post?<br><br>');
            $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
            $(this).append("<input type='button' id='cerrar_dialogo' value='Cancelar'>");
          });
        });
        $('#dialog').on("click", "#ejecutar_proceso", ejecutar);
        $('#dialog').on("click", "#cerrar_dialogo", cerrar);
        //función que sirve para cerrar el cuadro de dialogo
        function cerrar() {
          $('#dialog').fadeOut();
        }
        //función para ejecutar el proceso
        function ejecutar() {
          alert(href);
        }
      });
 

Código HTML:

<a href="proceso.php?id=1" class="eliminar">Eliminar Post</a>
<button id = "comprobar">Comprobar</button>
<div id="dialog"></div>
 

[Alexis88]

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

Código Javascript:

$('.eliminar').click(function(event){
    event.preventDefault();
    if (confirm("¿Realmente desea eliminar este post?"));
        window.location = this.href;
});
 

Saludos

[rubiomike]

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

[Alexis88]

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

[rubiomike]

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

[Alexis88]

Código Javascript:

$("identificador_enlace").click(function(event){
    event.preventDefault();
    //Muestras el cuadro de diálogo
});
 
$("identificador_confirmacion").click(function(){
    var enlace = $("identificador_enlace").prop("href");
    window.location = enlace;
});
 
$("identificador_negacion").click(function(){
    //Ocultas el cuadro de diálogo
});
 

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

[bathorz]

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:

function ejecutar() {
          // eliminar el registro (id=..) con php
          $.ajax({
            type: "GET",
            //url: "proceso.php?id=1",
            url: href,
            //data: "",
            success: function(data) {
              $('#dialog').html('Eliminado ' + href);
            }
          });
          // eliminar el enlace seleccionado del html
          $("a[href='" + href + "']").remove();
        }
 

[rubiomike]

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:

<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

[bathorz]

A mí esto me funciona.
En prueba.php

Código Javascript:

$(document).ready(function() {
        var href;
 
        $('.eliminar').click(function(e) {
          e.preventDefault();
          href = $(this).attr('href');
          $('#dialog').fadeIn(400, function() {
            $(this).html('¿Realmente desea eliminar este post?<br><br>');
            $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
            $(this).append("<input type='button' id='cerrar_dialogo' value='Cancelar'>");
          });
        });
        $('#dialog').on("click", "#ejecutar_proceso", ejecutar);
        $('#dialog').on("click", "#cerrar_dialogo", cerrar);
        
        function cerrar() {
          $('#dialog').fadeOut();
        }
 
        function ejecutar() {
          $.ajax({
            type: "GET",
            url: href, //url: "proceso.php?id=x",
            //data: "",
            success: function(data) {
              $('#dialog').html('href tipo: ' + typeof href + ' --> ' + href + '<br>' + data);
            }
          });
          $("a[href='" + href + "']").remove();
        }
      });
 

Los id de php puestos a mano para la simulación

Código HTML:

<?php $id = 1; ?>
<a href="proceso.php?id=<?php echo $id; ?>" class="eliminar">Eliminar Post 1</a><br>
<?php $id = 2; ?>
<a href="proceso.php?id=<?php echo $id; ?>" class="eliminar">Eliminar Post 2</a><br>
<button id="comprobar">Comprobar</button>
<div id="dialog"></div>
 

En proceso.php única línea para verificar que llegan los id:

Código PHP:

echo 'DELETE registro FROM tabla WHERE id='.$_GET["id"].';';
 

[rubiomike]

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

Código Javascript:

$('.eliminar').click(function(event){
 
event.preventDefault();
 
var href  =   $(this).attr('href'); //recogemos la dirección del Proceso PHP
 
 
 $('#dialog').fadeIn(400, function() {
 $(this).html('¿Realmente desea eliminar este post?<br><br>');
 $(this).append("<input type='button' id='ejecutar_proceso' value='Aceptar'>");
 $(this).append("<input type='button' id='cerrar_dialogo'  value='Cancelar'>");
 
  $('#ejecutar_proceso').click(function() {
     ejecutar(href);
  });
 
 $('#dialog').on("click", "#cerrar_dialogo", cerrar);
 
});
 

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

Gracias de nuevo