Question

所以我在这里疯了。我对编码很新，不知道如何解决这个问题。

我正在使用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上，所以也许我在其他地方打破了解释这一点的东西。

谢谢，乔

更新

我实现了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回调用于解决不同的问题。更多信息： How Can I get Adam Shaw's fullCalendar to display responsively in a rails 4 app

再次感谢您的帮助。

Answer 1

简答： TurboLink预加载每个页面，因此不会触发就绪事件。相反，您必须将“page：load”添加到您的javascript中，如下所示：

Coffeescript解决方案：

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

Jquery解决方案：

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

答案很长： Turbolink不关心JQuery ready事件并添加新事件。 Here是turbolink事件的列表。 Turbolink预加载每个页面，并且不会触发就绪事件。如果你有很多javascript，你可以使用this library在你的所有jquery东西上添加“page：load”。

FullCalendar仅在重新加载时出现

1 个答案: