带有 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", "/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 响应刷新了整个页面。

由于某种原因，当我单击“Feed”链接时，日志会调用 URL 两次：

Started GET "/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 "/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');