使用Rails和Bootstrap的頭文件

Question

我剛升級了一個應用程序到Rails 3.2，並開始使用Twitter引導程序和JQuery。我想建立一個帶動態刷新頁面div的按鈕，而不是重新加載整個頁面。

我開始在這裏的「Feed」鏈接上工作，但它不能按我的意願工作。當我點擊鏈接時，它只顯示帶有正確文本的第一條警報，但不顯示我放入$ .get調用中的警報。

我在做什麼錯？

筆者認爲：

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

在application.js中：

//= 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方法阻止默認執行​​，以便默認的單擊事件不會被執行，並且不會成爲服務器的第二個請求。

當呈現網頁時，瀏覽器將偵聽器添加到頁面中的所有鏈接。這是默認的偵聽器。在默認偵聽器之上，您添加了一個點擊偵聽器。當您點擊鏈接瀏覽器時，會觸發導致向服務器發送兩個請求的事件。在你的情況下，只要你的自定義偵聽器被解僱。

處理這種情況的另一種方法是在鏈接中使用自定義屬性並在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');