jquery - FullCalendar only appears on reload -
so i've been going crazy here. i'm pretty new coding , have no idea how fix this.
i'm making rails 4 app using ruby 2 , arshaw's fullcalendar.
the correct scripts appearing in head. jquery script calls calendar in head. calendar working. issue calendar in different view user navigates link in header. calendar not appear appears upon refreshing page.
i have no idea why happening think has initializing script in head requiring existence of div id='calendar'. not have until later view called, whereupon recall script in head , works.
i'll patch in code can here , full code available on:
https://github.com/joesus/mtgcal
so far i've tried using controller refresh page can't figure out how without sending me infinite loop, refreshes part of view doesn't anyway.
i've tried using js timeout again seems refresh part of view , not full page didn't work.
here's layout: 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 script partial _cal.html.erb instead of .js file same info, didn't fix anything, not sure why thought might. --> </head> <body> <!-- <div id='calendar' style='display: none'></div> thought initialize in layout call again in schedule view. didn't work. --> <%= render 'layouts/header' %> <p id="bodytop"></p> <%= bootstrap_flash %> <%= yield %> <%= render 'layouts/footer' %> </div> </body> </html> here's script initalize calendar: /assets/javascripts/initialize.js
$(document).ready(function() { // page ready, initialize 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' } }); }); this appears in local host in head as:
<script src="/assets/jquery-ui-1.10.3.custom.min.js?body=1"></script> and call calendar existence: /views/layouts/static_pages/schedule.html.erb
<h1>meetings</h1> <div id='calendar'></div> basically need figure out someway refresh information in head when navigate view renders in main layout.
any advice appreciated. again, whole thing on github maybe there's broke somewhere else explains this.
thanks, joe
update:
i implemented erowlin's solution , initalize.js looks this:
$(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' ); } } }); }); it works beautifully , allows me leave schedule.html.erb view looking clean , beautiful.
<h1>meetings</h1> <div id='calendar'></div> the windowresize callback used solve different issue. more information here: how can adam shaw's fullcalendar display responsively in rails 4 app
thanks again help.
short answer : turbolink preloads each page ready event not fired. instead have add "page:load" javascript, :
coffeescript solution:
$(document).on 'ready page:load', -> // coffee script stuff jquery solution :
$(document).on('ready page:load', function(){ // stuff } long answer : turbolink doesn't care jquery ready event , add new event. here list of turbolink's events. turbolink preloads each page , ready event not fired. if have lot of javascript, can use this library add "page:load" on jquery stuff.
Comments
Post a Comment