jQuery dialog confirm before opening link

Question

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;
});
});

You should use `POST`, not `GET` (query string). [Read this](http://stackoverflow.com/questions/1469899/worst-security-hole-youve-seen#answer-1473947). (There is a comment - `That's why you should always POST for changing actions.` - sums it up.) — uınbɐɥs, Jul 18 '12 at 02:03
Interesting link, thanks. Well, this is part of a wordpress plugin I'm coding. The user must be logged in to see anything, so I believe no bot will ever be able to get in without discovering some admin password. Anyway, how can I use POST in a situation where action is changed by the click of a link, not by submitting a form? — rzb, Jul 18 '12 at 04:28

Andrew Whitaker · Accepted Answer · 2012-07-18T00:49:51.547

28

$("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)

edited Jul 18 '12 at 00:49

answered Jul 18 '12 at 00:40

Andrew Whitaker

124,656
32
289
307

2

You can use `top.location` in place of `window.location` to navigate to Google: http://jsfiddle.net/gilly3/uRGJD/1/ – gilly3 Jul 18 '12 at 00:55
Many thanks for your input. But I've tried your suggestion and it didn't work for me. I had to change selector "a" to ".myclass" because the number of rows is not known. Might this be the problem? – rzb Jul 18 '12 at 04:53
I know jQuery is loaded and functioning because the link stoped working (e.preventDefault()), but the dialog box won't pop up. Any suggestions? – rzb Jul 18 '12 at 05:32
Are you loading jQueryUI as well? – Andrew Whitaker Jul 18 '12 at 12:58
Yes. I forgot to mention it's a wordpress plugin, so I use these two lines to register and enqueue the script: wp_register_script( 'dialog-box', plugins_url( '/js/dialog-box.js', __FILE__ ), array( 'jquery-ui-core' ) ); wp_enqueue_script( 'dialog-box' ); – rzb Jul 18 '12 at 14:39
Hmm... You could try replacing the locally referenced scripts with a CDN like in the JSFiddle to see if that helps. Beyond that it's hard for me to say without seeing the generated HTML. – Andrew Whitaker Jul 18 '12 at 15:10
Ok, I've found the problem: 'jquery-ui-core' is just the base core, which does not include dialog. Loading 'jquery-ui-dialog' fixed it. But now the dialog has no style. I need to find out how to load an external .css style for it or maybe make my own. Any ideas? – rzb Jul 18 '12 at 15:31
still havn't had the time to find out how to load style for the dialog box within a wordpress plugin written as class, but I'm accepting your answer since it's technically working. Thanks again. – rzb Jul 19 '12 at 02:08

Leon · Answer 2 · 2012-07-18T00:42:12.867

8

how about using:

<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
     Go
</a>

edited Jul 18 '12 at 00:42

answered Jul 18 '12 at 00:40

Leon

988
7
20

2

doent the question specifically say jQuery Dialog? – Shaunak Jul 18 '12 at 00:43
yeah, the question does say jQuery Dialog and I think a lot of users will be able to provide such answer easily but focusing on the problem at hand, I just thought it might be helpful to suggest something a bit simpler which anyway still solves the problem. :) – Leon Jul 18 '12 at 00:48
Thanks for the input. That looks nice. But what I'm coding is not a template page. It's a wordpress plugin in which it looks like I can't get in and out php, so I couldn't solve the quotes dilemma. – rzb Jul 18 '12 at 05:22
best answer.. why complicated things when u get the job in 1 line of code – suraj jain Aug 22 '14 at 08:35
Exactly what I was looking for – Lucas Bustamante Feb 21 '17 at 18:52

gilly3 · Answer 3 · 2018-12-08T00:35:36.913

You can create a dialog that creates the buttons for you, but I like the approach where you create the buttons yourself so that you can use real links instead of using javascript to navigate.

Working demo: http://jsfiddle.net/gilly3/sdzbB/

<div id="dialog-confirm">
    <div class="message">Are you sure?</div>
    <div class="buttons">
        <a class="cancel" href="#">Cancel</a>
        <a class="ok" href="#">Ok</a>
    </div>
</div>

$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
    e.preventDefault();
    $("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .dialog("option", "title", $(this).text())
        .dialog("open")
        .find("a.ok").attr({
            href: this.href,
            target: this.target
        });
});

The benefit to using a real link instead of location.href = link, is that you get all kinds of built in goodies, like mouse shortcuts to open the link in a new tab, the ability to drag the link to the bookmarks bar or desktop, the ability to copy the link to the clipboard, keyboard access via tab, etc.

This is a good answer. However, the Jquery code on your answer did not work for me, but the one on your JsFiddle worked. — David Addoteye, Dec 06 '18 at 11:13
@DavidAddoteye - thanks. I've copied the jsfiddle code into my answer. — gilly3, Dec 08 '18 at 00:36

score 0 · Answer 4 · answered Jul 18 '12 at 00:42

You should prevent default behavior of the link which can be done like this code.

$('.tableId tr td a').click(function(event){
    //code to display confirmation dialog  
    event.preventDefault();

  }

You can use this JQuery plugin for confirmation dialog.http://jqueryui.com/demos/dialog/#modal-confirmation

jQuery dialog confirm before opening link

4 Answers4