FullCalendar仅在重新加载时显示



所以我在这里疯了。我对编码还很陌生,不知道如何解决这个问题。

我正在使用ruby 2和arshaw的FullCalendar制作rails 4应用程序。

正确的脚本出现在脑海中。调用日历的JQuery脚本在头部。日历在工作。问题是日历位于不同的视图中,用户可以从标题中的链接导航到该视图。日历不会显示,而是在刷新页面时显示。

我不知道为什么会发生这种情况,但我认为这与头部中的初始化脚本要求存在div id="calendar"有关。直到调用后面的视图,我才想起脑海中的脚本,一切都正常。

我会在这里修补尽可能多的代码,完整的代码可以在上获得

https://github.com/joesus/MtgCal

到目前为止,我已经尝试过使用控制器刷新页面,但如果它不让我进入无限循环,我就不知道如何做到这一点,而且它只刷新视图的那一部分,所以无论如何都没有帮助。

我试过使用js超时,但这似乎只刷新了部分视图,而不是整个页面,所以它不起作用。

这是我的布局:application.html.erb

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "1311 York St" %></title>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>   
<%= stylesheet_link_tag "application", :media => "all" %>
<%= render 'layouts/device_specific' %>
<%= javascript_include_tag "application" %>
<!-- Tried calling the script from partial _cal.html.erb instead of a .js file with the same info,
 didn't fix anything, not sure why I thought it might. -->
</head>
<body>
  <!-- <div id='calendar' style='display: none'></div> 
  Thought I could initialize it in the layout
  then call it again in the schedule view. Didn't work. -->
<%= render 'layouts/header' %>
<p id="bodytop"></p>
      <%= bootstrap_flash %>
      <%= yield %>

<%= render 'layouts/footer' %>
</div>
</body>
</html>

这是我初始化日历的脚本:/assets/javascripts/initialize.js

$(document).ready(function() {
// page is now ready, initialize the calendar...
// 
$('#calendar').fullCalendar({
   events: 'http://www.google.com/calendar/feeds/.../public/basic', 
      weekMode: 'liquid',
      height: 600,
      defaultView: 'agendaWeek',
      allDaySlot: false,
        header: {
                  left: 'title',
                  center: 'agendaDay,agendaWeek,month',
                  right: 'today prev,next'
        }

    });
});

这在本地主机的头中显示为:

<script src="/assets/jquery-ui-1.10.3.custom.min.js?body=1"></script>

这就是我称日历存在的地方:/views/layouts/static_pages/schedule.html.erb

<h1>Meetings</h1>
<div id='calendar'></div>

基本上,当我导航到在主布局中呈现的视图时,我需要想办法刷新头部中的信息。

如有任何建议,我们将不胜感激。再说一遍,整个事情都在github上,所以也许是我在其他地方摔坏的东西解释了这一点。

谢谢,Joe

更新:

我实现了Erowlin的解决方案,现在我的initalize.js看起来像这样:

$(document).on('ready page:load', function(){
$('#calendar').fullCalendar({
   events: 'http://www.google.com/calendar/feeds/..../public/basic', 
      weekMode: 'liquid',
      height: 600,
      defaultView: 'agendaWeek',
      allDaySlot: false,
        header: {
                  left: 'title',
                  center: 'agendaDay,agendaWeek,month',
                  right: 'today prev,next'
        },
    windowResize: function(view) {
      if ($(window).width() < 514){
        $('#calendar').fullCalendar( 'changeView', 'agendaDay' );
      } else {
        $('#calendar').fullCalendar( 'changeView', 'agendaWeek' );
      }
    }
  });
});

它工作得很好,让我可以让schedule.html.erb视图看起来干净漂亮。

<h1>Meetings</h1>
<div id='calendar'></div>

windowResize回调用于解决另一个问题。更多信息请点击此处:如何让Adam Shaw的完整日历在rails 4应用程序中响应显示

再次感谢您的帮助。

简短回答:TurboLink预加载每个页面,因此不会触发就绪事件。相反,您必须添加";页面:加载";甚至是您的javascript,比如:

Coffeescapet解决方案:

$(document).on 'ready page:load', ->
     // Your coffee script stuff

JQuery解决方案:

$(document).on('ready page:load', function(){
     // Your stuff
}

长答案:Turbolink不关心JQuery就绪事件并添加新事件。以下是涡轮链接的事件列表。Turbolink预加载每个页面,并且就绪事件不会触发。如果你有很多javascript,你可以使用这个库添加"页面:加载";你所有JQuery的东西。

相关内容

  • 没有找到相关文章