Skip to content

Commit

Permalink
Corrections to the ajax guide recent changes. This guide is very
Browse files Browse the repository at this point in the history
outdated and will need a lot of changes to make it useful for Rails 3+
  • Loading branch information
vijaydev committed Oct 9, 2011
1 parent d214e54 commit 3a72c01
Showing 1 changed file with 26 additions and 32 deletions.
58 changes: 26 additions & 32 deletions railties/guides/source/ajax_on_rails.textile
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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: 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 * 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 * Testing JavaScript functionality


endprologue. endprologue.
Expand All @@ -26,83 +26,77 @@ How do 'standard' and AJAX requests differ, why does this matter for understandi


h3. Built-in Rails Helpers h3. Built-in Rails Helpers


Rails 3.1 default javaScript framework of choice is Jquery "http://jquery.com". 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:

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.


<ruby> <ruby>
javascript_include_tag :defaults javascript_include_tag :defaults
</ruby> </ruby>


h4. Examples 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> <ruby>
button_to "New", :action => "new", :form_class => "new-thing" button_to "New", :action => "new", :form_class => "new-thing"
</ruby> </ruby>


will produce will produce


<html>
<form method="post" action="/controller/new" class="new-thing"> <form method="post" action="/controller/new" class="new-thing">
<div><input value="New" type="submit" /></div> <div><input value="New" type="submit" /></div>
</form> </form>

</html>


<ruby> <ruby>
button_to "Create", :action => "create", :remote => true, :form => { "data-type" => "json" } button_to "Create", :action => "create", :remote => true, :form => { "data-type" => "json" }
</ruby> </ruby>


will produce will produce


<html>
<form method="post" action="/images/create" class="button_to" data-remote="true" data-type="json"> <form method="post" action="/images/create" class="button_to" data-remote="true" data-type="json">
<div><input value="Create" type="submit" /></div> <div><input value="Create" type="submit" /></div>
</form> </form>

</html>


<ruby> <ruby>

button_to "Delete Image", { :action => "delete", :id => @image.id }, button_to "Delete Image", { :action => "delete", :id => @image.id },
:confirm => "Are you sure?", :method => :delete :confirm => "Are you sure?", :method => :delete
</ruby> </ruby>


will produce will produce


<html>
<form method="post" action="/images/delete/1" class="button_to"> <form method="post" action="/images/delete/1" class="button_to">
<div> <div>
<input type="hidden" name="_method" value="delete" /> <input type="hidden" name="_method" value="delete" />
<input data-confirm='Are you sure?' value="Delete" type="submit" /> <input data-confirm='Are you sure?' value="Delete" type="submit" />
</div> </div>
</form> </form>
</html>



<ruby>
<ruby> button_to('Destroy', 'http://www.example.com', :confirm => 'Are you sure?', button_to('Destroy', 'http://www.example.com', :confirm => 'Are you sure?',
:method => "delete", :remote => true, :disable_with => 'loading...') :method => "delete", :remote => true, :disable_with => 'loading...')
</ruby> </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! You are ready to add some AJAX love to your Rails app!


Expand Down

0 comments on commit 3a72c01

Please sign in to comment.