如何使用Bootbox模态对话框显示处理Spinner / GIF

问题描述

我正在使用引导盒进行模式弹出并能够显示模式弹出。当用户单击Generate Returns按钮时，我正在使用回调函数并尝试显示Spinner。我正在使用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按钮时，我想显示微调器图标。请指导我我做错了什么？任何帮助将不胜感激..

解决方法

假设您使用的是最新版本的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,message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    })
    .init(function() {
        jQuery.ajax({
            async: false,success: function(valid_result) {
                if(valid_result == 1) {
                    returns_type_Table.draw();  
                }
            }
        });
    });
}

请注意，在AJAX选项中使用async: false通常是一个坏主意，除非您有确实合理且合理的理由进行设置。

bootbox jquery