From 12d57329143842f5beda43b4706154483ec08747 Mon Sep 17 00:00:00 2001 From: Francesco Rodriguez Date: Tue, 19 Jun 2012 23:08:35 -0500 Subject: [PATCH] update Built-in Rails Helpers section [ci skip] --- guides/source/ajax_on_rails.textile | 54 ++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/guides/source/ajax_on_rails.textile b/guides/source/ajax_on_rails.textile index 71c7b0352c6c1..7e2f96eda3b77 100644 --- a/guides/source/ajax_on_rails.textile +++ b/guides/source/ajax_on_rails.textile @@ -12,16 +12,16 @@ endprologue. h3. Hello AJAX - a Quick Intro -AJAX is about updating parts of a web page, without reloading the page. An AJAX +AJAX is about updating parts of a web page without reloading the page. An AJAX call happens as a response to an event, like when the page finished loading or when a user clicks on an element. For example, let say you click on a link, which would usually take you to a new page, but instead of doing that, an asynchronous -HTTP request is made and the response is evaluated with javascript. That way the -page is not reloaded, and new information can be dynamically included in the page. +HTTP request is made and the response is evaluated with JavaScript. That way the +page is not reloaded and new information can be dynamically included in the page. The way that happens is by inserting, removing or changing parts of the DOM. The DOM, or Document Object Model, is a convention to represent the HTML document as -a set of nodes that contain other nodes. For example a list of names is represented -as a +ul+ element node containing several +li+ element nodess. An AJAX call can +a set of nodes that contain other nodes. For example, a list of names is represented +as a +ul+ element node containing several +li+ element nodes. An AJAX call can be made to obtain a new list item to include, and append it inside a +li+ node to the +ul+ node. @@ -34,7 +34,7 @@ not required, you respond to the HTTP request with JSON or regular HTML as well. h4. The DOM -The DOM(Document Object Model) is a convention to represent HTML (or XML) +The DOM (Document Object Model) is a convention to represent HTML (or XML) documents, as a set of nodes that act as objects and contain other nodes. You can have a +div+ element that contains other +div+ elements as well as +p+ elements that contain text. @@ -53,13 +53,43 @@ that gets returned, and the page is not reloaded. h3. Built-in Rails Helpers Rails 4.0 ships with "jQuery":http://jquery.com as the default JavaScript library. -The Gemfile contains gem 'jquery-rails' which makes the jQuery files -available to the application automatically. This can be accessed as: +The Gemfile contains +gem 'jquery-rails'+ which provides the +jquery.js+ and ++jquery_ujs.js+ files via the asset pipeline. + +You will have to use the +require+ directive to tell Sprockets to load +jquery.js+ +and +jquery.js+. For example, a new Rails application includes a default ++app/assets/javascripts/application.js+ file which contains the following lines: + + +// ... +//= require jquery +//= require jquery_ujs +// ... + + +The +application.js+ file acts like a manifest and is used to tell Sprockets the +files that you wish to require. In this case, you are requiring the files +jquery.js+ +and +jquery_ujs.js+ provided by the +jquery-rails+ gem. + +If the application is not using the asset pipeline, this can be accessed as: javascript_include_tag :defaults +By default, +:defaults+ loads jQuery. + +You can also choose to use Prototype instead of jQuery and specify the option +using +-j+ switch while generating the application. + + +rails new app_name -j prototype + + +This will add the +prototype-rails+ gem to your Gemfile. + +You are ready to add some AJAX love to your Rails app! + h4. Examples To make them working with AJAX, simply pass the remote: true option to @@ -121,14 +151,6 @@ will produce -You can also choose to use Prototype instead of jQuery and specify the option using +-j+ switch while generating the application. - - -rails new app_name -j prototype - - -You are ready to add some AJAX love to your Rails app! - h4. The Quintessential AJAX Rails Helper: link_to_remote Let's start with what is probably the most often used helper: +link_to_remote+. It has an interesting feature from the documentation point of view: the options supplied to +link_to_remote+ are shared by all other AJAX helpers, so learning the mechanics and options of +link_to_remote+ is a great help when using other helpers.