如何使用引导箱模式对话框显示处理微调器/gif

Question

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

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 通常是个坏主意，除非您有真正很好且合理的理由来设置它。