Creating the project and setting the Gemfile
Edited: Just corrected the misspelling on the title "unobtrusive", sorry for that** Ps: I'm using the latest rails 3 beta version while coding**
$ rails -v
Rails 3.0.0.beta4
Creating the project:
$ rails new ajax_on_rails -d mysql
Setting up the Gemfile
I'm setting the nifty-generators here, just to generate our main CRUD.
source 'http://rubygems.org'
gem 'rails', '3.0.0.beta4'
gem 'mysql'
gem 'nifty-generators'
Generating the layout scaffold
$ rails g nifty:layout
$ rails g nifty:scaffold Post title:string content:text
$ rake db:create
$ rake db:migrate
If you run your server and go to the "/posts" you will see a common scaffold.
Changing the CRUD for an unique form
So... we need to change some little things. We gonna create a unique form in "/posts". Inside that form we gonna make everything with ajax: list, create, edit and delete. So first we need to change our Post controller to make everything works:
def index
@posts = Post.all
@post = Post.new
end
def create
@posts = Post.all
@post = Post.new(params[:post])
if @post.save
flash[:notice] = "Successfully created post."
redirect_to posts_url
else
render :action => 'index'
end
end
def edit
@posts = Post.all
@post = Post.find(params[:id])
render :action => "index"
end
def update
@posts = Post.all
@post = Post.find(params[:id])
if @post.update_attributes(params[:post])
flash[:notice] = "Successfully updated post."
redirect_to posts_url
else
render :action => 'index'
end
end
def destroy
@post = Post.find(params[:id])
@post.destroy
flash[:notice] = "Successfully destroyed post."
redirect_to posts_url
end
Making a basic refactoring creating a method to load some objects before every action:
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."
redirect_to posts_url
else
render :action => 'index'
end
end
def edit
@post = Post.find(params[:id])
render :action => "index"
end
def update
@post = Post.find(params[:id])
if @post.update_attributes(params[:post])
flash[:notice] = "Successfully updated post."
redirect_to posts_url
else
render :action => 'index'
end
end
def destroy
@post = Post.find(params[:id])
@post.destroy
flash[:notice] = "Successfully destroyed post."
redirect_to posts_url
end
end
As you can see we are not using the "new" and "show" methods anymore Now we need to change our index template to render the post form, we can do that adding a partial:
app/views/posts/_form.erb
<%= form_for @post do |f| %>
<%= f.error_messages %>
<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 %>
And we render this one in our index file:
spp/views/posts/index.html.erb
<% title "Posts" %>
<%= render :partial => 'form' %>
<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 "Show", post %></td>
<td><%= link_to "Edit", edit_post_path(post) %></td>
<td><%= link_to "Destroy", post, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
<p><%= link_to "New Post", new_post_path %></p>
It should be working now with a unique view. We are not using the "show.html.erb", "new.html.erb" and "edit.html.erb" files anymore, feel free to delete it. Before we reach the next part, let's add some validation in our model, we gonna need that later:
class Post < ActiveRecord::Base
attr_accessible :title, :content
validates_presence_of :title,:content
end
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 %>
to
<%= 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:
<body>
<div id="container">
<div id="flash_notice" style="display:none"></div>
<%= content_tag :h1, yield(:title) if show_title? %>
<%= yield %>
</div>
</body>
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>
app/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 %>
app/views/posts/_posts.html.erb
<table>
<tbody><tr>
<th>Title</th>
<th>Content</th>
</tr>
<% @posts.each do |post| %>
<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 %>
</tbody>
</table>
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:
app/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 -%>
app/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"))%>");
app/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 -%>
app/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.
相关推荐
yii2-ajaxcrud, 用于yii2的单一页面Ajax管理的Gii模板 yii2-ajaxcrud 用于yii2的单一页面Ajax管理的Gii模板 特性使用Ajax创建。读取。更新。删除页面批量删除 suportPjax小部件 suport导出函数( pdf,html,文本,cs
Ajax-Spring-MVC-CRUD-form-submit-and-ajax.zip,spring mvc crud应用程序(springmvc、hibernate 4.x、bootstrap 3.x、jquery、mysql),ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...
AJAX CRUD BOOTSTRAP 是具有Bootstrap UI的Ajax Crud,包括活动记录类和简单ORM模型。 对于使用Active Record,您可以在github 库中看到。 这个包含的示例可以看到example.php文件和example_model.php文件。 ID ...
yii2-ajaxcrud-assets 资产捆绑包用于
yii2-ajaxcrud
crud ajax with php and mysql
粗渣 一个简单的 jQuery AJAX crud 应用程序
Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
简单的SSM crud视频 前端用到大量的ajax 后端返回json数据 可移植性
这是一个示例应用程序,说明如何通过jQuery在Ajax Crud 4中进行操作。 我们利用$ .getJSON和$ .ajax进行AJAX。 我们没有使用不引人注目JavaScript或模板。 应用程序的根发送到静态控制器的index操作。 因此,请...
Rails 4 jquery Ajax 示例 ###演示 这是一个如何使用ajax进行CRUD操作的小示例。 安装它 git clone :sagarjunnarkar/RailsAjaxCRUD.git cd RailsAjaxCRUD 捆绑安装 配置 config/database.yml 耙数据库:设置 ...
crud__js 简单的 javascript Crud 系统
Ajax-codeigniter-ajax-crud.zip,使用codeigniter、jquery和ajax实现简单的crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小...
Laravel开发-ajax-crud-generator 为AjaxCrud JS插件生成基本的脚手架,以便在窗体和模态上快速、简单地生成Ajax CRUD。
是自己写的简单的异步CRDU 项目,我本人也是一个菜鸟,当时什么都不会,自己写异步写了半天,现在自己写出来了,供新手学习,里面有ajax异步页面, 以及传智封装的分页
此处提供了完整的文档: : 有什么问题吗? -网站上的支持论坛和参考资料使用示例脚本: 要安装... 〜大声画布媒体工作人员 注意:在包含ajaxCRUD类之后,请确保包含任何“标题”信息(例如,任何HTML,echo语句等)。
Building Flex and Java based CRUD application using Flash Builder4
Ajax-laravel-ajax-crud.zip,拉维尔5.8阿贾克斯积垢,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下...
jtable, 创建基于AJAX的CRUD表的JQuery插件 什么是 jTablehttp://www.jtable.org jTable是一个用于在不编码HTML或者Javascript的基础上创建基于AJAX的CRUD表的jQuery插件。 它具有以下几个特性:自动创建 HTML ta
Laravel 6 Ajax CRUD教程 您可以按照Laravel 6 Ajax CRUD的分步教程进行操作: ://itsolutionstuff.com/post/laravel-6-ajax-crud-tutorialexample.html