在引导模式框中加载远程数据之前添加等待消息

Posted 2023-03-06

【中文标题】在引导模式框中加载远程数据之前添加等待消息

【英文标题】：add waiting message before load remote data in bootstrap modal box

【发布时间】：2016-03-11 04:56:20

【问题描述】：

我有这段代码用于将远程 php 数据加载到引导模式框中：

$(function() 
    $(window).bind("resize", function() 
        if ($(this).width() < 400) 
            $('#tabs-content').removeClass('col-xs-10').addClass('col-xs-12')
         else 
            $('#tabs-content').removeClass('col-xs-12').addClass('col-xs-10')
        
    ).resize();
);
$(function()   
    $(document).on('click', '.push', function(e) 
        e.preventDefault();
        var id = $(this).attr('id'); 
        $.ajax(
            type: 'post',
            url: 'details.php', // in here you should put your query 
            data: 
                'bookid': id,
                'lang': 'fa',
                'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
            , 
            success: function(r) 
                // now you can show output in your modal 
                $('#bookdetails').modal(
                        backdrop: 'static',
                        keyboard: false
                    ) // put your modal id 
                $('.something').show().html(r);
            
        ); 
    );
);

这对我有用，但我需要在加载数据之前显示加载 message/image。

如何添加等待消息/图标？！

【参考方案1】：

您只需在Ajax call 之前显示image/message 并将其隐藏在success: function(r) 中

假设您有要在模态加载之前显示的图像，例如 HTML 图像

<img class="progress" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" style="display:none;">

在 JS 中，只显示带有 .show() 函数的图像，在 success: function(r) 中模式加载后隐藏是带有 .hide() 函数

$(document).on('click', '.push', function(e) 
    e.preventDefault();
    var id = $(this).attr('id');
    $(".progress").show(); // <-- Show progress image
    $.ajax(
        type: 'post',
        url: 'details.php', // in here you should put your query 
        data: 
            'bookid': id,
            'lang': 'fa',
            'csrf_token': 'MTQ0OTQxNDQ0MUVvN2JwNXNJRHVxMDZmOXFpQm1ROFNNTk1UZ3lPMGZO'
        , 
        success: function(r) 
            // now you can show output in your modal 
            $('#bookdetails').modal(
                    backdrop: 'static',
                    keyboard: false
                ) // put your modal id 
            $('.something').show().html(r);
            $(".progress").hide(); // <-- Hide progress image
        
    );
);

Minimal example with delay and fade