Jquery UI dialog in place of javascript confirm

Question

I have a bunch of validation javascript processes with confirms. I want to use jquery ui dialog, but I need to return true for the rest of the validation processes.

For example:

var where_to_coupon = confirm(pm_info_msg_013);
      if (where_to_coupon== true) {
      doSubmit=true;
      return doSubmit;

So I need a function to replace confirm with a UI dialog, pull the message string (pm_info_msg_013), and use my own buttons or UI buttons to return true for the validation process.

Not sure where to start with this one.

help?

Answer 1

In jQuery UI dialog, set the modal option to true, and specify primary and secondary user actions with the buttons option.

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: [{
            text: pm_info_msg_013,
            click : function() {    
                $( this ).dialog( "close" );
                // code related to "where_to_coupon== true" goes here
                // submit form
                }
            }, {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
                doSubmit = false;
                // don't submit form
            }}]
    });

See the demo here: http://jqueryui.com/demos/dialog/#modal-confirmation

Update: This will allow you to create multiple confirms. Usage:

function CreateDialog(okText, cancelText, okCallback, cancelCallback) {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: [{
                text: okText,
                click : function() {    
                    $( this ).dialog( "close" );
                    okCallback();
                    }
                }, {
                text: cancelText,
                click: function() {
                    $( this ).dialog( "close" );
                    cancelCallback();
                }}]
            }
        });

// ******* usage #1 ********    
CreateDialog(pm_info_msg_013, "Cancel", function () {
   // where_to_coupon== true
}, function() {

   // where_to_coupon== false
});

function OnConfirmTrue() {
  // do something
}

function OnConfirmFalse() {
  // do something
}

// ******* usage #2 ********

CreateDialog(pm_info_msg_013, "Cancel", OnConfirmTrue, OnConfirmFalse);

Answer 2

I have created a plugin for jQuery UI, called dialogWrapper, that provides several methods, including a confirm method. You call it like this:

$.confirm("Prompt", function(){}, function(){}, {});

The second and third arguments are what to do when the yes and no button are clicked, respectively. The fourth is for additional arguments.

Check it out here: http://code.google.com/p/dialogwrapper/

It doesn't work like the native JavaScript confirm method, though, since it is asynchronous. So you wouldn't be able to directly overwrite confirm with $.confirm.