Rails 3.2.2 with Twitter BootstrapタブAjaxが動作しない

Question

私はRailsで2番目のアプリケーションを使用しています。私はAjaxを動作させたいと思っています。私はブートストラップ2のタブも使用しています。私が見つけたブートストラップのタブには2つのバリエーションがあります。ひとつはタブを与え、それらのタブの内容をDIVに入れることができ、もう一つは基本的にそれぞれのタブですリンクを使用する。私はリンクをAjaxifyできるように後者を選んだ。基本的なアイデアは、私のアプリケーションのホームページにはトップ、タブレット、ホーム、インベントリ、タスクなどのタブがあります。タブをクリックすると、それぞれのコントローラのインデックスページが表示されます。私はAjaxを使って各コントローラ/タブのインデックスアクションをロードしようとするまで、これは完璧に動作します。

：ここ

class HomeController < ApplicationController 

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

私の見解では、リンク（アプリ/ビュー/レイアウト/ application.html.erb）がある

ホームコントローラ：だから、私は、例としてだけで[ホーム]タブ/コントローラを使用します。

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

は私もちょうどしようとした：

​​

マイindexアクションは、この点（/アプリ/ビュー/ホーム/インデックスで簡単です。 html.erb）：

<%= @data %> 

私はそれがprocesessことはありませんので、基本的にはただの警告だったhome.js.erbファイルを作成した（私は名前を変更しても、コンソールメッセージの変化なしでファイルを削除した）と、一度アラートが実際に私はjQueryのコードに集中することができます私のために発射：

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) 

：私は以下を参照してください。タブ付きのリンクをクリックしたときにコンソールを見ているとき

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

：私は1時間で次のように持っていました

私は削除した場合、私の頭の中でこれが動作しなければならないが、それは、コンソールメッセージを見ることによって

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) 

：（：フォーマット=>：JS）リンクからのコンソールメッセージは基本的には次へのわずかな変更をない。実際にレンダリングされるものは何もなく、実際にはブートストラップのホームタブの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というファイルに名前をつけて、そのトリックを行いました。ここにインデックスの最終結果がありました。jsファイル：

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

Answer 2

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