Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery dialog confirm before opening link

I have a table populated with data from the database, where each row has a cell with an anchor element inside. This anchor would lead to the same page but with a query string telling php which row contains the data it should delete.

I need a jQuery dialog box to be opened when the user clicks an anchor asking him to confirm his intentions BEFORE loading the url. The 'cancel' button should close the dialog and do nothing. The 'OK' button should then let the url open.

Any help is highly appreciated.

// edit with 'what I have tried'. It's my first time messing with jQuery and time for studying is running out... =(

jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
    .html('Are you sure you want to do this?')
    .dialog({
        autoOpen: false,
        title: 'Confirm action',
        buttons: [{
            text: "Cancel",
            click: function(){
                jQuery(this).dialog("close");
            }
        }] // didn't even try the OK button since I couldn't even get the dialog opened
    });

jQuery('#confirm_del').click(function(){
    $dialog.dialog('open');
    return false;
});
});
like image 680
rzb Avatar asked Jul 18 '12 00:07

rzb


People also ask

How do you display a confirmation dialog when clicking an a link?

In the most simple way, you can use the confirm() function in an inline onclick handler.

What is confirm in jQuery?

The confirm() method displays a dialog box with a message, an OK button, and a Cancel button. The confirm() method returns true if the user clicked "OK", otherwise false .


2 Answers

$("a").on("click", function(e) {
    var link = this;

    e.preventDefault();

    $("<div>Are you sure you want to continue?</div>").dialog({
        buttons: {
            "Ok": function() {
                window.location = link.href;
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});

Example: http://jsfiddle.net/uRGJD/

(Redirecting to Google won't work on JSFiddle but should work on a normal page)

like image 79
Andrew Whitaker Avatar answered Nov 05 '22 21:11

Andrew Whitaker


how about using:

<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
     Go
</a>
like image 8
Leon Avatar answered Nov 05 '22 20:11

Leon