Rails and FullPage.js not loading correctly

Question

I'm using ZURB foundation and FullPage.js to construct a landing page. It works great if I open up the page or refresh it manually. If I redirect using a link however, my JS seems to get all messed up, until I manually refresh the page again.

In my application.js file I'm initiating the packages like this:

$(document).ready(function() {
 $('#fullpage').fullpage({
  verticalCentered: false,
  css3: true,
  navigation: true,
  slidesNavigation: false,
});
 $(function(){ $(document).foundation(); });
});

And I'm loading my JS in my application layout (Right at the bottom of the file):

= javascript_include_tag "application", 'data-turbolinks-track' => true

The error presented in Firebug after redirecting using a link looks as follows (FYI, No error is displayed if I refresh the page):

fullPage: Error! Fullpage.js needs to be initialized with a selector. For example: $('#myContainer').fullpage();

I understand that this issue has something to do with the way in which I load my JS, but I'm not sure how to fix it. Any help?

Answer 1

I don't know about Rails, but it sounds like the plugin is being initialized with a selector that doesn't exist.

This might be due to the fact that Rails loads the DOM after fullPage.js gets initialized when it should be the other way around.

Try to place fullpage.js initialization in some other place where you can be sure the DOM is ready, including the dynamically generated one.

You can even place it at the very bottom of your site as you are doing it with rails.

Also, check this link.