Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版 在用rails3.2学习过程中遇到的问题及解决方法

rails的AJAX实现过程中遇到的困难.

由于第三版使用的rails版本已旧.很多东西无法与rails3.2兼容,出现了很多不合适的地方,由于是初学,什么问题都得自己去google,这个问题确实费心了不少.虽然准备放弃第三版,但最终问题还是解决了.也算给自己继续学习的一点鼓励把......

原书有修改这么一个地方:/views/store/index.html.erb

<%= button_to "Add to Cart", :action => :add_to_cart, :id => product %>
修改为:
<% form_remote_tag :url => {:action => 'add_to_cart', :id => product } do %>
<%= submit_tag "Add to Cart" %>
<% end %>

首先在rails3中没有了form_remote_tag这个方法:原书代码的修改处

需要这样做:

<%= form_tag({:action => 'add_to_cart', :id => product}, :remote => true) do %>
<%= submit_tag "Add to Cart" %>
<% end %>

remote => true及允许发送远程访问.

还有就是,虽然这样修改界面实现了,可是点击按钮还是跳到../add_to_cart/id这个见面,只有返回主界面再刷新才能更新购物车中的内容,即说明没有发生异步交互,咱们的AJAX并没有实现.在chrome下F12看见,在head标签中加载了一项js文件:defaults.js,看来是布局模板中store.html.erb中的javascript标签没有正确的加载jquery库.我是这样实现的.

首先保证app/assets/javascripts/application.js中有这样的内容:

//= require jquery

//= require jquery_ujs

//= require_tree

然后把布局模板中的<%= javascript_include_tag :defaults %>改为:<%= javascript_include_tag :application %>即可.

最后,因为在rails3.2.2中已经移除了rjs模板,所以在/store/目录下创建的add_to_cart.js.rjs是没有作用的,即你虽然点击按钮提交了请求,但是界面中的购物车并没有按照你的意愿改变.所以需要这样修改这个文件,首先重命名为add_to_cart.js.erb:

$(function(){$('#cart').html("<%= j render :partial => 'cart', :object => @cart %>");});

保存,刷新一下.购物车的AJAX就实现了.