用Rails3和jQuery创建一个100% ajax CRUD应用 -

tongxiaoming520

浏览: 178289 次
性别:
来自: 上海

最近访客更多访客>>

zc5510670

我的无奈

w12983

MuyaXiang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用Rails3和jQuery创建一个100% ajax CRUD应用

博客分类：

rails

Ajax jQuery Flash JavaScript Rails

Changing from Prototype to Jquery

For default Rails implements ajax requests with prototype, we need to change it to work with jquery.First, download the rails.js equivalent with jquery from github Copy the rails.js under the src folder to your public/javascripts/.In our layout "application.html.erb" we'll change the next lines

<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>

<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' %>
<%= javascript_include_tag 'rails' %>

It's time to the ajax magic

Keep it simple, let's think about what we want:

Our controller and links should make remote requests
Our html should contain divs so we can change the content with unobstructive javascripts
Our actions should return js (javascript) content to change the html page.

So let's start changing everything again.

The template(layout) need to contain a div to show the flash_notice:

Put some partials in our index and add the remote => true in our links and forms:

<% title "Posts" %>
<div id="post_form"><%= render :partial => 'form' %></div>
<div id="posts_list"><%= render :partial => "posts" %></div>

/views/posts/_form.html.erb

I also put a div to show the errors here, so we can change it in our js responses:

<%= form_for(@post, :remote => true) do |f| %>
<div id= "post_errors" style="display:none"></div>
<p>
    <%= f.label :title %><br />
    <%= f.text_field :title %>
</p>
<p>
    <%= f.label :content %><br />
    <%= f.text_area :content, :rows => 5 %>
</p>
<p><%= f.submit %></p>
<% end %>

/views/posts/_posts.html.erb

I created this partial so i can update the list of posts with javascript too:

<table>
<tr>
    <th>Title</th>
    <th>Content</th>
</tr>
<% for post in @posts %>
    <tr>
      <td><%= post.title %></td>
      <td><%= post.content %></td>
      <td><%= link_to "Edit", edit_post_path(post), :remote => true %></td>
      <td><%= link_to "Destroy", post, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td>
    </tr>
<% end %>
</table>

We need to change our controller too. Since we gonna make a 100% ajax CRUD we don't need that redirects anymore:

class PostsController < ApplicationController

before_filter :load

def load
    @posts = Post.all
    @post = Post.new
end

def index
end

def create
    @post = Post.new(params[:post])
    if @post.save
      flash[:notice] = "Successfully created post."
      @posts = Post.all
    end
end

def edit
    @post = Post.find(params[:id])
end

def update
    @post = Post.find(params[:id])
    if @post.update_attributes(params[:post])
      flash[:notice] = "Successfully updated post."
      @posts = Post.all
    end
end

def destroy
    @post = Post.find(params[:id])
    @post.destroy
    flash[:notice] = "Successfully destroyed post."
    @posts = Post.all
end
end

Almost there. If you try to use the form now, nothing happens right? If you take a look at the console(server) you will find some errors telling you Rails can't find the view js to render. So let's create this files. Basically we gonna create a view to render javascript, with this javascript we gonna inject or modify our html. We are using jquery to do the modification/injection part, so if you never work with that take a look at the official site to learn a lot of cool stuffs: http://www.jquery.com We need files to create, edit, update and destroy actions, so let's create them:

/views/posts/create.js.erb

Here we verify if the @post object contains errors and changes the behavior according to that:

<% if @post.errors.any? -%>
/*Hide the flash notice div*/
$("#flash_notice").hide(300);

*/Update the html of the div post_errors with the new one*/
$("#post_errors").html("<%= escape_javascript(error_messages_for(@post))%>");

*/Show the div post_errors*/
$("#post_errors").show(300);
<% else -%>
*/Hide the div post_errors*/
$("#post_errors").hide(300);

*/Update the html of the div flash_notice with the new one*/
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");

*/Show the flash_notice div*/
$("#flash_notice").show(300);

*/Clear the entire form*/
$(":input:not(input[type=submit])").val("");

*/Replace the html of the div post_lists with the updated new one*/
$("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");
<% end -%>

/views/posts/edit.js.erb

In this action we just need to update the form with the select post.

$("#post_form").html("<%= escape_javascript(render(:partial => "form"))%>");

/views/posts/update.js.erb

<% if @post.errors.any? -%>
$("#flash_notice").hide(300);
$("#post_errors").html("<%= escape_javascript(error_messages_for(@post))%>");
$("#post_errors").show(300);
<% else -%>
$("#post_errors").hide(300);
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");
$("#flash_notice").show(300);
$(":input:not(input[type=submit])").val("");
$("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");
<% end -%>

/views/posts/destroy.js.erb

$("#post_errors").hide(300);
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");
$("#flash_notice").show(300);
$("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");
And that's it, go to your "/posts" page and you should see our 100% ajax CRUD.

Ps1: That uses html5 to make our forms and links remotes (:remote => true), so it's not gonna work in any version of INTERNET EXPLORER yet.

Ps2: You can also use the redirect/render in your actions pointing to the index and then create only one javascript view (index.js.erb) treating that as you want. I prefer to keep things separated in case I decide to change the visual behavior of some view.

Ps3: Someone should make a generator for this ajax forms.

分享到：

Rails3:使用bundler管理gems | rails jquery and prototype

2011-03-19 16:05
浏览 1557
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用Rails3和jQuery创建一个100% ajax CRUD应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用Rails3和jQuery创建一个100% ajax CRUD应用

评论

发表评论

相关推荐

7点关于RESTful规范的API接口设计的想法

RESTful API 设计指南

rails笔记

重构臃肿 ActiveRecord 模型的 7 种方式

Rails系统重构：从单一复杂系统到多个小应用集群

Custom dialog for data-confirm in Rails

常用ruby gem

sphinx-0.99 + ultrasphinx

rails3 simple captcha

测试ruby代码高亮

rails3 time zone

Creating a 100% ajax CRUD using rails 3 and unobtrusive javascript

rails render用法

Rails 3.2 的 Ajax 向导

ror websites

OAuth gem for rails3

识别验证码

rails env

搭建rails开发环境

fragment cache

最近访客更多访客>>