Within my Rails project, my old jQuery code for sorting a list of <li> elements has broken. The logged error is:
TypeError: $.ui.isOverAxis is not a function
I think the culprit is that an unwanted, older version of jquery-ui.js (v1.9.2) is making it into my headers, and I don't know how to remove it.
The unwanted jQuery file is originating from the jquery-rails gem. I don't understand why, since I've removed the //= require jquery-ui line from my application.js file.
Here is my current application.js file:
//= require moment.min.js
//= require nicEdit.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
My Gemfile is updated to the most recent versions of the jquery-rails gem (2.2.1) and the jquery-ui-rails gem (4.0.3).
Yet an older version of jquery (1.9.2) appears in my header files in development mode:
<script type="text/javascript" src="/assets/jquery-ui.js?body=1"></script>
Through debugging in development mode, I can tell that the jquery-ui.js file comes from the jquery-rails gem.
Any suggestions on how to fix this?
UPDATE
I have updated the question to reflect my discovery that the jquery-ui.js file is, in fact, coming from the jquery-rails gem.
It appears that ActiveAdmin is calling //= require jquery-ui, which is in turn pulling in the jquery-ui.js file from jquery-rails.
That file is clobbering the version of jQueryUI from jquery-ui-rails.
The long-term solution might be for jquery-rails to remove the jquery-ui.js file, or at least rename it.
In the short-term, I solved my problem by removing //= require jquery.ui.all and relying entirely on jquery-rails, skipping jquery-ui-rails altogether.
Related
We have a Rails 5 application and recently updated Sprockets from the 3.x series to 4.0.2. Now Rails can't find an asset (CSS file) belonging to a vendored gem. Note that the gem is an engine and the asset is called from a template inside the engine.
The asset is referenced inside a file at vendor/gems/our_vendored_gem/app/views/layouts/ like this:
<%= stylesheet_link_tag "our_vendored_gem/application", :media => "all" %>
The file is at vendor/gems/our_vendored_gem/app/assets/stylesheets/our_vendored_gem/application.css
Then we get the error Sprockets::Rails::Helper::AssetNotPrecompiled in OurVendoredGem::Mocks#index.
Our app/assets/config/manifest.js looks like this:
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
I tried adding
//= link_tree ../../../vendor/gems/our_vendored_gem/app/assets/stylesheets/ .css
...but that did not help. The vendored gem has a manifest file of its own but it is unclear to me if Sprockets is already reading it, or if it needs to be called somewhere.
What needs to happen to make this file available to Rails again?
After some digging, I found this issue comment which explains that a Rails engine should have its own manifest file; that file can then be included in the application manifest like this:
//= link my_engine
This will find a manifest file at my_engine/app/assets/config/my_engine.js and add those directives to those in the application manifest.
We are working on a rails 3.2.12 apps which has multiple rails engines. There are nav bar and user menu in main app. The functioning module is in rails engine. One of the engine is called customerx which enable user to manage customer info, such as creating customer, changing customer info and such.
Last week we added bootstrap in our rails_main app to take advantage of the nice format of bootstrap. The problem we find is that the jquery datepicker and html inserting features stop working in rails engines.
Here is the main app's application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap
There is require bootstrap in application.js.
We did not put require bootstrap in rails engine's application.js. Here is engine's application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).parent().before(content.replace(regexp, new_id));
}
When clicking add_more_contact link on the new customer form, there is an error in firebug:
ReferenceError: add_fields is not defined
Also datepicker in all engines is not working any more after adding bootstrap in main app.
We did some search online. bootstrap requires jquery to work. However there may be conflict between jquery-ui and bootstrap. We follow the advice by putting the require bootstrp at the bottom of main app's application.js. Also we tried to use $.noConflict() in main app's application.js. However those are not enough to make bootstrap and jquery working together. What else we need to do to make jquery(ui) in rails engine working with bootstrap? Thanks for the help.
Fix add_fields
Firstly let's fix add_fields. This function called jQuery($(link)) but defined in global namespace. That's why it won't work.
To write a function utilizing jQuery functions in global namespace, you need to write it as a jQuery plugin
(function($) {
$.fn.add_fields = function(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).parent().before(content.replace(regexp, new_id));
};
}(jQuery));
Then you can use add_fields() within jQuery.
Bootstrap and jQuery UI
There is some conflict between these two libs. You can't use them together without any change.
Here are two solutions as I know, according to you situation:
Give up jQuery UI at all and use Bootstrap's datapicker. It is nice as well.
Use a tweaked lib containing them two, such as jQuery UI Bootstrap, or a matching Rails gem for this lib.
I would prefer solution #1 if you want to stick with Bootstrap and there is not too much datepicker to revise.
What we found out was that the assets for rails engines were not loaded at all. That's why all js features did not work for engins. Here is the main app's application.js now:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require my_engine_name/application.js
//= require bootstrap
Here is the post which provides the solution about how to load the assets for rails engine:
Engine's assets with Rails 3.1
Why adding bootstrap caused the disappearing of the engine assets, we don't know yet. Hopefully someone can shed the light on the cause of the problem.
I am relatively new to rails, I found this gem bootstrap-sass which seems to be very nice in the layout. But I want to make the Carousel js plugin work. I found it was documented in the website but I don't quite understand where I need to put
// Loads all Bootstrap javascripts
//= require bootstrap
Thanks,
If you're using rails >= 3.1, add that line to your application.js file (or whatever file you're including in your layout), normally located in app/assets/javascripts
This is my typical base app/assets/javascripts/application.js in any new app.
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require bootstrap
I upgraded to rails 3.1.3 a few weeks ago, and moved a bunch of stuff around to use backbone.
Mostly, things are going well, but I just realized that the rails-ujs.js file and remotipart.js files are not in the assets directory.
I've looked for them in the old public/javascripts folder, as well as everywhere else, but no luck finding them.
I also can't seem to find the files in the git repos. Is there somewhere to download these files in Javascript? or do they need to be generated by rails? Is there a way to regenerate them?
---------------this could be my error ----------------------------
I just realized that with the assets packed, you can't just open a file from view source, they all show as non-existent.
I think theses files lived in the rails ujs plugins in asset directory. so you need to add it to your Gemfile and the asset pipeline should see them automaticaly.
all files here https://github.com/rails/jquery-ujs/tree/master/src are available to include in your js file with
//= require jquery
//= require jquery_ujs
see plugin readme for more informations
You need to include this in your Gemfile:
gem 'jquery-rails'
That is the official plugin for this code.
Run bundle install.
Then you add the lines:
//= require jquery
//= require jquery_ujs
to you application.js file.
This seems quite trivial but couldnt find it in the forums or rails asset pipeline guides.
In short
How can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
In long:
I am trying to use 'jquery-rails' gems with the Google jquery CDN's.
Hence in the I am just including the jquery_ujs and adding the jquery related scripts in the application layout:
application.js.erb:
//= require bootstrap-twipsy.js
//= require jquery-glowing
//= require jquery_ujs
application.html.erb:
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jqueryui.min.js"
For the css', I am not including the jquery-ui css in the application.css and adding it in the layouts file too.
application.css.scss.erb:
*= require_directory .
*= require active_scaffold
*= require_self
In production environment, the compiled css file includes the jquery-css code too, since its in the assets pipeline of the 'jquery-rails' gem.
So how can I inform sprockets to skip the asset pipeline for the jquery ui css of the 'jquery-rails' gem.
If this is not possible in rails, what is the best way to handle this sittuation.
I thought about removing the jquery-rails gem, and adding the jquery_ujs javascript manually to the system, but then I have to deal with the installation of new releases rather than executing a simple 'bundle update'
Thanks in advance,
The problem is in the active_scaffold gem, right here if you want the code reference. It includes the jquery-ui CSS.
To remove this you'll need to replicate the entire active scaffold css code in your app/assets/stylsheets folder (as my_active_scaffold), removing the link to jquery-ui. I am assuming that the ActiveScaffold erb at the end of the file will still run in this context.
Then just include it:
*= require my_active_scaffold