Ajax with jQuery in Rails

Ajax The quest to turn Web applications into desktop applications

What is Ajax? It’s hard to avoid hearing about Ajax in Web discussions these days, but what is it really?

What’s in a Name?

What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML”

What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML” But it doesn’t have to be asynchronous

What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML” But it doesn’t have to be asynchronous Or involve XML

What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML” But it doesn’t have to be asynchronous Or involve XML Nowadays the term pretty much stands on its own

The Accidental Feature

The Accidental Feature It’s hard to change the Web

The Accidental Feature It’s hard to change the Web You need to get through standards committees

The Accidental Feature It’s hard to change the Web You need to get through standards committees And it doesn’t really count until most browsers agree

The Accidental Feature It’s hard to change the Web You need to get through standards committees And it doesn’t really count until most browsers agree In 1999 Microsoft added an XMLHTTP ActiveX control

The Accidental Feature It’s hard to change the Web You need to get through standards committees And it doesn’t really count until most browsers agree In 1999 Microsoft added an XMLHTTP ActiveX control Not to be outdone, Mozilla, Safari, and Opera copied it, adding native XMLHttpRequest objects

The Accidental Feature It’s hard to change the Web You need to get through standards committees And it doesn’t really count until most browsers agree In 1999 Microsoft added an XMLHTTP ActiveX control Not to be outdone, Mozilla, Safari, and Opera copied it, adding native XMLHttpRequest objects No one really knew what to do with it

Someone Figured it Out!

Someone Figured it Out! Google ﬁgured out the browsers had all learned a new trick

Someone Figured it Out! Google ﬁgured out the browsers had all learned a new trick They put it to use

Someone Figured it Out! Google ﬁgured out the browsers had all learned a new trick They put it to use Gmail, 2004

Someone Figured it Out! Google ﬁgured out the browsers had all learned a new trick They put it to use Gmail, 2004 Google Maps, 2005

Someone Figured it Out! Google ﬁgured out the browsers had all learned a new trick They put it to use Gmail, 2004 Google Maps, 2005 Ajax was born

Why the History Lesson?

Why the History Lesson? Ajax was never really planned

Why the History Lesson? Ajax was never really planned Even today, the way it is used are is very experimental

Why the History Lesson? Ajax was never really planned Even today, the way it is used are is very experimental Some uses, like Gmail and Google Maps, have been amazing

Why the History Lesson? Ajax was never really planned Even today, the way it is used are is very experimental Some uses, like Gmail and Google Maps, have been amazing A lot more have been disastrous

Why the History Lesson? Ajax was never really planned Even today, the way it is used are is very experimental Some uses, like Gmail and Google Maps, have been amazing A lot more have been disastrous Proceed with caution: a little Ajax goes a long way!

So What the Heck is it? You can scroll from Edmond to Tulsa and beyond without loading a Web page!

A Deﬁnition

A Deﬁnition Ajax is the process of

A Deﬁnition Ajax is the process of Using JavaScript to make a request to the server

A Deﬁnition Ajax is the process of Using JavaScript to make a request to the server Using the results of that request to dynamically modify the page the user is currently viewing

A Deﬁnition Ajax is the process of Using JavaScript to make a request to the server Using the results of that request to dynamically modify the page the user is currently viewing This request is not a full page load that moves the user to a new URL

The Upside

The Upside Ajax can improve the user experience

The Upside Ajax can improve the user experience When used right, it sometimes makes Web applications feel a bit more like desktop applications (think Gmail)

The Upside Ajax can improve the user experience When used right, it sometimes makes Web applications feel a bit more like desktop applications (think Gmail) It is generally faster

The Upside Ajax can improve the user experience When used right, it sometimes makes Web applications feel a bit more like desktop applications (think Gmail) It is generally faster A full page load is expensive: full HTML, CSS, JavaScript ﬁles, and typically several images

The Upside Ajax can improve the user experience When used right, it sometimes makes Web applications feel a bit more like desktop applications (think Gmail) It is generally faster A full page load is expensive: full HTML, CSS, JavaScript ﬁles, and typically several images Ajax requests usually load a lot less

Many Downsides

Many Downsides Ajax interactions are usually much harder to debug

Many Downsides Ajax interactions are usually much harder to debug Everything happens in the background, so it’s hard to see things go wrong

Many Downsides Ajax interactions are usually much harder to debug Everything happens in the background, so it’s hard to see things go wrong Badly planned Ajax actions can easily degrade the interface experience instead of enhancing it

Many Downsides Ajax interactions are usually much harder to debug Everything happens in the background, so it’s hard to see things go wrong Badly planned Ajax actions can easily degrade the interface experience instead of enhancing it You lose addressability (a big advantage of the Web)

Addressability Note that I arrived at http://maps.google.com/

Still at the Same URL Most of the content has changed, but I’m still at http://maps.google.com/

Ajax in Rails There are many ways to handle Ajax with Rails

Rails has Ajax Support Built-in

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive We’ve learned better ways (experimental remember?)

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive We’ve learned better ways (experimental remember?) The helpers have fallen out of fashion

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive We’ve learned better ways (experimental remember?) The helpers have fallen out of fashion Rails is abandoning the old strategy in the next release

Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive We’ve learned better ways (experimental remember?) The helpers have fallen out of fashion Rails is abandoning the old strategy in the next release The helpers will be reworked, similar to what I am going to show you

Unobtrusive JavaScript

Unobtrusive JavaScript Behavior (JavaScript) should be separated from presentation (HTML and CSS)

Unobtrusive JavaScript Behavior (JavaScript) should be separated from presentation (HTML and CSS) We should progressively enhance pages with functionality

Unobtrusive JavaScript Behavior (JavaScript) should be separated from presentation (HTML and CSS) We should progressively enhance pages with functionality Agents not supporting the advanced functionality are just not enhanced

jQuery

jQuery Rails uses the Prototype and script.aculo.us libraries

jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery

jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery It makes it very easy to select pieces of a Web page

jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery It makes it very easy to select pieces of a Web page It helps you manipulate what you have selected

jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery It makes it very easy to select pieces of a Web page It helps you manipulate what you have selected It handles events for you

jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery It makes it very easy to select pieces of a Web page It helps you manipulate what you have selected It handles events for you And it supports Ajax

jQuery Crash Course

jQuery Crash Course Run when the DOM is ready: jQuery(function() { });

jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autoﬁll’)

jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autoﬁll’) Run on click: $(‘…’).click(function() { });

jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autoﬁll’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { });

jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autoﬁll’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { }); Change content: $(‘…’).html(content);

jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autoﬁll’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { }); Change content: $(‘…’).html(content); Append content: $(‘…’).append(content);

Ajax With jQuery jQuery gives you full control over how the Ajax request is executed

$.ajax({ url: "http://ajaxapp.com/ajax_action", type: "POST", dataType: "html", data: $('form').serialize(), complete: function() { // called when complete }, success: function() { // called when successful }, error: function() { // called when there is an error } }); Ajax With jQuery jQuery gives you full control over how the Ajax request is executed

An Example Let’s take a look at an Ajax request in action

Commenting via Ajax

Commenting via Ajax Let’s take a working blog comment system and convert it to use Ajax (when JavaScript is available)

Commenting via Ajax Let’s take a working blog comment system and convert it to use Ajax (when JavaScript is available) There’s no advantage to having the user visit a create action

Commenting via Ajax Let’s take a working blog comment system and convert it to use Ajax (when JavaScript is available) There’s no advantage to having the user visit a create action We won’t lose addressability in this case

Commenting via Ajax Let’s take a working blog comment system and convert it to use Ajax (when JavaScript is available) There’s no advantage to having the user visit a create action We won’t lose addressability in this case The Ajax request will require less resources from our controller and be more responsive for the user

An Article With Comments This is a trivial blog like interface, allowing users to comment on articles

A Full Page Refresh We loaded a lot of content that didn’t change just to add that little comment

Add JavaScript I have loaded jQuery from Google and my own JavaScript ﬁle

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title><%= build_page_title yield(:page_title) %></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <%= javascript_include_tag "application" %> </head> <body> <%= ﬂash_messages %> <%= yield %> </body> </html> Add JavaScript I have loaded jQuery from Google and my own JavaScript ﬁle

Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation

<h1><%= h @article.title %></h1> <%= simple_format @article.body %> <h2>Comments</h2> <div id="comments"> <%= render @article.comments %> </div> <h3>Add a Comment</h3> <% form_for @comment || @article.comments.build, :html => {:id => "comment_form"} do |f| %> <%= f.error_messages %> <%= f.hidden_ﬁeld :article_id %> <%= f.label :author %><br> <%= f.text_ﬁeld :author, :size => 42 %><br> <%= f.label :body, "Comment" %><br> <%= f.text_area :body, :cols => 40, :rows => 5 %><br> <%= f.submit "Comment" %> <span class="ajax_message"> </span> <% end %> Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation

Build Ajax Request We can pull the request details from the form, but we have to do some manual interface work

jQuery(function() { $('#comment_form').submit(function(event) { event.preventDefault(); var f = $(this); f.find('.ajax_message').html('Saving...'); f.find('input[type="submit"]').attr('disabled', true); $.ajax({ url: f.attr('action'), type: f.attr('method'), dataType: "html", data: f.serialize(), complete: function() { f.find('.ajax_message').html(' '); f.find('input[type="submit"]').attr('disabled', false); }, success: function(data, textStatus, xhr) { $('#comments').append(data); f.find('input[type="text"], textarea').val(''); }, error: function() { alert('Please enter an author and comment.'); }, }); }); }); Build Ajax Request We can pull the request details from the form, but we have to do some manual interface work

Respond to Ajax Remember XMLHttpRequest (“xhr”)? We respond with just the comment.

class CommentsController < ApplicationController def create @comment = Comment.new(params[:comment]) if @comment.save if request.xhr? render @comment else ﬂash[:notice] = "Comment added." redirect_to article_path(@comment.article) end else if request.xhr? render :status => 403 else ﬂash[:error] = "Comment could not be added." redirect_to article_path(@comment.article) end end end end Respond to Ajax Remember XMLHttpRequest (“xhr”)? We respond with just the comment.

Sending Ajax I have provided some interface clues so the user knows work is in progress

Ajax Complete This time we loaded much less data, but we had to do more interface cleanup

Mind the Details

Mind the Details With Ajax, you need to manage the interface details

Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator

Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator I disabled the “Comment” button

Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator I disabled the “Comment” button I undid both of the above when the request ﬁnished

Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator I disabled the “Comment” button I undid both of the above when the request ﬁnished I cleared the form for new entries

Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator I disabled the “Comment” button I undid both of the above when the request ﬁnished I cleared the form for new entries I showed a reasonable error message for failure

Questions?

Ajax Lab Your book has instructions on how to add some Ajax page manipulations to your application

http://www.acenetcampus.com	148
http://www.slideshare.net	84
http://acenetcampus.com	12
http://my-academy.tumblr.com	3
http://dev.smartplus.tv	2
http://localhost:3000	1
http://paper.li	1
http://zootool.com	1

Ajax with jQuery in Rails

by James Gray on Mar 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 252

Statistics

Ajax with jQuery in Rails — Presentation Transcript