javascript Подтвердить замену с возвратом true / false - PullRequest
Новая
       26

javascript Подтвердить замену с возвратом true / false

2 голосов
/ 10 августа 2011

Поскольку диалоговое окно jquery UI не поддерживает возврат true / false, мне нужен другой способ заменить подтверждение javascript.

Он должен возвращать true / false, чтобы мои процессы проверки в javascript запускались: 

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

Ответы [ 4 ]

2 голосов
/ 10 августа 2011

Единственный способ, которым я знаю, это передать обратный вызов функции.
Проблема, с которой вы сталкиваетесь, заключается в том, что пользовательский интерфейс JQuery не будет блокировать выполнение, например, подтверждение ожидания ввода пользователя, поэтому вам нужно открыть диалоговое окно икогда пользователь нажимает на ответ, действуйте соответственно.

Если вы используете диалоговое окно Jquery UI, вы можете привязать функции обратного вызова к кнопкам.

Например: 

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

ВашПользовательское подтверждение будет выглядеть так: 

var myConfirm = function(msg, yesAction, noAction){
  $.dialog{
     [CODE],
     buttons: {
            yes: yeasAction,
            no: noAction
            }
     };
};
1 голос
/ 05 мая 2012

Это немного запутанно, но у меня работает.Он устанавливает «глобальную» переменную и проверяет это значение, чтобы увидеть, должно ли отображаться диалоговое окно.

Я знаю, что это, вероятно, не самый эффективный метод.

Функция verifyIt возвращает true илиfalse.

Причина, по которой setTimeout("confirmItConfirmed=false;",500); ближе к концу, состоит в том, чтобы сбросить переменную, чтобы при следующем вызове функции она просто не возвращала true.

В некоторых браузерах лучшеобработка высоты и ширины автоматически по сравнению с другими.

Функция alert заменяет предупреждение, а Подтверждение заменяет подтверждение. 

<html>
 <head>
  <title>jQuery Confirm &amp; Alert Replacements</title>
  <link type=text/css href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css rel=stylesheet />
  <script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
  <script type=text/javascript src=https://ajax.googleapis.com/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>
1 голос
/ 11 августа 2011

jQuery UI может делать то, что вы хотите, вы просто должны настроить свой код для асинхронной работы.Ариэль Поповоски дал ответ, который пытается превратить вызов диалога в простой вызов функции и будет работать хорошо, но потребует тех же базовых изменений кода синхронизации / асинхронности, которые потребуются для любого изменения из window.confirm.

Использованиеwindow.confirm мы используем синхронный способ действий - программа останавливается, пока пользователь принимает решение.Смотрите пример: http://jsfiddle.net/9jY7E/

Используя диалог пользовательского интерфейса, мы просто перемещаем поведение, которое должно произойти при подтверждении, в поведение, назначенное одной из кнопок пользовательского интерфейса.Появится диалоговое окно, и программа продолжит работу.Но поскольку вы переместили свой код «ok» в функциональность, связанную с кнопкой, этот код не будет работать, пока пользователь не щелкнет по нему.Следующая ссылка - это тот же пример, который я показал с window.confirm, но он был изменен для использования диалогового окна пользовательского интерфейса: http://jsfiddle.net/9jY7E/1/

Я не знаю никакой замены для window.confirm, которая работает так же, как window.confirm но допускает ваш собственный стиль.Все известные мне диалоговые системы по работе похожи на пользовательский интерфейс.

Дополнительно: По следующей ссылке вы найдете 3-й пример того же подтверждения внешней ссылки с использованием методологии, которую Ариэль дал в своем ответе.: http://jsfiddle.net/9jY7E/2/

0 голосов
/ 17 февраля 2016

Это также можно сделать с помощью обратных вызовов boopup +: 

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

https://github.com/petruisfan/boopup

...