如何使用引导框模式对话框显示处理 spinner/gif

Question

我正在使用模式弹出窗口的启动框并且能够显示模式弹出窗口。当用户单击 Generate Returns 按钮时，我正在使用回调函数并尝试显示微调器。我正在使用 ajax 来保存来自模态弹出窗口的数据。在这里，我无法向用户显示微调器图标，某些事情正在处理中。这是我的代码

bootbox.dialog({
    message: data,
    size:"large",
    title: "<font color=red>Product Returns Log</font>",
    buttons: {
        success: {
            label: "Generate Returns",
            className: "btn-success",
             callback: function() {                         
             var input_data = jQuery("#returns_dialog_form").serialize();
              var textarea_val = jQuery("#retunrs_log").val();
                if(textarea_val == '') {
                    bootbox.alert("<font color=red>Please enter the log details</font>");
                    jQuery("#retunrs_log").focus();
                    return false;
                }
                else {
                      savelog_generate_returns(ids_string,textarea_val);
                    }
              } 
        },
        cancelbutton: {
            label: "Cancel",
            className: "btn-warning"
            
        }

    }
});

在这个函数 savelog_generate_returns() 中，我试图显示微调器。但是在处理完成之后就显示出来了

function savelog_generate_returns(order_ids,log_detail) {
bootbox.dialog({
title: 'A custom dialog with init',
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});
    jQuery.ajax({
    async: false,
    type: 'POST',
    data: {order_ids:order_ids,log_detail:log_detail},
    url: "<?php echo BASE_URL;?>generate_returns/test",
    success: function(valid_result)
        {
            if(valid_result == 1)
            {
                returns_type_Table.draw();  
            }
        }
   });
}

但是这部分是在函数执行后显示的

`bootbox.dialog({
    title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    });`

我想在用户单击 Generate Returns 按钮时显示微调器图标。请指导我哪里做错了？任何帮助将不胜感激..

Answer 1

假设您使用的是最新版本的 Bootbox，您需要利用 onShow 或 onShown 选项。像这样：

function savelog_generate_returns(order_ids,log_detail) {
    bootbox.dialog({
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
        onShown: function() {
            jQuery.ajax({
                async: false,
                type: 'POST',
                data: { order_ids : order_ids, log_detail : log_detail },
                url: "<?php echo BASE_URL;?>generate_returns/test",
                success: function(valid_result) {
                    if(valid_result == 1) {
                        returns_type_Table.draw();  
                    }
                }
            });
        }
    });
}

这将延迟 AJAX 调用，直到对话框完成 show.bs.modal 或 shown.bs.modal 事件（取决于您使用的处理程序）。否则，您基本上是在争先恐后地查看对话框是否在 AJAX 调用完成之前显示。

如果您使用的是旧版本的 Bootbox，您可以通过使用 bootbox.init() 函数来完成或多或少相同的事情：

function savelog_generate_returns(order_ids,log_detail) {
    bootbox.dialog({
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    })
    .init(function() {
        jQuery.ajax({
            async: false,
            type: 'POST',
            data: { order_ids : order_ids, log_detail : log_detail },
            url: "<?php echo BASE_URL;?>generate_returns/test",
            success: function(valid_result) {
                if(valid_result == 1) {
                    returns_type_Table.draw();  
                }
            }
        });
    });
}

附带说明一下，在您的 AJAX 选项中使用 async: false 通常不是一个好主意，除非您有确实充分且站得住脚的理由设置那个。

如何使用引导框模式对话框显示处理 spinner/gif

How to display processing spinner/gif with bootbox modal dialog

jquery

bootbox