- 1
:remote => true让删除超链接变成ajax送出。
<%= form_for Post.new do |f| %>
<div class="form-group">
<%= f.text_area :content, :class => "form-control" %>
</div>
<div class="form-group">
<%= f.submit :class => "btn btn-primary" %>
</div>
<% end %>
<% @posts.each do |post| %>
<div id="post-<%= post.id %>" class="panel panel-default">
<div class="panel-heading"><%= post.user.display_name %></div>
<div class="panel-body">
<%= post.content %>
<p class="text-right">
<%= link_to "Delete", post_path(post), :method => :delete, :remote => true, :class => "btn btn-danger" %>
</p>
<% end %>
</div>
</div>
<% end %>
app/controllers/posts_controller.rb
def destroy
@post = current_user.posts.find(params[:id])
@post.destroy
- redirect_to posts_path
+ render :js => "alert('ok');"
end
-
2 服务器回传数据，页面还没重新整理
服务器回传了 alert('ok'); 字串，浏览器拿到之后就去执行，于是跳出一个 alert 视窗。
这个时候虽然数据库的数据删除了，但是页面还没有重新整理。
ajax_2.gif - 3 让数据重新整理
app/controllers/posts_controller.rb
def destroy
@post = current_user.posts.find(params[:id])
@post.destroy
- redirect_to posts_path
- render :js => "alert('ok');"
end
app/views/posts/destroy.js.erb
$("#post-<%= @post.id %>").remove();
<!-- 选中<div>区块移除 -->
解说：
一个 action 如果没有写明 redirect 或 render 的话，就会默认去找 action 名称的样板。于是这里就会去找 destroy.js.erb
ajax_1.gif
