alert - javascript Confirm replacement with return truefalse - Stack Overflow

admin管理员组

文章数量:1334413

Since jquery UI dialog does not support returning true/false, I need some other way to replace a javascript confirm.

It has to return true/false, so that my validation processes in javascript will run:

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

Since jquery UI dialog does not support returning true/false, I need some other way to replace a javascript confirm.

It has to return true/false, so that my validation processes in javascript will run:

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

• javascript
• alert
• confirm

Share Improve this question Follow asked Aug 10, 2011 at 19:32 JasonJason 7,6821515 gold badges7979 silver badges129129 bronze badges 6

• 1) Is this a question? 2) UI Dialog puts you into an async mode of thinking. You can use it for a confirm, but not in a synchronous way of thinking. – JAAulde Commented Aug 10, 2011 at 19:37
• This code can also be reduced to: return confirm(pm_info_msg_013); – Beez Commented Aug 10, 2011 at 19:39
• hey @JAAulde - i'm looking for an option besides UI dialog to replace a js confirm – Jason Commented Aug 10, 2011 at 19:43
• Ahh, ok. I thought you wanted something other than UI Dialog, and the code you show is just such a thing--using window.confirm(). But you want neither UI dialog or window.confirm. – JAAulde Commented Aug 10, 2011 at 19:50
• @JAAulde - right. I tried to make this work with UI, but UI doesn't return true/false - But the project managers want a styled confirm, and the validation needs a true/false – Jason Commented Aug 10, 2011 at 23:40

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

The only way I know of doing that is passing a callback to the function.
The problem you face is that JQuery UI will not block the execution like confirm to wait for user input so you need to open the dialog and when the user clicks an answer act accordingly.

If you use Jquery UI dialog you can bind the callback functions to the buttons.

For instance:

myConfirm("Are you sure?", function(){ [YES CODE] }, function(){ [NO CODE] });

Your custom confirm will look like this:

var myConfirm = function(msg, yesAction, noAction){
  $.dialog{
     [CODE],
     buttons: {
            yes: yeasAction,
            no: noAction
            }
     };
};

jQuery UI can do what you want, you simply have to adjust your code to work in an async way. Ariel Popovosky gave an answer which attempts to wrap a dialog call into a simple function call, and would work well but would require the same basic sync/async code modifications that any change from window.confirm would require.

Using window.confirm we use a synchronous way of doing things--program halts while user makes a decision. See example: http://jsfiddle/9jY7E/

Using UI's dialog, we simply move the behavior which should happen on confirm into the behavior assigned to one of the UI buttons. The dialog shows, and the program continues to run. But because you moved your "ok" code into the functionality bound to the button, that code doesn't run until the user clicks it. The following link is the same example I showed with window.confirm, but has been modified to use UI dialog: http://jsfiddle/9jY7E/1/

I don't know of any replacement for window.confirm which works just like window.confirm but allows for your own styling. All dialog systems I know of work somewhat similar to UI.

Additional: At the following link you will find a 3rd example of the same external link confirmation using the methodology Ariel gave in his answer: http://jsfiddle/9jY7E/2/

This is a little convoluted, but it works for me. It sets a "global" variable and tests that value to see if the dialog should be displayed.

I know it probably isn't the most efficient method.

The confirmIt funciton returns true or false.

The reason for the setTimeout("confirmItConfirmed=false;",500); near the end is to reset the variable so the next time the function is called it won't just return true.

Some browsers do better at handling the auto height and width than others.

The notice function is a replacement for alert and confirmIt replaces confirm.

<html>
 <head>
  <title>jQuery Confirm &amp; Alert Replacements</title>
  <link type=text/css href=http://ajax.googleapis./ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css rel=stylesheet />
  <script type=text/javascript src=https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js></script>
  <script type=text/javascript src=https://ajax.googleapis./ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
  <script type=text/javascript>
   var confirmItConfirmed = false;
   var jq = $.noConflict();
   function notice(message,title,height,width) {
    if (!title)
     var title = document.title+' says...';
    jq('body').append('<span id=noticeDialogSpan style=display:none></span>');
    jq('#noticeDialogSpan').html('<div id=noticeDialog title="'+title+'">'+message+'</div>');
    if (!width)
     var width = jq('#noticeDialogSpan').width()+40;
    if (!height)
     if (jq('#noticeDialogSpan').height() > jq(window).height()-100)
      var height = jq(window).height()-100;
     else
      var height = 'auto';
    jq('#navMenu').hide();
    jq('#noticeDialog').dialog ({
     height: height,
     width: width,
     modal: true,
     close: function(event,ui) {
      jq(this).dialog('destroy');
      jq('#noticeDialog').remove();
      jq('#noticeDialogSpan').remove();
      jq('#navMenu').show();
     },
     buttons: {
      'Close': function() { jq(this).dialog('close'); }
     }
    });
   }
   function confirmIt(e,message,title,height,width) {
    if (!confirmItConfirmed) {
     if (!title)
      var title = document.title+' says...';
     jq('body').append('<span id=confirmationDialogSpan style=display:none></span>');
     jq('#confirmationDialogSpan').html('<div id=confirmationDialog title="'+title+'">'+message+'</div>');
     if (!width)
      var width = jq('#confirmationDialogSpan').width()+40;
     if (!height)
      if (jq('#confirmationDialogSpan').height() > jq(window).height()-100)
       var height = jq(window).height()-100;
      else
       var height = 'auto';
     jq('#navMenu').hide();
     jq('#confirmationDialog').dialog ({
      height: height,
      width: width,
      modal: true,
      close: function(event,ui) {
       jq('#confirmationDialog').remove();
       jq('#confirmationDialogSpan').remove();
       jq(this).dialog('destroy');
       jq('#navMenu').show();
      },
      buttons: {
       'Confirm': function() {
        jq(this).dialog('close');
        confirmItConfirmed = true;
        e.click();
       },
       'Cancel': function() { jq(this).dialog('close'); }
      }
     });
    }
    setTimeout("confirmItConfirmed=false;",500);
    return confirmItConfirmed;
   }
   function testIt(e) {
    if (confirmIt(e,'Are you sure you want to continue?','My Title'))
     notice('You clicked Confirm','My Title');
   }
  </script>
 </head>
 <body>
  <br />
  <br />
  Click <a href=javascript:void(0) onclick="testIt(this)">HERE</a> to test a link.
  <br />
  <br />
  Click this button to test it too <input value='Click Me' type=button onclick="testIt(this)" />
 </body>
</html>

This could also be done using boopup + callbacks:

Boopup.confirm("This is a boopup confirm!", function(agree) {
    console.log(agree);
})

https://github./petruisfan/boopup

本文标签： alertjavascript Confirm replacement with return truefalseStack Overflow