Fix CoffeeScript Unexpected Indent Error in SublimeText

Getting this

error: unexpected INDENT

in my rails app related to the coffeescript was very frustrating, and difficult to debug because all the indentation in my code appeared to be correct.  It actually had to do with our my text editor, Sublime Text, was handling tabs and spaces.

To fix this, go to View -> Indentation and check Indent Using Spaces and Convert Indentation to Spaces.

Credit here.


Play Audio File on Button Click in Rails

So you want to play an audio clip on a button click.  In your view file

<%= audio_tag "audio.m4a", class: "audio-play" %>
<p class="btn btn-primary audioButton">Play</p>

This uses the rails audio tag, and then places a button next to it. In the javascript, you play the audio file on the button click:

$(".audioButton").on("click", function() {
  $(".audio-play")[0].currentTime = 0;
  return $(".audio-play")[0].play();

Or in coffeescript:

$(".audioButton").on "click", ->
  $(".audio-play")[0].currentTime = 0

Some credit to this Stack Overflow question.

Video End Event in Rails

How do you call an event or action after a video has finished playing? For example, I wanted a “Continue” button to appear after the video has finished.  Searching around this was a bit hard to find, so hopefully this post will help some people.

There is an “onended" function that you can call on the video object. This is how I do it.

Here’s the jQuery

$("#myVideo").bind("ended", function() {
   //whatever you want to do when the video ends

In Rails, here’s the coffeescript I use

$("#myVideo").bind "ended", ->
    # whatever you want to do when the video ends

Make sure the video tag in the html has the id that you’re referencing in the javascript/coffeescript.

<%= video_tag('FMCintro.mp4', size: "724x500", controls: true, id: "myVideo") %>

credit to this StackOverflow question. This one might be helpful too.

How to remove Turbolinks from Rails 4

Turbolinks is included by default in Rails 4.  It does do a good job of making pages loading faster, but not reloading all the javascript on each page.  This works fine a lot of the time, but there are cases where you may want to have page specific javascript load only on a single page.  Turbolinks can also cause other issues with javascript not working, in my case it created a bug where I had to refresh the page to get the javascript to load.  While there is a gem called jquery-turbolinks that is supposed to help with turbolinks javascript errors, it didnt work in my case.

So here is how to disable turbolinks in your Rails 4 app, which is what I had to do.

First, remove

gem 'turbolinks'

from your Gemfile, and run bundle install.

Second, remove the line

//= require turbolinks

from your application.js file.

Last, in your views > layouts > application.html.erb file, set the ‘data-turbolinks-track’ to false, or delete it altogether. Personally I like to leave as false, so its easy to add back in the future.

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>

And turbolinks is removed from your app. Now I did find a way to leave the turbolinks css in place, and only remove the javascript. This seemed to still work fine in my case. To do that, leave the turbolinks gem in the gemfile, just remove the require turbolinks line from the application.js file. (step 2 above) Then in the application.html.erb file, set the javascript turbolinks to false, but leave the css turbolinks to true. Although bear in mind I can’t confirm this will work in all situations.

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>

Credit here.