jQuery widgets disappearing in Rails 4

Question

I have two projects I'm working on. One has a jQuery Datepicker and the other uses the jQuery bxSlider. I have the same problem with both. When I navigate to the url where these widgets are located the widgets don't appear. Only when I hit refresh on my browser do they appear. Then when I navigate to another link and back again the widgets are gone again until I hit refresh another time.

EDIT

I added the following:

$(document).on('ready', function(){
  $('.slider').bxSlider({
    slideWidth: 230,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
  });
});

Answer 1

You're having an issue with a new addition to Rails 4 called Turbolinks. You cannot just bind to the ready event because that is only called on a full page reload(which Turbolinks avoids when possible). You need to bind to page:change event like so:

$(document).on('page:change', function () {
  $('.slider').bxSlider({
    slideWidth: 230,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
  });
});

You can read more about turbo links here.