How can I make the arrow keys work in a Rails/Twitter-Bootstrap image slider (carousel) app?

Question

I'm trying to make the carousel app from this site http://www.w3schools.com/bootstrap/bootstrap_carousel.asp work. Everything works fine except for the left and right arrow keys. The environment I'm using is just a plain ordinary Rails app environment. I'm using the twitter-bootstrap-rails ( https://github.com/seyhunak/twitter-bootstrap-rails ).

I did some debugging and found out that if I manually include the jQuery and Bootstrap libraries, the arrow keys will work. I did this by:

class SomeController < ApplicationController
  def some_action
    render layout: false
  end
end

Then copying and pasting the entire example from the website I mentioned above to the view. As I understand it, this controller/view setup does not load any of the layout, Javascript, stylesheets, etc.

A similar thing can be achieved if, in the app/views/layouts/application.html.erb file, I put this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Instead of the default contents:

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

I also tried removing the turbolinks argument pair but the arrow keys still would not work.

What am I missing? How do I debug this in a systematic manner? I tried following the events being fired on a browser's development tool (Chrome profiler) but I can't seem to narrow down the actual left/right arrow key press event from all the output.

Answer 1

Add the bootstrap.min.js and jquery.min.js files to your assets directory: app/assets/javascripts . Also be sure to require them in your application manifest: app/assets/javascripts/application.js . If you have jQuery or bootstrap gems in your Gemfile, remove them. These steps will achieve the same effect as adding these two lines to your layout:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

The example should still work but at least now you're setup will match the traditional Rails environment.

Monitor your javascript console in chrome's web inspector to see if any javascript errors come up while using the plugin.

---

If you want to override the keypress events try this:

<script>
$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#myCarousel").carousel("prev");
  }
  else if(e.keyCode == 39) { // right
    $("#myCarousel").carousel("next");
  }
});
</script>

Reference: http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp