Select2 JS lib not working on Rails app

问题

I was given this Rails app that utilizes the select2 JS library and can't figure out why it's not styling my select list. It's working in production.

I created a staging server from a snapshot of the production server.

I've run rake assets:clobber && rake assets:precompile where that is successful. I've checked the compiled application.js and application.css files and the JS code and style is in them.

I can run $(".classIwant").select2(); in the console and it styles the select list but it doesn't do anything when I select an option.

I'm also getting this error after running $(".classIwant").select2(); in the console:

[Violation] Forced reflow while executing JavaScript took 49ms

Please forgive my ignorance as this is the first time i've worked with this JS lib. Any help would be much appreciated. Thanks in advance.

UPDATE #1: When I copy the below code into the console and manually run App.init(); it works. Why isn't the page loading this.

(function() {
  window.App || (window.App = {});

  App.init = function() {
    $(".classIwant").select2();
    $('#search').on("keyup", function() {
      return searchTable($(this).val());
    });
    $('#search-list').on("keyup", function() {
      return searchList($(this).val());
    });
    $("#the_id").on('change', function(e) {
      return $(this).parent().submit();
    });
    return $('#preloader').delay(200).fadeOut();
  };

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

  $(window).on("load", function() {
    $('#status').fadeOut();
    return $('#preloader').delay(200).fadeOut();
  });

}).call(this);

UPDATE #2: This is the code on production. It is a little different. I'm not sure what is causing the compiler to minify production code and also compile it differently. I used pretty print in the console to see it a little better. Any ideas?

function() {
    window.App || (window.App = {}),
    App.init = function() {
        return $(".classIwant").select2(),
        $("#search").on("keyup", function() {
            return searchTable($(this).val())
        }),
        $("#search-list").on("keyup", function() {
            return searchList($(this).val())
        }),
        $("#the_id").on("change", function() {
            return $(this).parent().submit()
        }),
        $("#preloader").delay(200).fadeOut()
    }
    ,
    $(document).on("page:change", function() {
        return App.init()
    }),
    $(window).on("load", function() {
        return $("#status").fadeOut(),
        $("#preloader").delay(200).fadeOut()
    })
}
.call(this),

回答1:

I found the issue being a different ruby, bundler, and gem versions. I'm not sure which gem was causing the issue but I fixed the issue with the following steps. You're environment may be a little different but this should get you on the right path:

1. Copied from the production server, line for line, the Gemfile and Gemfile.lock to my local machine
2. On my local machine I installed the same version of ruby (2.2.1) as production using rvm.
3. Installed bundler 1.14.0 using gem install bundler -v 1.14.0 (1.14.0 is what the production server has on it.)
4. Ran bundle _1.14.0_ install, it failed because local mysql was to new
5. Since my local version of mysql was to new I had to downgrade that using homebrew. See Multiple MySQL Versions with Homebrew
6. Ran bundle _1.14.0_ install again, success.
7. Since the Gemfiles have now changed I committed those changes
8. I git pulled those changes to my server
9. Staging server ruby version wasn't matching production 2.2.1
10. Had to install rvm on staging server, luckily i'm using ubuntu so I simply used these instructions RVM package for Ubuntu. Make sure to follow Terminal ouput.
11. Installed ruby via rvm install 2.2.1
12. Ran bundle install on server, success. All gems matching production.
13. Ran rake assets:clobber && rake assets:precompile on staging server.
14. Restarted web server.

来源：https://stackoverflow.com/questions/52008913/select2-js-lib-not-working-on-rails-app