JQuery UI dialog confirmation pass variable and actions

Question

I'd like to pass a variable to a Jquery Ui dialog confirmation box to do something when press YES and only close the dialog when press No. Now I have this code

$("#confirmDialog" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
 });


$(".confirm").click(function(){

var myHref = $(this).attr("href");

   $("#confirmDialog").dialog( "open" ).html ( "Confirm?" )
   $("#confirmDialog").on( "dialogclose", function( event, ui ) { window.location = myHref } );
   return false;
});

For now I found only the function on("dialogclose") and nothing else. How can I set the ui dialog to do something when the user press YES? I tried to pass the variable as well but without success

$(".confirm").click(function(){    
$("#confirmDialog").attr(myHref).dialog( "open" ).html ( "Confirm?" )
return false;
}); 

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

or

$("#confirmDialog").dialog( "open" ).html ( "Confirm?" )
$("#confirmDialog").on( "OK", function( event, ui ) { window.location = myHref } );

how can I do this? Thanks!

You would have to write an extension method. What are you trying to achieve? Do you want to set some value when user clicks ok inside the dialog? — uv_man
– uv_man, Commented Feb 17, 2013 at 11:33

uv_man · Accepted Answer · 2013-02-17 20:19:38Z

1

You could write it so your ok button click (inside the dialog), calls a function which uses the variable you want to set. You then set that variable inside the link click event, then display the dialog for confirmation.

For example:

    var $dialog = $( '#dialog-confirm' );
var $button = $('#linkButton');
var link = '';

// init dialog

$dialog.dialog({
  resizable: false,
  height:340,
  modal: true,
  autoOpen: false,
  buttons: {
    Ok: function() {
      doSomething(); // reference your function here
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

// bind event

$button.on('click', function(e){
  e.preventDefault();
  link = $(this).attr('href');
  $dialog.dialog('open');
});

function doSomething(){
  window.location = link;
}

Working example here: http://jsbin.com/azezal/2/

Code view here: http://jsbin.com/azezal/2/edit

edited Feb 17, 2013 at 20:19

answered Feb 17, 2013 at 11:50

uv_man

2241 silver badge3 bronze badges

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

2 Comments

Paolo Rossi Over a year ago

thank but I would like to use a link not a button, and I would like to use the href attribute to set my link variable. I tried so $(".del").click(function(){ link = $(this).attr("href"); $dialog.dialog('open'); }); but does not work :(

uv_man Over a year ago

The code is actually very similar, I have updated my answer. Hopefully that's right :)

Collectives™ on Stack Overflow

JQuery UI dialog confirmation pass variable and actions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related