Javascript does not work from a bootstrap template in rails

Question

I have created a new rails app and installed all the necessary gems. Added all the files. Updated the application.js file. Everything works but for some reason all the javas

Answer 1

I have finally managed to make it work! First of all I started from new and I created a new rails app because I was in desperate mode and installed to many Gems and changed the code that at the end the code was a mess.

This time I took a different approach and I did not use any additional gems and I have installed all the necessary plugins manually meaning just copy and paste all the files in the correct directories and linking them together. I had to delete the coffeescript file inside the javascript directory becuase the file caused some issues. As you can see I also had to put a trigger manually inside the body tag otherwise the ScrollSpy function would not work (data-spy="scroll" data-target=".navbar-fixed-top"). For some reason Javascript still did not work but I have read that Javascript/jQuery can cause some issues if its not loaded properly meaning in the correct oder. So I deleted //= require_tree . in the javascript file. And put each javascript in the correct order. I could figure out the correct oder by looking at the source code of the working template. But it still did not work! I then put the "<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>" at the very end of the tag so the javascript would load last. ... And finally it worked! My next step would be to delete the turbolinks line in the application.js file and I would change:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %> 

into

<%= stylesheet_link_tag    'application', media: 'all' %>

Because I have read that turbolinks can cause some issues with the asset pipeline with javascript especially.

application.html.erb

  

    
    
    
    
    

    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>

  

    
    
    

  

  <%= render 'layouts/header' %>
  <%= yield %>
  <%= render 'layouts/footer' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.easing
//= require scrollreveal
//= require jquery.magnific-popup
//= require welcomes

welcomes.js

(function($) {
    "use strict"; // Start of use strict
    // debugger
    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 51
    });

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a').click(function() {
        $('.navbar-toggle:visible').click();
    });

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    })

    // Initialize and Configure Scroll Reveal Animation
    window.sr = ScrollReveal();
    sr.reveal('.sr-icons', {
        duration: 600,
        scale: 0.3,
        distance: '0px'
    }, 200);
    sr.reveal('.sr-button', {
        duration: 1000,
        delay: 200
    });
    sr.reveal('.sr-contact', {
        duration: 600,
        scale: 0.3,
        distance: '0px'
    }, 300);

    // Initialize and Configure Magnific Popup Lightbox Plugin
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
            tError: 'The image #%curr% could not be loaded.'
        }
    });

})(jQuery); // End of use strict

application.css.scss

/*
*= require magnific-popup
*= require welcomes
*/

@import "bootstrap";
@import "font-awesome";

html,
body {
  height: 100%;
  width: 100%;
}

...
...
...

If someone has similar issues with Javascript and the Asset Pipeline this is how I would try to solve it:

1) Make sure that all the files are in the correct directory

2) Check if all the files are correctly linked together inside the application.css.scss, application.js and application.html.erb

3) Delete the "//= require_tree ." line in application.js because it loads the javascript with no specific order and it could create some issues. Type every line manually in the correct order of the theme. You can check the correct oder by looking at the source code of the template in the browser.

4) Check if the correct version number of the plugins are installed by comparing the source code when you run your localserver and check the website with the template website.

5) If you don't need the coffeescript file in the javascript directory then delete it.

6) Move the "javascript_include_tag" from inside the head tag right above the closing body tag. So the javascript can get loaded last.

7) Get rid of turbolinks in application.js and application.html.erb.

8) If it still does not work check the Developer Tools(Console) in Chrome of the website and you can use also a debugger in the javascript file to see if there are any errors.

Hopefully it helps someone.