Rails的3.2.2与Twitter引导标签阿贾克斯不工作 [英] Rails 3.2.2 with Twitter Bootstrap Tabs Ajax not working

问题描述

我对我的使用Rails的第二应用程序，我想阿贾克斯工作。我还使用了标签从引导2.有标签的引导，我发现有两个版本，一是给你的标签，你可以把这些卡口插入的DIV的内容，其他的基本上是每次都能够标签使用一个链接。我选择了后者，这样我可以Ajaxify的联系。其基本思路是，我的应用程序主页上有横跨顶部的标签，如：家庭，库存，任务等等......当你单击该选项卡它让你在每一个这些控制器索引页。我有这个工作完全正常，直到我尝试使用Ajax加载索引操作每个控制器/卡。因此，我将只使用主页选项卡/控制器作为我的例子：

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:

首页控制器

class HomeController < ApplicationController

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

下面是我的看法链接（应用程序/视图/布局/ application.html.erb）：

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

我的索引操作是在这一点上（/app/views/home/index.html.erb）简单的：

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

<%= @data %>

我创建这基本上只是一个提示一个home.js.erb文件，因为它从来没有procesess（我已经改名甚至删除与控制台消息没有改变文件），一旦警报实际上触发了我，我可以集中精力在jQuery的code：我有以下一次：

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)

如果我删除了（：格式=>：JS）从控制台消息基本稍有变化以下链接：

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.

既然我已经拿出空的最后几天，似乎这不应该是这样的困难，我相信我在做一个新手的错误。如果任何人都可以帮忙我真的AP preciate吧。

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.

谢谢！

推荐答案

好吧，我想通了这一点。正确的link_to code是：

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

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

和我需要命名的控制器，而不是控制自己的动作后，js文件。所以与其说这home.js我需要index.js调用它和它的作品。

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.

一件事我注意到也就是，如果我把它叫做index.js.erb的是实际上使jQuery的code和不执行它。它虽然将执行警报。无论如何，命名该文件只是index.js并获得成功。这里是为index.js文件的最终结果：

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]) %>");

这篇关于Rails的3.2.2与Twitter引导标签阿贾克斯不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！