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.
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 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?
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'm trying to integrate bootstrap into a current rails project and am having a difficult type installing. Specifically, I seem to be having a problem with the javascript. I have added to application.js:
//= require bootstrap
But I get the following error:
These are referenced in bootstrap.js.coffee and I can get rid of the errors by clearing this file out. Here are the contents:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
There is discussion about loading the individual modules but it's not clear to me if I should be doing this or whether I need to be doing this. https://github.com/thomas-mcdonald/bootstrap-sass
I'd really like to be able to add bootstrap to this currently existing project. Any help is appreciated.
thx
You should make sure you have bootstrap.js or bootstrap.min.js from the Twitter Bootstrap Docs and then require it as you did. I think your issue is that you have yet another file named bootstrap.js.coffee. Try changing the name of it and requiring it along with //=require bootstrap.
First of all bootstrap requires jQuery. For Rails you can use the jquery-rails gem which provides the latest version of jQuery.
Then within your application.js you can load the required Javascripts with
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require_self
As neon mentions the load order of the scripts is important. You should load jquery first, then load bootstrap. At this point you can load all other scripts in the current directory with require_tree . (which probably contains your bootstrap.js.coffee).
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.