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!

Answer 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