Develop Reference

Turbolink (JS) reload issue within Rails app

I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?

Do you need Turbolinks for performance?
Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.
But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.
I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.
Hope this helps.

Disable turbo links for a specific javascript

I have a rails application which makes use of turbolinks. I am happy with everything that turbolinks do except that I have a specific javascript file in assets folder which I want turbolinks to ignore.
I have tried adding data-turbolinks="false" and it works but I am looking for a way to avoid putting this on every link that requires this.
Removing turbolinks works as well but the rendering of all the pages slowed down quite a bit.
I have tried the solution on here as well Re-rendering specific js file with turbolinks enabled
but its not working well and the javascript is really long.
Any advice would be appreciated thanks!

Facebook Like Box not showing until refresh in Rails 4

I followed the instructions that were given in the Facebook Developers page in order to include a like box in my Rails 4 application. It always worked for me great in previous apps, but for some reason, in the current app I need to refresh the page after redirecting to it in order to make the like box show up.
Anyone manage to encounter this problem and found a solution?

Do you use turbolinks gem in this project? It is known to cause problems like that. Have a look at offcial solution http://reed.github.io/turbolinks-compatibility/facebook.html or see what worked for other people here Facebook SDK and rails 4 Turbolinks
If you're not using turbolinks, please add some info about what js libraries are you using, most likely one of them is to blame.

any solution like T4MVC for external JS files?

I m using T4MVC in MVC project. My question is is there such a solution for external JS files ? Many times there need to use URLs or strings (to compare) in external JS files. A change in sting break application. Or please advice T4MVC can be used for same.
Highly appreciate your time, help and sharing.

Try T4MVCJS
We got it to work on a proof of concept project, However we managed to delete that project and cannot get it to work with any of our existing projects. Maybe you'll have more luck than us.

Most efficient way to get a Three.js project to work in a ruby on rails app?

I'm trying -unsuccessfully- to get a Three.js project to work within the Ruby on Rails framework
I keep thinking that there must be an easier way to do this than the way I'm doing it at the moment
First I googled for a guide/tutorial on how to port working Three.js code to rails and found very little on the subject. Which I figure means: either people don't do it very often -or- that it's so obvious that no one has bothered to document it.
Next
I googled for a three.js gem and found one here - http://rubygems.org/gems/threejs-rails
(which I gave up trying to get to work - after much messing around with the manifest file)
Next
I installed the source of Three.js into the vendors folder and messed around with the manifest file again. This time I had more success - although there seems to be dependency issues within Three.js that require_tree (and myself) are oblivious to.
So theoretically, I could probably get it to work after a several hours of figuring out the Three.js loading sequence, but this doesn't feel right.
I feel like I've gone down a blind alley here and I'm missing something obvious.
is there a better way to do this?

Rails is, primarily, a back end server side framework. Three.js is a front end library for rendering WebGL in a browser. They have little to do with each other. I think you're trying too hard.
The process is the same as adding something like jQuery, or any other javascript library.
Drop the three.js file in app/assets/javascripts/three.js
Add #= require three to your application.js.coffee
Ensure that javascript_include_tag('application') is part of your application layout template
Now launch the server, load a page, and type THREE in the javascript console. If you get a return value, your good! Now write some custom javascript, save it in app/assets/javascripts and include it on the pages you want to do awesome 3D stuff.

You can also use the following gem threejs-rails that I created for my rails app today. It works right out of the box if you're on rails 4+. Fork and submit a PR if you need further support on it!
Most efficient would obviously be via CDN, I plan to add that support soon.

I found it the probably easiest way - though not the proper Rails way - to include all dependencies as written here https://guides.rubyonrails.org/working_with_javascript_in_rails.html
and then to simply create a partial with the JS code inside of a script type="module" tag. Though Alex Wayne's way is probably better, this one works, too.