0

我确信这一定是我的一个基本错误——但我完全看不到它。

我有一个 jQuery UI 对话框，我用它来呈现一个表单来编辑记录.. 在 html 的底部（它本身是通过 ajax 加载的）它有一个包含（动画加载 gif）的 div。加载 html 后，加载 div 被隐藏。

CSS 将 div 置于右下角的绝对位置。

当单击对话框上的保存按钮时，我调用一个函数来通过 ajax 保存信息。在 ajax 调用中，我有：

beforeSend: function() {
              $("#ajaxLoading").show();
        },
  complete: function() {
              $("#ajaxLoading").hide();
        }

问题是图像不显示。

如果我在初始对话框加载后删除了 hide()，则整个 gif 都会显示。

我尝试将 show() 放在 ajax 调用之前，而不是在 beforeSend .. 仍然没有。

我尝试将 show() 放在对话框设置中 - 单击“保存”按钮。没有什么。

如果我使用 Chrome 在脚本中设置断点并逐步执行，那么我确实会看到 gif！因此，我尝试在 show() 之后放置几秒钟的超时 .. 但仍然没有。

我不知道该尝试什么。

4

5 回答 5

1

感谢所有的建议和评论......我已经找到了问题的根源 - 它是......它归结为运行 ajax async 和我在错误的时间关闭对话框的组合。

于 2013-05-29T10:29:35.180 回答
1

我希望这有帮助

我遇到了同样的问题，我真的不知道它是怎么发生的，但是可以使用如下代码中的一小段延迟来修复它。

解决方案 1

$.ajax({
  method: "GET",
  url: "/",
  beforeSend:function(){
    $("#ajaxLoading").show(1);
    // please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
  },
  complete:function(data){
    $("#ajaxLoading").hide();
    //here i write success code
  }

});

解决方案 2

   $.ajax({
      method: "GET",
      url: "/",
      beforeSend:function(){

        setTimeout(function(){
           $(".loader-image").show();
        }, 1);
        // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
      },
      complete:function(data){
        $(".loader-image").hide();
        //here i write success code
      }

    });
于 2015-11-15T09:29:15.087 回答
0

我如何使用和工作良好的脚本是......

$("#save_button").click(function () {
    // start showing loading...        
    $("#ajaxLoading").show();

    // make an ajax call
    $.ajax({
        type: 'POST',
        url: url,
        data: $("#form").serialize(),
        success: function() {
            // when success, hide loading.
            $("#ajaxLoading").hide();

            // your additional scripts
            if( a == null ){
                // some script          
            }
            else{
                // some script
            }
        }
    });
于 2013-05-29T09:21:27.193 回答
0

用这个。

jQuery.ajax({
    data: 'your data',
    url: 'your url',                      
    type: "POST",
    dataType: "html",
    async:false,
    onLoading:jQuery("#ajaxLoading").html('<img src="http://example.com/images/spinner.gif" />').show(),
    success: function(data){ 
        jQuery("#ajaxLoading").fadeOut();
    }
});
于 2013-05-29T08:36:41.957 回答
0

像这样将加载器 gif 添加为 html：

beforeSend: function() {
              $("#ajaxLoading").html('<img src="image source" />');
        },
  complete: function() {
              $("#ajaxLoading").html('')
        }
于 2016-04-26T11:22:38.137 回答