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?

Mrchief · Accepted Answer · 2011-08-10 18:27:08Z

10

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);

edited Aug 10, 2011 at 18:27

answered Aug 10, 2011 at 18:02

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

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

8 Comments

Jason Over a year ago

not sure how to incorporate with my javascript confirm string

Chris Laplante Over a year ago

You would need to dynamically change the html of the dialog-confirm div ($("#dialog-confirm").html(pm_info_msg_013)) before calling the above code

Jason Over a year ago

ok, thanks for that. Next question being how to trigger a "if (where_to_coupon== true) {"

Mrchief Over a year ago

@Jason: Put them inside the respective click functions. You can call other functions on your page from there too. You don't need to check for where_to_coupon== true as the handlers get called based on what button was clicked. See my update again.

Jason Over a year ago

but doesn't that only return the text: pm_info_msg_013, versus the string the pm_info_msg_013 references?

|

Chris Laplante · Accepted Answer · 2011-08-10 17:59:44Z

1

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.

answered Aug 10, 2011 at 17:59

Chris Laplante

29.7k18 gold badges109 silver badges137 bronze badges

5 Comments

Jason Over a year ago

looks interesting, but I'm trying to touch minimal code (especially in the javascript) - so how would I return true or false within your plugin?

Chris Laplante Over a year ago

You can't, since $.confirm works asynchronously. It relies entirely on callbacks. There is no way to use jQuery Dialogs synchronously without ugly, UI-blocking code (for example, a while loop that checks if a button has been pressed yet).

Jason Over a year ago

well, I assume there's gotta be a way (a second function) or an onclick event to trigger a true?

Jason Over a year ago

what if I used my own buttons within the error message, instead of using jquery UI's buttons?

Chris Laplante Over a year ago

I'm not quite sure what you mean

mintedsky · Accepted Answer · 2013-11-23 16:00:24Z

0

Have you tried Impromtu by Trent Richardson?

http://trentrichardson.com/Impromptu/

This jquery plug-in can give you the control you are looking for with prompts and confirms and more.

edited Nov 23, 2013 at 16:00

answered Nov 22, 2013 at 8:29

mintedsky

1,10313 silver badges18 bronze badges

1 Comment

Radim Köhler Over a year ago

Please, try to read this stackoverflow.com/help/deleted-answers, to get more understanding how to not answer. Namely: "Answers that do not fundamentally answer the question": barely more than a link to an external site

Collectives™ on Stack Overflow

Jquery UI dialog in place of javascript confirm

3 Answers 3

8 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related