JQuery Dialog Binding Event to Button

Question

I am having some trouble with jQuery. I want to have a dialog box appear when the user clicks a link to delete something and prompt them to be sure that they actually want to delete it. The dialog box appears fine however I don't see a way to get the url of the link when user clicks the "Yes" button. I tried using the event.relatedTarget property to get the url of the a tag but it is null. Does anyone know how to do this?

Code

<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                //Go to the url in $("a.delete")
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        var url = $(this).attr("href");
        $('#dialog').dialog('open');
        return false;
    });
});

adeneo · Accepted Answer · 2011-12-04 20:24:00Z

2

<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                var url = $(this).data('url');
                window.location = url;
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        $('#dialog').data('url', $(this).attr("href"));
        $('#dialog').dialog('open');
        return false;
    });
});

A little bit of guessing, as there is no element a.delete in your code ? Using jQuery's data() is usually a better option than global variables.

edited Dec 4, 2011 at 20:24

answered Dec 4, 2011 at 20:18

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Graffam · Accepted Answer · 2011-12-04 20:21:08Z

You can declare the url var at the start of the document ready in order to access that variable in any of your functions. So first do var url; after (document).ready, then remove the var declaration from the delete's click function and finally set the window location to that variable like so: window.location.href = url; You'll get something like this in the end:

$(document).ready(function() {
    var url;

    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                window.location.href = url;
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        url = $(this).attr("href");
        $('#dialog').dialog('open');
        return false;
    });
});

I've set up an example with your code here: http://jsfiddle.net/dGETj/

Collectives™ on Stack Overflow

JQuery Dialog Binding Event to Button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related