以编程方式禁用jquery ui对话框上的按钮,直到ajax调用完成？

Question

我正在使用jquery ui对话框,其中一个按钮导致ajax调用需要几秒钟,所以我想在我点击它之后禁用按钮,直到ajax调用返回(然后我将启用它).

从谷歌搜索,我看到其他几个问这个问题,但答案似乎非常过时和hacky(基于非常旧版本的jquery ui).所以我希望现在有更优雅的方式来做到这一点

如何在jquery ui对话框上以编程方式禁用或启用按钮？

Answer 1

用这个:

$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    },
    open: function( event, ui ) {
        //disabling button after 3 seconds
        //for all buttons
        setTimeout("$('.ui-button').attr('disabled', 'disabled')", 3000);
        //for first button
        setTimeout("$('.ui-button').first().attr('disabled', 'disabled')", 3000);
    }
});

查看演示:http://jsfiddle.net/renishar/db5SX/373/

在此按钮以3秒后以编程方式禁用.

Answer 2

我想这就是你要找的东西:

• 按下的按钮将被禁用
• 延迟承诺将一直等到ajax()呼叫完成
• 然后延迟操作将重新启用该按钮

::

buttons: {
    "DoAjax": function( e ) {
       //disabling button clicked
       var btnAjax = $(".ui-dialog-buttonpane button:contains('DoAjax')");
       btnAjax.disable(true);

       $.when( $.ajax( "/api/controller/action" ) )
            .then(function( data, textStatus, jqXHR ) {
                 // re-enable pressed button
            btnAjax.disable(false);
            })
      }),
     "Close":

    }

Answer 3

您应该能够从事件参数到按钮的回调函数获取按钮并禁用它.然后,将该按钮保存在变量中,并在回调到ajax请求时重新启用.

例如,使用HTML:

<div id="dialog">
    <div id="message">
       Some text
    </div>
</div>

您可以执行以下操作:

var n = 0;
$("#dialog").dialog({
    modal: true,
    buttons: {
        "Close": function() {
            $(this).dialog("close");
        },
        'Slow': function(e){
            n++;
            $('#message').html('Fetching...' + n + '...');
            var button_clicked = $(e.currentTarget);
            button_clicked.prop('disabled', true);
            $.ajax({
                url: '/echo/html/',
                type: 'POST',
                dataType: 'html',
                data: {
                    html: 'Updated text',
                    delay: 3
                },
                success: function(data){
                    $('#message').html(data);
                    button_clicked.prop('disabled', false);
                }
            });
        }
    }
});

当ajax请求正在运行时,单击的按钮被禁用,并且当它回答时再次启用(您应该真正添加错误处理程序以及colurse).我添加了计数器来说明它 - 在按钮被禁用时单击它什么也没做.

看到它在这个小提琴中工作.