My application is using both prototype and jquery and all files are being getting load by application.js file but i need to add jquery.noconflict(), how can i handle that and where to add this noconflict line.
By thinking some time got its solution. Beside of using noconflict of jquery i was also require to load files with particular order so they dont get conflict.
For this i overwrite application.js file and list down all required js files in required order and one of the js was having jquery.noconflict line to make jquery and protype both compatible.
like
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require noconflict
//= require prototype
//= require compose
//= require s3_upload
and remove the last line require_tree so assets compiler does not add files by its own.
Thanks every one who look in to this question.
Related
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 close but seem to be missing something. I have dropped OpenLayers.js in app/assets/javascripts, the theme folder in app/assets/stylesheets and the img folder in app/assets.
I have *= require theme/default/style.css in my application.css file and //= require OpenLayers in my application.js file.
I am trying to load an OpenLayers map in my locations.js.coffee file but the img folder fails. OpenLayers tries to load the image files from /locations/img/... vs. /img/... which doesn't seem to work either.
I am still fuzzy on the asset pipeline in Rails and I am sure I am doing this wrong. I can't seem to find a concrete example of the best way to install OpenLayers in a Rails app. Any ideas or suggestions?
Drop the complete openlayers directory in vendor/assets/javascripts (to save some space I made a symbolic link):
vendor/assests/javascripts/openlayers
Add //= openlayers/OpenLayers to the app/assets/javascripts/application.js:
//= require openlayers/OpenLayers
//= require jquery
//= require jquery_ujs
//= require_tree .
First of all put your images in assets/images folder. That will make them accessible via http://localhost/assets/yourimage.png
Default behaviour in OpenLayers is to fetch images from img folder that should be located on the same level as OpenLayers.js in tree structure, which is not the case in Rails application.
To override this behaviour and make OpenLayers read images from Rails images catalog you should set the global variable OpenLayers.ImgPath = "/assets"
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
Is there a way to include only javascript src I want to a specific page instead of the layout page (application.html.erb)
In your rails project you have
app/assets/javascripts/application.js
which probably contains this line
//= require_tree .
The require_tree word means to include all your JavaScript files to project.
So just remove it and put files that you need:
//= require your_js_file
In Rails 3.1, you must whitelist files that you want included in asset precompilation. You must open up config/environments/production.rb and explicitly include assets you want precompiled:
config.assets.precompile += ['somestylesheet.css']
If you don't do this this and you run rake assets:precompile, your asset will not be copied to public/assets, and your app with raise an exception(therefore causing a 500 error in production) when an asset is not found.
Why is this necessary? Why aren't all assets automatically precompiled?
This current approach creates extra code and stress when deploying. Wouldn't it be easier to blacklist/exclude assets so things worked right out of the box? Anyone else share these feelings?
Most assets are automatically included in asset precompilation. According to the RoR Guide on the Asset Pipeline:
The default matcher for compiling files includes application.js, application.css and all files that do not end in js or css: [ /\w+\.(?!js|css).+/, /application.(css|js)$/ ]
You would use config.assets.precompile if you have additional assets to include:
config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
Or you could overwrite it.
I think it has to do with the pipeline/sprockets ability to require separate files.
For example, I have an admin.js file in my app/assets/javascripts folder. But all it does is require several other .js files.
//= require jquery
//= require jquery_ujs
//= require jquery.colorpicker.js
//= require jquery.wysiwyg.js
//= require wysiwyg.image.js
//= require jquery.fileupload.js
//= require jquery.fileupload-ui.js
//= require codemirror.js
//= require css.js
//= require admin_load
This is because (a) I'm using external js plugins and (b) I like to keep things like jQuery onload handlers in separate files.
If every .js file was precompiled, then it would precompile each one of these individual files–which is totally unnecessary. All I want/need is the single admin.js file precompiled.
Same goes for CSS files.
The assets precompile to me is cool so you dont end up deploying assets that you do not want. Dont also forget about the uglifer gem that helps compress your javascripts. Imaging all this are not existing and you just deploy your app and you find out that you have unused css files and uncompressed javascripts. how would you feel. this is just my own opinion and i say the asset pipeline is the coolest thing in rails.. Being able to manage all your assets properly.
And mind you if i am rails i would not want to compile assets that you would not want so you would say in your mind why did this guy compile these assets.. :)