RailsとBootstrapを使ったヘッダ

Question

アプリをRails 3.2にアップグレードしたばかりで、TwitterのブートストラップとJQueryを使い始めました。私はページ全体をリロードする代わりに、ページ上のdivを動的にリフレッシュするボタン付きヘッダーを作成したいと思います。

ここで「フィード」リンクを作成し始めましたが、うまくいきません。リンクをクリックすると、最初のアラートが正しいテキストでのみ表示されますが、$ .getコールに入れたアラートは表示されません。

私は間違っていますか？ application.jsで

<div id="header" class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <!-- brand name --> 
     <a class="brand" href="#">Project name</a> 

     <!-- tabs --> 
      <ul class="nav tabs"> 
       <li class="active"><%= link_to "Feed", "https://stackoverflow.com/users/#{logged_in_user.id}/feed", 'data-update' => 'wrap .container' %></li> 
       <li><a href="#">Discover</a></li> 
       <li><a href="#">My Stuff</a></li> 
      </ul> 


     <!-- dropdown --> 
      <ul class="nav pull-right"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= logged_in_user.first_name.presence ? logged_in_user.first_name.capitalize : "Account" %> <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Friends</a></li> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Settings</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Log out</a></li> 
       </ul> 
       </li> 
      </ul> 

     <!-- search --> 
      <form class="navbar-search pull-right"> 
       <input type="text" class="search-query" placeholder="Search"> 
      </form> 
    </div> 
    </div> 
</div> 

：私のコントローラで

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 

// HEADER 
$(function() { 

    // mark tab as selected and unselect other tabs 
    $('.tabs li').click(function(){ 
     $('.tabs li').removeClass('active'); 
     $('.dropdown').removeClass('active'); 

     var url_attributes = $(this).children("a") 
     var url = url_attributes.attr('href'); 
     var update_div = url_attributes.attr('data-update'); 
      alert(url+" ? "+update_div); 

     $.get(url, function(data) { 
      alert(update_div); 
      $('#'+update_div).html(data); 
     }, 'text'); 

     $(this).addClass('active'); 
    }) 

    // unselect tabs when click on dropdown items 
    $('.dropdown li').click(function(){ 
     $('.nav li').removeClass('active'); 
    }) 

}) 

：私の見解では

def feed 
... 
     respond_to do |format| 
     format.html { render :text => 'YO in HTML' } 
     format.js { render :text => 'YO in JS' } 
     end 
end 

だけではなく、私が欲しいのdivを更新、それをリフレッシュHTMLレスポンスの全ページ。

そして、いくつかの理由で、私は「フィード」リンクをクリックすると、ログが二回URLを呼び出す：

Started GET "https://stackoverflow.com/users/3/feed" for 127.0.0.1 at 2012-02-09 15:12:48 -0800 
Processing by UsersController#feed as */* 
    Parameters: {"id"=>"3"} 
... 
Started GET "https://stackoverflow.com/users/3/feed" for 127.0.0.1 at 2012-02-09 15:12:48 -0800 
Processing by UsersController#feed as HTML 
    Parameters: {"id"=>"3"} 

私が欲しいものを達成する正しい方法は何ですか？

Answer 1

jquery preventdefaultメソッドを使用してデフォルトの実行を防止すると、デフォルトのクリックイベントは実行されず、サーバーへの2番目のリクエストはありません。

Webページがレンダリングされると、ブラウザはページ内のすべてのリンクにリスナーを追加します。これがデフォルトのリスナーです。デフォルトのリスナーの上に、もう1つのクリックリスナーが追加されました。リンクブラウザをクリックすると、両方のイベントが発生し、2つのリクエストがサーバーに発生します。あなたのケースでは、カスタムリスナーだけが起動されるようにしてください。

このような状況で作業するもう1つの方法は、リンク内のカスタム属性を使用し、その変数をjqueryコードで使用することです。

<li class="active"><%= link_to "Feed", "#", 'data-update' => 'wrap .container', data-url='/users/#{logged_in_user.id}/feed' %></li> 

var url_attributes = $(this).children("a") 
var url = url_attributes.attr('data-url'); 
var update_div = url_attributes.attr('data-update');