Rails rails 3.2 实现 agile web 第四版 ajax 问题

leoruby · 2012年10月18日 · 最后由 Rei 回复于 2012年10月18日 · 4333 次阅读

最近在按照 agile web edition 4 这本书的例子做练习，做到 ajax 的时候出现了问题，卡了两天也没解决上网查了很多，发现很多人遇到和我一样的问题，特来社区求助，看看哪位好心的大侠帮我解决一下：

问题是这样的，我的 rails 版本是 3.2.3 rails assets pipeline 是开着的所以 js 的默认应该是 jquery 这和书上的不一致，所以我是这样做的：

1.\app\views\layouts\application.html.erb <%= javascript_include_tag :defaults %> to <%= javascript_include_tag "application" %> 2.app/views/line_items/create.js.rjs 成 create.js.erb，并修改内容： $('#cart').html("<%= escape_javascript(render(@cart)) %>");

3.修改 line_items_controller 中的 create 方法，加入 format.js

结果还是没成功，用 Firebug 调试了一下，发现 ajax 没出错 response 的内容是： $('#cart').html("

Your Cart<\/div>\n\n\n \n \n

1×<\/td>\n	CoffeeScript<\/td>\n	$36.00<\/td>\n<\/tr>\n\n
Total<\/td>\n	$36.00<\/td>\n <\/tr>\n<\/table>\n\n <\/div><\/form>\n"); 确实是我想要的，但不知为什么没执行 html 的头文件中也有 <p>可 ajax 效果就是出不来，需要手动刷新真心希望哪位大侠能帮帮我，小弟初学感激不尽</p>

Rei #1 2012年10月18日

$('#cart').html("Your Cart<\/div>\n\n\n \n 1×<\/td>\n CoffeeScript<\/td>\n $36.00<\/td>\n<\/tr>\n\n \n Total<\/td>\n $36.00<\/td>\n <\/tr>\n<\/table>\n\n<\/div><\/form>\n");

把这段代码放到浏览器的 javascript console 里面执行一下看看什么效果

leoruby #2 2012年10月18日

#1 楼 @Rei 大侠我看过你给其他人的回复哎真巧我执行了是正确的效果但是我点击 Add to Cart 的话就没反应

Rei #3 2012年10月18日

页面代码贴出来一下

leoruby #4 2012年10月18日

#3 楼 @Rei

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/carts.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/depot.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/line_items.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/products.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <link href="/assets/depot.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>

<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/carts.js?body=1" type="text/javascript"></script>
<script src="/assets/line_items.js?body=1" type="text/javascript"></script>
<script src="/assets/products.js?body=1" type="text/javascript"></script>
<script src="/assets/store.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="kLTxXnm5KnydwM3F3d61GrKUwBReflDfwP1wsRc6Bas=" name="csrf-token" />
</head>
<body id="store">

    <div id="banner">
        <img alt="Logo" src="/assets/logo.png" />
        Pragmatic Bookshelf
    </div>
    <div id="columns">
     <div id="side">
        <div id="cart">
           <div class="cart-title">Your Cart</div>

<table>
    <tr>
    <td>1&times;</td>
    <td>CoffeeScript</td>
    <td class="item-price">$36.00</td>
</tr>

    <tr class="total-line">
        <td colspan="2">Total</td>

        <td class="total-cell">$36.00</td>
    </tr>
</table>

<form action="/carts/25" class="button_to" method="post"><div><input name="_method" type="hidden" value="delete" /><input data-confirm="Are you sure?" type="submit" value="Empty cart" /><input name="authenticity_token" type="hidden" value="kLTxXnm5KnydwM3F3d61GrKUwBReflDfwP1wsRc6Bas=" /></div></form>

        </div>
        <a>Home</a><br />
        <a>Questions</a><br />

        <a>News</a><br />
        <a>Contacts</a><br />
     </div> 
    </div>
    <div id="main">


<h2>Your pragmatic Catalog</h2>

<div class="entry">

  <img alt="Cs" src="/assets/cs.jpg" />
  <h3>CoffeeScript</h3>
  <p>
        CoffeeScript is JavaScript done right. It provides all of JavaScript's
  functionality wrapped in a cleaner, more succinct syntax. In the first
  book on this exciting new language, CoffeeScript guru Trevor Burnham
  shows you how to hold onto all the power and flexibility of JavaScript
  while writing clearer, cleaner, and safer code.
      </p>
  <div  class="price_line">
    <span class="price">$36.00</span>
    <form action="/line_items?product_id=4" class="button_to" data-remote="true" method="post"><div><input type="submit" value="Add to Cart" /><input name="authenticity_token" type="hidden" value="kLTxXnm5KnydwM3F3d61GrKUwBReflDfwP1wsRc6Bas=" /></div></form>

    </div>
 </div>
<div class="entry">
  <img alt="Ruby" src="/assets/ruby.jpg" />
  <h3>Programming Ruby 1.9</h3>
  <p>
        Ruby is the fastest growing and most exciting dynamic language
        out there. If you need to get working programs delivered fast,
        you should add Ruby to your toolbox.
      </p>
  <div  class="price_line">

    <span class="price">$49.95</span>
    <form action="/line_items?product_id=5" class="button_to" data-remote="true" method="post"><div><input type="submit" value="Add to Cart" /><input name="authenticity_token" type="hidden" value="kLTxXnm5KnydwM3F3d61GrKUwBReflDfwP1wsRc6Bas=" /></div></form>
    </div>
 </div>
<div class="entry">
  <img alt="Rtp" src="/assets/rtp.jpg" />
  <h3>Rails Test Prescriptions</h3>
  <p>

        <em>Rails Test Prescriptions</em> is a comprehensive guide to testing
        Rails applications, covering Test-Driven Development from both a
        theoretical perspective (why to test) and from a practical perspective
        (how to test effectively). It covers the core Rails testing tools and
        procedures for Rails 2 and Rails 3, and introduces popular add-ons,
        including Cucumber, Shoulda, Machinist, Mocha, and Rcov.
      </p>
  <div  class="price_line">
    <span class="price">$34.95</span>
    <form action="/line_items?product_id=6" class="button_to" data-remote="true" method="post"><div><input type="submit" value="Add to Cart" /><input name="authenticity_token" type="hidden" value="kLTxXnm5KnydwM3F3d61GrKUwBReflDfwP1wsRc6Bas=" /></div></form>
    </div>
 </div>

    </div>
</body>
</html>