Замена диалога jQueryUI для подтверждения?

Я пытаюсь переопределить окно с подтверждением по умолчанию в диалоговом окне jQueryUI, и вот моя попытка:Замена диалога jQueryUI для подтверждения?

window.confirm = function (message_confirm) { 
     $(document.createElement('div')) 
      .attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' }) 
      .html(message_confirm) 
      .dialog({ 
       buttons: { YES: function() { return true; }, NO: function() { $(this).dialog('close'); } }, 
       close: function() { $(this).remove(); }, 
       draggable: true, 
       modal: true, 
       resizable: false, 
       width: 'auto', 
       hide: { effect: "fade", duration: 300 }, 

      }); 

    };

Это работает в том, что когда-то этот скрипт запускается, вызывая регулярные confirm показывает диалог jQueryUI, однако , выбор YES не работает. У меня есть вызов ajax, как показано ниже:

if (confirm("Are you sure you want to delete this user?")) 
{ 
     alert("test"); 
    //ajax call 
} 
return false;

И тестовое предупреждение не появилось. НЕТ выбора диалога работает нормально. Как я могу заставить ДА работать?

спасибо.

источник

2016-08-02 ITWorker

любые ошибки? Пробовал с console.log вместо предупреждения? работает console.log в функции «ДА:» (заменить с возвратом true;)? – ggzone

@ggzone нет ошибок. Заменил 'return true' на' console.log («диалог да нажал») 'и он появился правильно на консоли, когда я нажал« Да ». console.log вместо предупреждения также не отображался (такое же поведение, как и исходное тестовое предупреждение). – ITWorker

хорошо, тогда вы хотите функцию обратного вызова. есть уже хороший ответ, как это сделать – ggzone

Поскольку окно является асинхронным вы можете использовать отложенный подход:

window.confirm = function (message_confirm) { 
 
    var defer = $.Deferred(); 
 
    $('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm}) 
 
    .dialog({ 
 
    buttons: { 
 
     YES: function() { 
 
     defer.resolve("yes"); 
 
     $(this).attr('yesno', true); 
 
     $(this).dialog('close'); 
 
     }, NO: function() { 
 
     defer.resolve("no"); 
 
     $(this).attr('yesno', false); 
 
     $(this).dialog('close'); 
 
     } 
 
    }, 
 
    close: function() { 
 
     if ($(this).attr('yesno') === undefined) { 
 
      defer.resolve("no"); 
 
     } 
 
     $(this).remove(); 
 
    }, 
 
    draggable: true, 
 
    modal: true, 
 
    resizable: false, 
 
    width: 'auto', 
 
    hide: {effect: "fade", duration: 300} 
 
    }); 
 
    return defer.promise(); 
 
}; 
 

 
$(function() { 
 
    confirm("Are you sure you want to delete this user?").then(function(yesno) { 
 
    console.log(yesno); 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

источник

2016-08-02 14:33:11 gaetanoM

Это сработало, и диалог был закрыт после того, как действия были выполнены. Я выполнил действие после проверки на 'yesno'. Большое спасибо. – ITWorker

@ITWorker Обновлен сниппет: я добавил $ (this) .attr ('yesno', true); или false, и я проверяю это раньше, чтобы закрыть диалог. Таким образом, если вы закроете диалог с помощью ESC или X, в любом случае будет предпринято отложенное действие разрешения, и тогда будет выполнен раздел. – gaetanoM

Отличное спасибо. – ITWorker

можно добавить параметр обратного вызова функции

window.confirm = function (message_confirm, ok_callback)

пожара он на ДА

buttons: { YES: function() { ok_callback(); }}

и перейти позже как

confirm("message", function(){ 
    alert('smth'); 
});

источник

2016-08-02 14:23:44

Это сработало, но диалог все еще оставался там после того, как я нажал «да», и действие было выполнено. Спасибо за помощь. – ITWorker

Попробуйте что-нибудь, как показано ниже. Это сработало для меня.

<script> 
    $(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height: "auto", 
     width: 400, 
     modal: true, 
     buttons: { 
     "Delete user": function() { 
      alert("test"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="dialog-confirm" title="Please confirm"> 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p> 
</div>

источник

2016-08-02 14:31:05 spm

Я не пробовал, но спасибо за ответ. Я пытался использовать его, чтобы подтвердить можно было заменить в приложении, и это позволит мне использовать разные варианты поведения для Да, а не определять его в диалоговом окне каждый раз. – ITWorker

Замена диалога jQueryUI для подтверждения?

ответ

Смежные вопросы