jQuery UI Dialog confirmation...

Question

I'm trying to use the jQuery UI Dialog to display a confirmation prior to executing the action...in this case navigating to the selected link....but in another case, I might like to use AJAX delete.

I thought I could pass the action as parameter of the custom_confirm function:

   $("a.edit").click(function(e){
       e.preventDefault();
       custom_confirm('Please Note:',
           function(){
               location.href = $(this).attr('href');
           }
       );
   });

   function custom_confirm(prompt, action, title){
    if (title === undefined) title = "Are you sure?";
    if ($("#confirm").length == 0){
     $("#main div.inner").append('<div id="confirm" title="' + title + '">' + prompt + '</div>');
     $("#confirm").dialog({buttons: {'Proceed': function(){ $(this).dialog('close'); action; }, Cancel: function(){ $(this).dialog('close'); }}});
    }
    else {
     $("#confirm").html(prompt);
     $("#confirm").dialog('open');
    }
}

It's not working. Is there another way to accomplish this?

Answer 1

You need to pass in the this variable with a closure.

See this example. (improved)

   $("a.edit").click(function(e){
       e.preventDefault();
       custom_confirm('Please Note:',
           (function (element) {
             return function(element){
               location.href = $(element).attr('href');
           })(this)
       );
   });

But what you're trying to do could be done with the following probably just as easy:

$("a.edit").each(function() {
  $(this).click(function() {
    if (!confirm("Are you sure about that?"))
       e.preventDefault();
  });
});

Answer 2

Yes, or simply:

$("a.edit").click(function(e){
       e.preventDefault();
       var href = $(this).attr('href');
       custom_confirm('Please Note:',
           function(){
               location.href = href;
           }
       );
   });

Answer 3

Thanks for the quick responses guys. I tried your suggestion, but it's still not executing function that is passed as parameter.

    $("a.edit").click(function(e){
       e.preventDefault();
       var href = $(this).attr('href');
       custom_confirm('Please Note:',
           function(){
console.log(href);
               location.href = href;
           }
       );
   });

Answer 4

Figured it out. If you are passing a function as a parameter to another function, you need to call the parameter as a funciton

action()

Instead of as a variable

action

Hope that helps

$("a.edit").click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    custom_confirm('Please Note:',
     function(){
      location.href = href;
     }
    );
});

function custom_confirm(prompt, action, title){
    if (title === undefined) title = "Are you sure?";
     if ($("#confirm").length == 0){
      $("#main div.inner").append('<div id="confirm" title="' + title + '">' + prompt + '</div>');
      $("#confirm").dialog({buttons: {'Proceed': function(){ $(this).dialog('close'); action(); }, Cancel: function(){ $(this).dialog('close'); }}});
     }
     else {
      $("#confirm").html(prompt);
      $("#confirm").dialog('open');
    }
}

Answer 5

Cleaned up the custom_confirm function, added the close option:

function custom_confirm(prompt, action, title){
    if (title === undefined) title = "Are you sure?";
    $("#main div.inner").append('<div id="confirm" title="' + title + '">' + prompt + '</div>');
    $("#confirm").dialog({position: 'top', width: 700, modal: true, resizable: false, show: "fold", hide: "blind", buttons: {'Proceed': function(){ $(this).dialog('close'); action(); }, Cancel: function(){ $(this).dialog('close'); }}, close: function(ev, ui) { $(this).remove();}});
}

Answer 6

@timborden - thanks for sharing your solution. I like using the jQuery UI elements for their uniform UI, and I was denting my cubicell wall with my head trying to replicate Javascript's native confirm function.