I decided to try and add Parsley to my rails application. But before I get to deal with that at all, I already stopped all of the javascript and datatables from working just by adding //= require parsleyto my application.js file.
So here it is:
//= require jquery
//= require parsley
//= require jquery_ujs
//= require jquery-ui
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require bootstrap
//= require bootstrap/dropdown
//= require_tree .
All I did was add that one line, and everything broke. So I know the order matters, but moving it around hasn't produced results. So I'm hoping someone can shed some light on this. I feel it's either more finicky than it should be, or I'm missing something very basic.
After I placed it there, I ran rake assets:clean and rake assets:precompile, because I assumed that would work...
Thank you for your time.
All I had to do was restart the server, and place the new line of code under //= require jquery. Should I remove my post, or leave it for future confused newbies like myself?
Related
I'm using Rails and Foundation 5.5.3. Foundation loads all the .js files that I don't really need and I would like to remove them.
I found a few solutions for an older version of Foundation, but can't figure out how it works for my version.
I tried to follow this tutorial, I can't find that index.js file anywhere (he starts explaining around 10:00): http://railscasts.com/episodes/417-foundation?autoplay=true
I deleted //= require foundation inside my application.js file and added what I needed:
//= require foundation/foundation
//= require foundation/foundation.dropdown
//= require foundation/foundation.abide
//= require foundation/foundation.tooltip
//= require foundation/foundation.topbar
I use the bootstrap gem installed (alpha-v6) in a rails 5 app. I have a dropdown in my navbar which implemented exactly as the example in the documentation.
But it is currently only working either in production or in development, depending on what I require in my application.js:
Works in development:
//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
works in production:
//= require jquery
//= require tether
//= require bootstrap
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I know the documentation says you should not require both bootstrap and bootstrap-sprockets. But so far I can not find another way to make it work in production.
What am I missing?
First of all, I highly recommend using the bootstrap-sass gem so you can take advantage of bootstrap's sass variables, classes, mixins, etc. It's also a little easier to integrate with your rails apps in my opinion, and if you want to use it the same way as your previous bootstrap gem then you can do that too. My answer banks on you using the bootstrap-sass gem.
According the bootstrap gem documentation, you should not include both bootstrap and bootstrap sprockets.
According to the docs:
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.
So to properly include bootstrap's JavaScript functionality:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree
Also, this assumes you're using the gem bootstrap-sass
I have it currently working by explicitly calling the dropdown function every time turbolinks reloads the page.
//= require jquery
//= require jquery_ujs
//= require tether
//= require bootstrap
//= require turbolinks
//= require_tree .
$( document ).on('turbolinks:load', function() {
$('.dropdown-toggle').dropdown();
})
But I should not have to do this so I would really like to have a real answer to the problem.
I'm using Rails with react-rails gem. Server side works perfect, but recently I added react-bootstrap to the project.
All good, except the fact that react-server references twice the react script, which causes inconsistencies with the react-bootstrap
Let me show you. Inside my application.js I reference the following:
..
//= require react
//= require react_ujs
//= require react_bootstrap
//= require utils
//= require components
..
Inside components
..
//= require react-server
//= require stuff
..
I render component using react_component, with prerender: true. It works great, but if you use, let's say, Input (from React-bootstrap) then it complains about addToRef error, which is caused by multiple react referencing
If I remove react/react_ujs then I no longer have React on the client. If I remove react-server then I no longer have react on server. But if I remove react-server then React-bootstrap no longer complains about multiple references
Is there are way to use react server side together with React-bootstrap?
react-server and react both have full copies of React! The only difference is that react-server also includes ReactDOMServer.
I think for components.js you could have:
//= require react-server
//= require stuff
Then in application.js
//= require components
//= require react_ujs
I use a similar arrangement because i need ReactDOMServer.renderToString in the browser.
I created a site and some javascript and css files that I only use on one site (they would disturb functions on other sites), but I don't know how to exclude the files from the asset pipeline.
In the asset javascript folder I created a new folder called paint that contains all javascript files I don't want to load on all sites. But only on one specific site.
Also I created a folder in assets stylesheetsy directory for the stylesheet I only need on the specific site.
My application.js looks like this:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require fancybox
//= require_tree .
//= require bootstrap-datepicker
//= require_self
I hope somebody can help me! Thanks
Remove this line
//= require_tree .
And require only the files that you need
I have just upgraded to Rails 3.1, and I am having an issue with loading my Javascripts with the new asset pipeline.
I have copied the js files (both the files themselves and their .min variants) into my /app/assets/javascripts directory, and my application.js manifest is as follows:
//= require jquery
//= require jquery_ujs
//= require jquery-easytabs
//= require jquery-hashchange.min
//= require_tree .
But this does not appear to be working; Easytabs is not being loaded correctly. Strangely, when I look in the console at the application.js file that is compiled, I can see the Easytabs code, but it is not working.
I have found that if i paste the code directly into the application.js file, it works as expected, so I know that the script is working. This is not, however, the intended use of the application.js file.
I would appreciate any guidance on where to go next in order to ensure the correct loading of the js files.
Thanks!
Try moving all your plugins (like easytabs) into the vendor directory.
vendor/assets/javascripts/
Then change your application.js file to this:
//= require jquery
//= require jquery_ujs
//= require_tree ../../../vendor/assets/javascripts
//= require_tree .
You should (if you aks me) only place code that you have written for a specific controller in your app/assets/javascripts directory, everything else, like plugins should go in the vendors dir.
I managed to get to the bottom of this - it seems that the require order is alphabetical, so jquery_easytabs was getting compiled before jquery_ujs. I fixed this by renaming to jquery_zeasytabs - not the cleanest, but it does work.