Question

我的Busy图标出现浏览器问题。代码如下所示：

$("#busysymbol").show();
$("#busysymbol").position({my:"right top",at:"right top",of:$("#datepicker"),offset:"-3 3"});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        async: false
        }).responseText;
$("#busysymbol").hide();
var daysInMonth = resp.split(",");
...etc...

此代码在Firefox中运行良好，但在Chrome和Safari中，繁忙的符号未显示。我相信Chrome和Safari正在缓存DOM的变化和$（“busysymbol”）。show（）调用不会立即刷新。

我是否可以强制Chrome / Safari更新显示屏。

Answer 1

也许可以尝试使用ajaxStart和ajaxStop个全局事件作为忙碌符号。例如：

$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});

在代码的开头，并从您的特定.ajax（）处理程序中删除隐藏和显示。

哦，我刚刚注意到你正在使用同步请求，所以它甚至不是AJAX - 更像是SJAX。在等待请求完成或超时时，您是否有充分理由完全阻止浏览器的用户界面？如果没有，那么尝试使用这样的东西：

$("#busysymbol").hide();
$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        success: function (resp) {
            var daysInMonth = resp.split(",");
            ...etc...
        }
});

（未经测试）

尝试在没有重新定位#busysymbol的情况下工作，然后尝试在一开始就添加正确的定位。请注意，.position()不接受参数，因此代码中最长的行实际上没有做任何事情 - 请参阅the docs。您需要的是.offset()或.css()。

Answer 2

我认为Chrome和Safari正在同步执行您的Ajax请求，尽管有aynch标记。为了解决这个问题，您可以在ajax函数的回调中隐藏图标，如下所示：

$.ajax({
  url: 'book_ajax.php?req=daysformonth&month=1',
  success: function(data) {

    $("#busysymbol").hide();

  }
});

如何在ajax查询之前和之后强制DOM更新/刷新？

2 个答案: