diff options
| -rw-r--r-- | railties/guides/source/ajax_on_rails.textile | 58 |
1 files changed, 26 insertions, 32 deletions
diff --git a/railties/guides/source/ajax_on_rails.textile b/railties/guides/source/ajax_on_rails.textile index 9f5afc87de..3a0ccfe9b2 100644 --- a/railties/guides/source/ajax_on_rails.textile +++ b/railties/guides/source/ajax_on_rails.textile @@ -3,7 +3,7 @@ h2. AJAX on Rails This guide covers the built-in Ajax/JavaScript functionality of Rails (and more); it will enable you to create rich and dynamic AJAX applications with ease! We will cover the following topics: * Quick introduction to AJAX and related technologies -* Unobtrusive JavaScript helpers with drivers for Prototype, jQuery, and more coming (end of inline JS) +* Unobtrusive JavaScript helpers with drivers for Prototype, jQuery etc * Testing JavaScript functionality endprologue. @@ -26,19 +26,7 @@ How do 'standard' and AJAX requests differ, why does this matter for understandi h3. Built-in Rails Helpers -Rails 3.1 default javaScript framework of choice is Jquery "http://jquery.com". - -jQuery is a new kind of JavaScript Library and jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. - -jquery-rails is default gem and it adds Ruby on Rails style restful HTTP verbs to the jQuery library. Instead of sending an actual PUT or DELETE request (many browsers only support GET and POST), jQuery will make a POST request with an additional data parameter called _method set to the proper verb. Ruby on Rails can then act accordingly. - -Jquery helpers you can access defaultly - typically in your master layout, application.html.erb - like so: - -<ruby> -javascript_include_tag :defaults -</ruby> - -jquery-rails is default in Gemfile. +Rails 3.1 ships with "jQuery":http://jquery.com as the default JavaScript library. The Gemfile contains <tt>gem 'jquery-rails'</tt> which makes the jQuery files available to the application automatically. This can be accessed as: <ruby> javascript_include_tag :defaults @@ -46,63 +34,69 @@ javascript_include_tag :defaults h4. Examples -All the remote_<method< helpers has been removed. To make them working with AJAX, simply pass the :remote => true option to the original non-remote method +All the remote_method helpers has been removed. To make them working with AJAX, simply pass the <tt>:remote => true</tt> option to the original non-remote method. <ruby> - button_to "New", :action => "new", :form_class => "new-thing" +button_to "New", :action => "new", :form_class => "new-thing" </ruby> will produce +<html> <form method="post" action="/controller/new" class="new-thing"> <div><input value="New" type="submit" /></div> </form> - +</html> <ruby> - button_to "Create", :action => "create", :remote => true, :form => { "data-type" => "json" } +button_to "Create", :action => "create", :remote => true, :form => { "data-type" => "json" } </ruby> will produce +<html> <form method="post" action="/images/create" class="button_to" data-remote="true" data-type="json"> <div><input value="Create" type="submit" /></div> </form> - +</html> <ruby> - button_to "Delete Image", { :action => "delete", :id => @image.id }, :confirm => "Are you sure?", :method => :delete </ruby> will produce +<html> <form method="post" action="/images/delete/1" class="button_to"> <div> <input type="hidden" name="_method" value="delete" /> <input data-confirm='Are you sure?' value="Delete" type="submit" /> </div> </form> +</html> - -<ruby> button_to('Destroy', 'http://www.example.com', :confirm => 'Are you sure?', +<ruby> +button_to('Destroy', 'http://www.example.com', :confirm => 'Are you sure?', :method => "delete", :remote => true, :disable_with => 'loading...') </ruby> -# => "<form class='button_to' method='post' action='http://www.example.com' data-remote='true'> -# <div> -# <input name='_method' value='delete' type='hidden' /> -# <input value='Destroy' type='submit' disable_with='loading...' data-confirm='Are you sure?' /> -# </div> -# </form>" -TODO: Write more Jquery helpers here. +will produce -You can also specify the prototype to use instead of jquery or any other libraries +<html> +<form class='button_to' method='post' action='http://www.example.com' data-remote='true'> + <div> + <input name='_method' value='delete' type='hidden' /> + <input value='Destroy' type='submit' disable_with='loading...' data-confirm='Are you sure?' /> + </div> +</form> +</html> -rails new app_name -j prototype +You can also choose to use Prototype instead of jQuery and specify the option using +-j+ switch while generating the application. -Prototype is a generic-purpose JavaScript framework that aims to ease the development of dynamic web applications by offering DOM manipulation, AJAX and other JavaScript functionality ranging from utility functions to object oriented constructs. It is not specifically written for any language, so Rails provides a set of helpers to enable seamless integration of Prototype with your Rails views. +<shell> +rails new app_name -j prototype +</shell> You are ready to add some AJAX love to your Rails app! |