Pass a variable to JQuery UI dialog

Question

I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.

$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
            window.location.href = 'url and myvar??';
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
});


$("#delete").click(function() {
    $("#confirm").dialog( "open" ).html ( "Are U Sure?" );
    return false;
});

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>

Is there a good way to do this?

score 87 · Answer 1 · edited May 23 '17 at 12:02

87

You can try using the .data() method to store data for you. Take a look at this answer Passing data to a jQuery UI Dialog

For example to pass a variable, you can store it using the data function, before opening the dialog

$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");

Then you can get this back by:

var my_data = $("#dialog_div").data('param_1')

edited May 23 '17 at 12:02

Community

1
1

answered Feb 15 '13 at 16:50

akotian

3,885
1
33
44

How can I pass the php variable with .data in my code? `code`$("#confirm").data('recordid', '??var_php??').dialog( "open" ).html ( "Are U Sure?" ); – Paolo Rossi Feb 15 '13 at 18:41
2

I am not too familiar with php, but have you tried `$("#confirm").data('recordid', ' echo var_php; ?>')` if this is a php file also take a look at http://stackoverflow.com/questions/5310216/passing-php-variable-into-javascript if it helps you – akotian Feb 16 '13 at 00:14

score 9 · Answer 2 · answered Feb 15 '13 at 16:45

You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:

$("#delete").click(function(ev) {
    ev.preventDefault(); // preventDefault should suffice, no return false
    var href = $(this).attr("href");
    var dialog = $("<div>Are you sure?</div>");

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                window.location = href;
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
});

Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
    return def.promise();
}

And then use it like so

confirmDialog("are your sure?").done(function() {
    window.location = $(this).attr("href"); 
}).fail(function() {
    // cry a little
});

You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.

For more information on jquery deferred: http://api.jquery.com/category/deferred-object/

this worked well for me, but had to remove the part - close: {$( this ).remove();} — Rishi P, Jul 09 '18 at 19:03

Pat Burke · Answer 3 · 2013-02-15T18:40:18.973

Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects. Example:

$(function(){
    $(".deleteLink").click(function(){
       var id = $(this).data("record-id");
       var myHref = $(this).attr('href');
        $("#confirmDialog").dialog({
            buttons:{
            "Yes": function()
                {
                    window.location.href = myHref + id;
                }
            }
        });
    });

});

<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
   <p>Are you sure?</p>
</div>

Unfortunately not pass the variable but pass all the href value — Paolo Rossi, Feb 16 '13 at 16:28

score 0 · Answer 4 · answered Jan 05 '19 at 23:25

HTML

<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS

$('.confirmation-dialog').confirm({ buttons: { Yes: function(){ console.log(this.$target.attr('data-mydata')); No: function(){ } } });

Pass a variable to JQuery UI dialog

4 Answers4

Linked