fullCalendar,IE 11,refetchEvents仅在调试器/开发人员窗口[F12]打开时触发

时间:2017-05-03 15:01:00

标签: c# jquery fullcalendar internet-explorer-11 fullcalendar-3

问题:

在成功完成AJAX调用后,

fullCalendar不会使用.fullCalendar('refetchEvents')更新事件。

  • MSIE 11.0.41(11.0.9600.18638) - 问题发生
  • FireFox 53.0(32位) - 不会出现问题
  • Chrome 58.0.3029.81(64位) - 问题未发生
  • VS2015,localhost上的C#MVC,IIS Express
  • fullcalendar.js v3.3.0
  • 的jquery-3.1.1.js
  • 的jquery-UI-1.12.1.js

症状描述:

使用以下$.ajax调用

将新事件插入fullCalendar
$.ajax({
        type: 'POST',
        url: '@Url.Action("SaveEvent","Calendar")',
        data: dataRow,
        success: function (response) {
                 if (response == 'True') {
                    $('#_Calendar').fullCalendar('refetchEvents');
                    alert('New event saved!');
                }
                else {
                    alert('Error, could not save event!');
                }
            }
        });

当回调到来时,如果调试器/开发人员窗口打开,则fullCalendar的'refetchEvents'方法将仅在MSIE 11中触发。如果设置了实际断点并且只打开调试器/开发人员窗口使常规工作,这无关紧要吗?

即使触发'refetchEvents'$.ajax调用完全分开,也会产生相同的行为。 I.E.如果我触发如下函数:

<button type="button" class="btn" onclick="fetchEvents(); return false;">trigger</button>

功能:

function fetchEvents() {
    $('#_Calendar').fullCalendar('refetchEvents');
}

效果完全相同,&lt; refetchEvents&#39;只有在调试器/开发人员窗口打开时才会触发MSIE 11 -

我认为这可能是一个计时问题,因此我的手动触发选项,但即使在插入事件后'refetchEvents'调用方式,行为也是一样的。甚至页面刷新也不会触发'refetchEvents'当调试器/开发人员窗口打开时,事件的刷新仅在MSIE 11中触发。

如上所述,任何平台(我测试过的)上的其他浏览器都没有相同的结果吗? (FireFox / Chrome / Safari / Android [Chrome&amp; FireFox]完美无瑕......)

有没有人遇到这种行为和/或可能有解决方案?

感谢您的投入!

1 个答案:

答案 0 :(得分:1)

事实证明,这确实是一个缓存问题,根据Alex K的回答,IE在缓存日历事件方面过于热情,并且不会更新事件。

<强>解决方案

在早期阶段,我偶然发现this question并得到了很棒的回答。 稍后我还注意到this question有一个同样好的答案。 (确保对它们进行投票!)

我已将两者合并为一个属性,如下所示。

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class NoCacheAttribute : ActionFilterAttribute
    {
    public override void OnResultExecuting(ResultExecutingContext filterContext)
        {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();

        //Added later from: https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers
        filterContext.HttpContext.Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
        filterContext.HttpContext.Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.0.
        filterContext.HttpContext.Response.AppendHeader("Expires", "0"); // Proxies.

        base.OnResultExecuting(filterContext);
        }
    }

因此,通过使用GetDiaryEvents属性修饰我的[NoCache]方法,JSON响应会使用正确的标头进行适当标记,告知浏览器不要缓存返回的值。

像这样:

    //GET: All Diary events
    [NoCache]
    public JsonResult GetDiaryEvents(string start, string end)
        {

        // code code code...

        var rows = eventList.ToArray();
        return Json(rows, JsonRequestBehavior.AllowGet);

        }

因此,JSON消息将作为以下内容发送到浏览器:

HTTP/1.1 200 OK
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/10.0
X-AspNetMvc-Version: 5.2
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?SDpcTWFydGlqbiBUaG9sZW5cTXkgRG9jdW1lbnRzXFZpc3VhbCBTdHVkaW8gMjAxNVxQcm9qZWN0c1xGaW5pc2hMaW5lXzQuMlxGaW5pc2hMaW5lXzQuMlxDYWxlbmRhclxHZXREaWFyeUV2ZW50cw==?=
X-Powered-By: ASP.NET
Date: Thu, 04 May 2017 09:36:35 GMT
Content-Length: 9265

问题解决了......