Question

我的页面上有一个下拉列表和网格。更改下拉值后，网格会刷新。绑定到网格的数据是从数据库中获取的。当我更改下拉列值时，我应该能够看到一个加载我的屏幕上的图像。数据加载后，加载图像应该消失。我将如何实现这一目标？任何建议都会有所帮助..

以下是我用于提交点击的代码。如何修改它以处理下拉列表更改事件。

    <script type="text/javascript">
    function ShowProgress() {

            setTimeout(function () {

                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }

$('form').live("submit", function () {
    ShowProgress();
});

Answer 1

当然，您可以在发出请求之前显示它，并在完成后隐藏它：

Html：

<div id='loading-image'>
  <img src='loadinggraphic.gif'/>
</div>

脚本：

$('#loading-image').show();
$.ajax({
      url: 'data.php',
      cache: false,
      success: function(data){
        $('.info').html(data);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

在data.php中，您可以将逻辑用于从database获取数据。

我通常更喜欢将它绑定到全局ajaxStart和ajaxStop事件的更通用的解决方案，这样就会显示所有ajax事件：

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

如何在下拉列表更改事件（SelectedIndexChange）

1 个答案: