本来题目应该为Update Multiple Page Elements With One Ajax Request,但蛙眼的博客标题字数有限,遂更名为RJS,因为这次主要了解的就是Rails的RJS。
让我们看看一个RJS的例子,通过一次Ajax请求灵活的更新页面中的多个元素。
1,新建Rails项目和一个rhtml
如app/views/ajax_fun/index.rhtml:
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<h2 id="header">AjaxFun</h2>
<div>
This page was initially loaded at <%= Time.now %>
</div>
<div>
This page was updated at <span id="time_updated"><%= Time.now%></span>
</div>
<ul id="the_list">
<li>Initially, the first item</li>
<li>Another item</li>
<li id="item_to_remove">This one will be removed.</li>
</ul>
<div id="initially_hidden" style="display: none;">
This text starts out hidden.
</div>
<%= link_to_remote "Ajax Magic", :url => {:action => "change"} %><br/>
</body>
</html>
该页面作为Ajax调用的基本页面,我们用javascript_include_tag引入了Rails自带的JavaScript
注意link_to_remote这个helper方法,它的:url表明我们将用Prototype的Ajax.Request(...)方法调用服务器端的change方法。
2,创建一个controller
如app/controllers/ajax_fun_controller.rb:
class AjaxFunController < ApplicationController
def change
@rails_version = Rails::VERSION::STRING
end
end
3,创建一个RJS模板
因为我们对controller的change方法做RJS,所以我们的RJS模板为app/views/ajax_fun/change.rjs:
page['time_updated'].replace_html Time.now
page[:time_updated].visual_effect :shake
page.insert_html :top, 'the_list', '<li>King of the Hill</li>'
page.visual_effect :highlight, 'the_list'
page.show 'initially_hidden'
page.delay(3) do
page.alert "Rails Version: " + @rails_version
end
page.remove 'item_to_remove'
4,看看效果
打开浏览器访问
http://localhost:3000/ajax_fun,点击Ajax Magic链接即可。
我们的change.rjs更新了time_updated的时间,并有一个shake的effect,然后在the_list的顶端插入一行,并highlight它,然后我们显示了initially_hidden这个隐藏div,然后我们在page load成功3秒后alert我们的Rails的版本,最后删除item_to_remove这行。
分享到:
相关推荐
RJS templates are an exciting and powerful new type of template added to Rails 1.1. Unlike conventional Rails templates that generate HTML or XML, RJS templates generate JavaScript code that is ...
《Rails之道》按照Rails的各个子系统进行组织编排,分别介绍了Rails的环境、初始过程、配置和日志记录,Rails的分配器、控制器、页面生成和路由,REST、资源和Rails,ActiveRecord的基础、关联、验证和高级技巧,...
《Rails之道》详细讨论了Rails的程序代码并通过分析Rails中的代码片段来深入解释它的功能,同时,《Rails之道》部分章节也摘录了一些API文档中的内容,使读者能够快速地找到对应的API文档、相关的示例代码以及深入的...
Rails之道.pdf 高清 带书签
rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails ...
一个用Ruby on Rails搭建的图片分享的网站项目.完整源代码
Rails实战之B2C商城开发
让你知道在rails中如何使用路由,路由与URL是如何对应的。
《Ruby on Rails Tutorial》中文版(原书第2版,涵盖 Rails 4) Ruby 是一门很美的计算机语言,其设计原则就是“让编程人员快乐”。David Heinemeier Hansson 就是看重了这一点,才在开发 Rails 框架时选择了 Ruby...
[Pragmatic Bookshelf] Crafting Rails Applications Expert Practices for Everyday Rails Development (E-Book) ☆ 图书概要:☆ Rails 3 is a huge step forward. You can now easily extend the framework, ...
初学 Ruby on Rails 必备之宝典
Ruby on Rails Guides v2 - Ruby on Rails 4.2.5
本资源是参照rails敏捷开发第四版书中的例子,rails的版本是rails3.2.6
Bootstrap 3 和 Rails 4(样例用的是Ruby 2.1.1,Rails 4.1.4) Table of Contents Preface 1 Chapter 1: Introducing Web Application Development in Rails 7 Why Bootstrap with Rails? 8 Setting up a Todo ...
adminlte-rails, AdminLTE Rails gem 将AdminLTE主题与 Rails 资产管道集成 AdminLTE Rails gem AdminLTE 是后端的高级 Bootstrap 主题。英镑 AdminLTE Rails gem 与 Rails 资产管道集成了英镑AdminLTE主题。安装将...
Ruby On Rails 框架自它提出之日起就受到广泛关注,在“不要重复自己”,“约定优于配置”等思想的指导下,Rails 带给 Web 开发者的是极高的开发效率。 ActiveRecord 的灵活让你再也不用配置繁琐的 Hibernate 即可...
中文世界唯一一本Rails 4.0.0 + Ruby 2.0.0 的自學書籍