时间戳

首页 > 解决方案 > 如何使用引导箱模式对话框显示处理微调器/gif

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

问题描述

我正在使用启动框进行模式弹出并能够显示模式弹出。当用户单击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指导我哪里做错了？任何帮助将不胜感激..

标签： jquerybootbox

解决方案

假设您使用的是最新版本的 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.modalorshown.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();  
                }
            }
        });
    });
}

作为旁注，async: false在您的 AJAX 选项中使用通常是一个坏主意，除非您有一个非常好的和合理的理由来设置它。

推荐阅读