带有 Twitter Bootstrap 选项卡 Ajax 的 Rails 3.2.2 无法正常工作答案

【问题标题】：Rails 3.2.2 with Twitter Bootstrap Tabs Ajax not working带有 Twitter Bootstrap 选项卡 Ajax 的 Rails 3.2.2 无法正常工作
【发布时间】：2012-03-20 01:26:28
【问题描述】：

我正在使用 Rails 开发我的第二个应用程序，我想让 ajax 工作。我也在使用引导程序 2 中的选项卡。我发现引导程序选项卡有两种变体，一种为您提供选项卡，您可以将这些选项卡的内容放入 DIV，另一种基本上是您可以使用的每个选项卡使用链接。我选择了后者，以便我可以对链接进行 Ajaxify。基本思想是我的应用程序主页顶部有标签，例如：主页、库存、任务等……当您单击该标签时，它会将您置于每个控制器索引页面。在我尝试使用 ajax 为每个控制器/选项卡加载索引操作之前，我的工作非常好。因此，我将仅使用 Home 选项卡/控制器作为示例：

家庭控制器

class HomeController < ApplicationController

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

这是我视图中的链接（app/views/layouts/application.html.erb）：

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

我也试过了：

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

此时我的索引操作很简单（/app/views/home/index.html.erb）：

<%= @data %>

我创建了一个 home.js.erb 文件，它基本上只是一个警报，因为它从不处理（我已经重命名甚至删除了文件，控制台消息没有任何变化），一旦警报真正为我触发，我就可以集中精力关于 jquery 代码：我曾经有以下内容：

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

当我点击选项卡式链接查看控制台时，我看到以下内容：

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)

如果我从链接中删除 (:format => :js)，控制台消息基本上会稍微更改为以下内容：

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)

通过查看控制台消息，在我看来这应该可以工作，但事实并非如此。什么都没有渲染，实际上引导程序中 Home 选项卡的 TAB 功能不再起作用。

由于过去几天我一直空着，看来这不应该这么困难，我确定我犯了一个菜鸟错误。如果有人能提供帮助，我将不胜感激。

谢谢！

【问题讨论】：

我发现了一些东西。首先正确的 link_to 代码是：link_to "Home", home_path(:format => :js), :remote => true 并且我的 js 文件命名错误。它需要以控制器中的操作命名，因此需要将其命名为 index.js.erb 而不是 home.js.erb。一旦这样做，警报动作就会触发。我现在遇到的问题是，当我将 $("<%= escape_javascript render(:file => 'home/index.html.erb') %>").insertAfter('.showindex'); 放在 js 文件中时，代码将呈现在视图中，而不是 home/index.html。
忽略上面的评论，我会在下面回答我自己的问题
js文件放哪里了？在资产方面？那么仅调用 'index.js.erb' 是如何将其与 home 控制器的 index 动作关联起来的呢？

标签： ajax ruby-on-rails-3 tabs twitter-bootstrap link-to

【解决方案1】：

好的，我想通了。正确的 link_to 代码是：

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

我需要在控制器中的操作之后命名 js 文件，而不是控制器本身。因此，我需要将其称为 index.js 而不是调用它 home.js 并且它可以工作。

我还注意到，如果我将其命名为 index.js.erb，它实际上会渲染 jquery 代码而不是执行它。它会执行警报。无论如何，将文件命名为 index.js 就可以了。这是 index.js 文件的最终结果：

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

【讨论】：

为了避免额外的步骤，你可以使用 $('.indexcontent').html() 而不是空的，追加

【解决方案2】：

Bootstrap 不会显示选定的选项卡内容，除非您设置了“数据目标”。

=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>

【讨论】：