CODEWITHSUNDEEP
phpjqueryhtmljquery-uijquery-ui-dialog
rzb
rzb

Reputation: 2153

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

Upvotes: 6

Views: 31467

Answers (4)

gilly3
gilly3

Reputation: 91467

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.

Upvotes: 2

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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

Upvotes: 29

Bishnu Paudel
Bishnu Paudel

Reputation: 2079

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

Upvotes: 0

Leon
Leon

Reputation: 988

how about using:

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

Upvotes: 8

Related Questions