Диалог подтверждения JQuery - PullRequest
6 голосов
/ 12 декабря 2010

Я ищу способ реализовать многоразовый диалог подтверждения с помощью JQuery.

Это часть из класса MyApp для открытия диалогового окна:

/**
 * @param text string Message to display
 */
getConfirmationDialog: function(text) {
   MyApp.confirmDialog = $('<div><p>' + text + '</p></div>');
   MyApp.confirmDialog
    .dialog({
        modal: true,
        autoOpen: false,
        title: 'Please confirm',
        width: 300,
        height: 180,
        buttons: {
            'OK': function() {
                return true;
            },
            Cancel: function() {
                $(this).dialog('close');
                return false;
            }
        }
    });

    MyApp.confirmDialog.dialog('open');
},

В другом классе я делаю:

/**
 * Clear system cache
 *
 * @param url string Backend URL
 */
clearCache: function(url) {

    dialog = MyApp.getConfirmationDialog('Clear cache?');

    //dialog returns true..
    if (dialog) {
        MyApp.admin.dashboard.doClearCache();
    }

},

Но я понятия не имею, чтобы сделать это "правильным" способом ... диалог не может вернуть значение или?

Ответы [ 7 ]

5 голосов
/ 03 апреля 2012

Код ниже является моим решением этой проблемы.Я задокументировал использование внутри функции, но подчеркну это здесь:

$.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null);

Никаких специальных настроек не требуется, просто включите кодовый блок "ConfirmDialog" на свою страницу (я поместил свой в свой app.js) и вызовитеодной строкой выше.Наслаждайтесь!

$.ConfirmDialog = function (message, title, callbackYes, callbackNo, callbackArgument) {
    /// <summary>
    ///     Generic confirmation dialog.
    ///
    ///     Usage:
    ///         $.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null);
    ///         $.ConfirmDialog('Do you want to continue?', 'Continue Title', function(arg) { alert('yes, ' + arg); }, function(arg) { alert('no, ' + arg); }, 'please');
    ///</summary>
    ///<param name="message" type="String">
    ///     The string message to display in the dialog.
    ///</param>
    ///<param name="title" type="String">
    ///     The string title to display in the top bar of the dialog.
    ///</param>
    ///<param name="callbackYes" type="Function">
    ///     The callback function when response is yes.
    ///</param>
    ///<param name="callbackNo" type="Function">
    ///     The callback function when response is no.
    ///</param>
    ///<param name="callbackNo" type="Object">
    ///     Optional parameter that is passed to either callback function.
    ///</param>

    if ($("#modalConfirmDialog").length == 0)
        $('body').append('<div id="modalConfirmDialog"></div>');

    var dlg = $("#modalConfirmDialog")
        .html(message)
        .dialog({
            autoOpen: false, // set this to false so we can manually open it
            dialogClass: "confirmScreenWindow",
            closeOnEscape: true,
            draggable: false,
            width: 460,
            minHeight: 50,
            modal: true,
            resizable: false,
            title: title,
            buttons: {
                Yes: function () {
                    if (callbackYes && typeof (callbackYes) === "function") {
                        if (callbackArgument == null) {
                            callbackYes();
                        } else {
                            callbackYes(callbackArgument);
                        }
                    }

                    $(this).dialog("close");
                },

                No: function () {
                    if (callbackNo && typeof (callbackNo) === "function") {
                        if (callbackArgument == null) {
                            callbackNo();
                        } else {
                            callbackNo(callbackArgument);
                        }
                    }

                    $(this).dialog("close");
                }
            }
        });
    dlg.dialog("open");
};
4 голосов
/ 13 октября 2012

См. Ответ Vinay выше для кнопок подтверждения.Я использовал его, чтобы создать простой, но многократно используемый диалог с кнопкой «ОК» для обычных целей и «ОК» и «Отмена» для подтверждения.Вы также можете установить собственный заголовок и контент на лету.

<div id="yeah" title="Alert">
    <p id="yeah_msg">&nbsp;</p>
</div>

<button id="click_me">Show it</button>

<script type="text/javascript">
    function dlg(msg, callback, title){
        if(callback == undefined){
            callback = null;
        }
        if(title == undefined){
            title = 'Alert';
        }

        $("#yeah_msg").html(msg);
        $("#yeah").dialog('option', 'title', title);

        if(callback){
            $("#yeah").dialog('option', 'buttons', { 
                "Ok": function() { 
                    $( this ).dialog( "close" );
                    if(null != callback) callback.success();
                }, 
                'Cancel': function(){
                    $( this ).dialog( "close" );
                    if(null != callback) callback.fail();
                }  
            });
        }else{
            $("#yeah").dialog('option', 'buttons', { 
                "Ok": function() { 
                    $( this ).dialog( "close" );
                }
            });
        }

        $("#yeah").dialog("open");
    }

    $(document).ready(function(){
        //create dialog
        $("#yeah").dialog({ 
            autoOpen: false, 
            modal: true, 
            show: 'blind', 
            hide: 'explode',
            resizable: false 
        });

        //show dialog   
        $('#click_me').click(function(){
            dlg('title', {success: function(){ console.log('yipee'); }, fail: function(){ console.log('nopee'); } });
        });
    });
</script>
3 голосов
/ 20 сентября 2011
  1. Создать класс подтверждения.

    // Ниже приведен скелет класса подтверждения

       function ConfirmDialog() {
           this.showMessage = function(message, callback, argument) {
    
                var $dialog = $('<div></div>')
                   .html(message)
                   .dialog({
                        modal: true,
                        closeOnEscape: true,
                        buttons: {
                             Yes: function() {
                               if (callback && typeof(callback) === "function") {
                                  if (argument == 'undefined') {
                                      callback();
                                   } else {
                                      callback(argument);
                                    }
                                  }
    
                                 $(this).dialog("close");
                               },
    
                              No: function() {
                                  $(this).dialog("close");
                              }
                          }
                      });
                  $dialog.dialog("open");
                 }
           }
    
  2. Создать объект типа verifyDialog и поместить в .jsp

    CONFIRM_DIALOG = new ConfirmDialog();
    
  3. Создание сообщения обратного вызова с одним параметром.

    function saved(what) {
        alert("Saved: " + what);        
    }
    
  4. Звоните туда, где вам когда-либо нужно.

    CONFIRM_DIALOG.showMessage("Do you wish to marry?", saved, "Life");
    

Работа выполнена !!

3 голосов
/ 12 декабря 2010

jQuery UI не предоставляет хороший способ изменить события кнопки диалога.

Я бы использовал шаблон pubsub, крошечный плагин pubsub от Cowboyba здесь или усилия Фиггинса здесь . Это чище, чем пытаться использовать геттеры и сеттеры jquery ui, чтобы пытаться изменить кнопки и события их нажатия, и если вы создаете большое приложение, это поможет вам во многих других местах.

Вы можете опубликовать событие для нажатия кнопки ОК, а затем подписаться и отписаться от других обработчиков, чтобы прослушать событие.

Quick Demo здесь, чтобы показать функциональность.

2 голосов
/ 12 декабря 2010

Я думаю, я понимаю, что вы говорите.Посмотрите на мою попытку jsfiddle и посмотрите, поможет ли она вам вообще.Я думаю, что он делает то, что вы пытаетесь.

1 голос
/ 14 декабря 2012

Вау, почему это так сложно? Вот простой способ

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}
1 голос
/ 24 января 2012

Я успешно реализовал окно подтверждения в Jquery. прежде чем пытаться это сделать, убедитесь, что у вас есть библиотека Jquery и css INCLUDED (jquery-ui-1.8.16.custom.css, jquery-1.6.2.js, jquery-ui-1.8.16.custom.min. JS). ОСНОВНЫЕ РАЗЛИЧИЯ МЕЖДУ JAVASCRIPT ПОДТВЕРЖДАЮТ КОРОБКУ И ЭТУ КОРОБКУ, КОТОРЫЕ МЫ СОЗДАЕМ, ИСПОЛЬЗУЯ DIV - ЭТО - ПОДТВЕРЖДАЮ JAVASCRIPT ДЛЯ ВХОДА ПОЛЬЗОВАТЕЛЯ, ПОСЛЕ ПОЛЬЗОВАТЕЛЯ ВХОДЯТ ДА / НЕТ, СЛЕДУЮЩАЯ СЛЕДУЮЩАЯ СЛЕДУЮЩАЯ ЛИСТЬ БЛОК - ** СЛЕДУЮЩАЯ ЛИНИЯ КОДА ПОСЛЕ showConfirm () выполнится немедленно *, поэтому будьте осторожны

/** add this div to your html

* /

var $confirm;
var callBack;
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>';
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">';
var messageStyleEnd = '</span>';


$(document).ready(function(){
    $('#confirmDialog').dialog({
            autoOpen: false,
            modal: true
    });


    //jquery confirm box -- the general alert box
    $confirm = $('<div  style="vertical-align:middle;"></div>')
    .html('This Message will be replaced!')
    .dialog({
        autoOpen: false,
        modal: true,
        position: 'top',
        height:300,
        width: 460,
        modal: true,
        buttons: {
            Ok   : function() {
                $( this ).dialog( "close" );
                if(null != callBack)
                    callBack.success();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                if(null != callBack)
                    callBack.fail();
            }
        }
    }); 

});

    function showConfirm(message,callBackMe,title){
    callBack = null;
    $confirm.html(""); // work around
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd);
    if(title =='undefined'|| null ==title)
        $confirm.dialog( "option", "title", "Please confirm" );
    else
        $confirm.dialog( "option", "title", title);
    var val = $confirm.dialog('open');
    callBack = callBackMe;
    // prevent the default action
    return true;
}

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = {
                    success: function()
                            {   // call your yes function here                                  
                                clickedYes();
                                return;
                            },
                    fail: function (){
                                // call your 'no' function here
                                 clickedNo();
                                return ;
                            }
                };


    showConfirm("Do you want to Exit ?<br/>"+
                    ,callMeBack1,"Please Answer");
...