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

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

最近在按照 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>

$('#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 里面执行一下看看什么效果

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

页面代码贴出来一下

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

#5 楼 @leoRuby 要看源码,干脆到 github 开个库 push 上去好了,我 pull 下来执行一下。

https://github.com/leo302323/depot-with-agile-web/blob/master/app/views/line_items/create.js.erb

前面 5 行 # 开头的代码删掉。在 erb 里面 # 不是注释,会被实际输出成 javascript 执行,然后语法错误中止

#8 楼 @Rei 果然如此!!!!谢谢大侠了 居然是这样子 如果不问你 我根本没法解决的 太谢谢了

#8 楼 @Rei 顺便问下 您 rails 开发了几年了 好强啊 该怎样才能到这种程度呢

#10 楼 @leoRuby 09 年底接触 Rails 的。keep coding 就行了 : )

需要 登录 后方可回复, 如果你还没有账号请 注册新账号