Rails 3.2.2 with Twitter Bootstrap Tabs Ajax not working

Question

I'm on my second app with Rails and I want to get ajax working. I'm also using the tabs from bootstrap 2. There are two variations of the tabs for bootstrap that I found, one gives you the tabs and you can put the content of those tabs into DIVs, the other is basically each tab you are able to use a link. I opted for the latter so that I could Ajaxify the links. The basic idea is that my apps home page has tabs across the top such as: Home, Inventory, Tasks, etc...and when you click the tab it puts you at each of those controllers index page. I have this working perfectly fine until I try to use ajax to load the index action for each controller/tab. So I will use just the Home tab/controller as my example:

Home Controller

class HomeController < ApplicationController

  def index
    @data = "Home Screen Index Page"
    respond_to do |format|
      format.html
      format.js
    end
  end
end

Here is the link in my view (app/views/layouts/application.html.erb):

link_to "Home", home_path(:format => :js), :remote => true

I had also just tried:

link_to "Home", home_path, :remote => true

My index action is simple at this point (/app/views/home/index.html.erb):

<%= @data %>

I created a home.js.erb file that was basically just an alert because it never procesess (I've renamed and even deleted the file with no change in console messages) and once the alert actually fires for me I can concentrate on the jquery code: I had the following at one time:

$("<%= escape_javascript render(:file => 'home/index.html.erb') %>").insertAfter('.showindex');

When watching the console when I clicked on the tabbed link I see the following:

Started GET "/home.js" for 127.0.0.1 at 2012-03-19 18:15:21 -0700
Processing by HomeController#index as JS
  Rendered home/index.html.haml within layouts/application (0.1ms)
Completed 200 OK in 8ms (Views: 7.4ms | ActiveRecord: 0.0ms)

if I remove the (:format => :js) from the link the console message basically changes slightly to the following:

Started GET "/home" for 127.0.0.1 at 2012-03-19 18:16:59 -0700
Processing by HomeController#index as JS
  Rendered home/index.html.haml within layouts/application (0.1ms)
Completed 200 OK in 7ms (Views: 7.2ms | ActiveRecord: 0.0ms)

By looking at the console message, in my head this should be working but it is not. Nothing is ever rendered, and in fact the TAB functionality for the Home tab in bootstrap no longer functions.

Since I have come up empty for the last couple of days, and it seems this should not be this difficult, I am sure I'm making a rookie mistake. If anyone can help out I'd really appreciate it.

Thanks!

Answer 1

Ok, I figured this out. The correct link_to code is:

=link_to "Home", home_path(:format => :js), :remote => true, 'data-toggle' => 'tab'

And I needed to name the js file after the action in the controller, not the controller itself. So instead of calling it home.js I needed to call it index.js and it works.

One thing I noticed also was if I called it index.js.erb is would actually render the jquery code and not execute it. It would execute the alert though. Anyway, naming the file just index.js did the trick. Here was the final outcome for the index.js file:

$('.indexcontent').empty()
$('.indexcontent').append("<%= escape_javascript render(:file => 'home/index', :formats => [:html]) %>");

Answer 2

Bootstrap won't show the selected tab content, unless you set 'data-target'.

=link_to "Home", home_path(:format => :js), :remote => true, 'data-toggle' => 'tab', 'data-target' => '#indexcontent'


<div class="tab-content">
    <div class="tab-pane" id="indexcontent">
    </div>
</div>