How Do I Make This Js Turbolinks Friendly?

This is my main.js file: jQuery(function($) { $('LI.tree-item-name').has('ul').click(function() { if ($(this).hasClass('opened')) { $(this).find('UL').slideUp();

Solution 1:

Change your main.js to this(I prefer this way as it is very easy to debug the issues in jQuery without getting lost in the web of methods, and it works really well with turbolinks without adding jquery-turbolinks gem for it):

$(document).on("page:change", function(){
  MainJS.init();
});

MainJS = {
  init: function() {
    MainJS.initializePage();
    $('.popupbox').on('click', MainJS.popupBox);
    $('.profile_popupbox').on('click', MainJS.profilePopupbox);
    $('#overlay').on('click', MainJS.overLay);
    $('LI.tree-item-name').has('ul').on('click', MainJS.treeItemName);

    $('LI.tree-item-name li').on('click', function(ev) {
      ev.stopPropagation();
    });
  },

  initializePage: function(){
    $('#video').removeClass('loading');
    $('#video .box').animate({'opacity' : '1'});
    var $container = $('#video');
    $container.masonry({
      columnWidth: 299,
      itemSelector: '.box'
    });
  },

  popupBox: function(){
    $('.popup:visible').fadeOut();
    var id = '#'+$(this).data('popup');
    $('#overlay').fadeIn();
    $(id).css('top', $(window).height()/2 - $(id).height()/2).fadeIn();
    returnfalse;
  },

  profilePopupbox: function(){
    $('.popup:visible').fadeOut();
    var id = '#'+$(this).data('popup');
    $('#overlay').fadeIn();
    // $(id).css('top', $(window).height() - $(id).height()/2).fadeIn();
    $(id).css({'top': "20px", 'left': "-200px"}).fadeIn();             
    returnfalse;
  },

  overLay: function(){
    $('.popup:visible').fadeOut();
    $(this).fadeOut();
  },

  treeItemName: function(){
    if ($(this).hasClass('opened')) {
      $(this).find('UL').slideUp();
      $(this).removeClass('opened');
    } else {
      $(this).find('UL').slideDown();
      $(this).addClass('opened');
    }
    returnfalse;
  }
}

Now, in case you can easily debug the above code to see which part is working/not-working, for example:

$(document).on("page:change", function(){
  MainJS.init();
  console.log('MainJS.init() was called successfully);
});

or:

MainJS = {
  init: function() {
    MainJS.initializePage();
    $('.popupbox').on('click', MainJS.popupBox);
    $('.profile_popupbox').on('click', MainJS.profilePopupbox);
    $('#overlay').on('click', MainJS.overLay);
    console.log('MainJS initialization was successful.');
  },

and so on. You get the idea, right?

Regarding your upload.js.erb issue, I am not sure what's wrong in there as it should work(as same thing works for me), however, you can wrap your code around: $(document).on("page:change", function(){ to see if it works, but I suspect that it is not the issue though.