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),
