jquery+ajax+crud,用Rails3跟jQuery创建一个100% ajax CRUD应用

/views/posts/_posts.html.erb

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

Title	Content
		true %>	true, :confirm => 'Are you sure?', :method => :delete %>

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:

/*Hide the flash notice div*/

$("#flash_notice").hide(300);

*/Update the html of the div post_errors with the new one*/

$("#post_errors").html("");

*/Show the div post_errors*/

$("#post_errors").show(300);

*/Hide the div post_errors*/

$("#post_errors").hide(300);

*/Update the html of the div flash_notice with the new one*/

$("#flash_notice").html("");

*/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(" "posts") ) %>");

/views/posts/edit.js.erb

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

$("#post_form").html(" "form"))%>");

/views/posts/update.js.erb

$("#flash_notice").hide(300);

$("#post_errors").html("");

$("#post_errors").show(300);

$("#post_errors").hide(300);

$("#flash_notice").html("");

$("#flash_notice").show(300);

$(":input:not(input[type=submit])").val("");

$("#posts_list").html(" "posts") ) %>");

/views/posts/destroy.js.erb

$("#post_errors").hide(300);

$("#flash_notice").html("");

$("#flash_notice").show(300);

$("#posts_list").html(" "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.