Question

我正在使用Rails的第二个应用程序，我想让ajax工作。我也在使用bootstrap 2中的选项卡。我找到了两个用于引导程序的选项卡，一个为您提供选项卡，您可以将这些选项卡的内容放入DIV中，另一个基本上是每个选项卡都可以使用链接。我选择了后者，以便我可以对链接进行Ajax化。基本的想法是我的应用程序主页有顶部的选项卡，如：主页，库存，任务等...当您单击选项卡时，它会将您置于每个控制器索引页面。我有这个工作完全正常，直到我尝试使用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 =＆gt;：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)

通过查看控制台消息，在我的脑海中，这应该可行，但事实并非如此。什么都没有渲染，事实上，bootstrap中Home选项卡的TAB功能不再起作用。

由于过去几天我已经空了，看来这应该不是那么困难，我相信我会犯一个菜鸟错误。如果有人可以提供帮助，我会非常感激。

谢谢！

Answer 1

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

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

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

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

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

Answer 2

Bootstrap不会显示所选的标签内容，除非您设置'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>

Rails 3.2.2与Twitter Bootstrap选项卡Ajax无法正常工作

2 个答案: