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 asynchronou...
What’s in a Name?

The term originally stood for “Asynchronous JavaScript
and XML”
  But it doesn’t have to be asynchronou...
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 ...
The Accidental Feature
It’s hard to change the Web
  You need to get through standards committees
  And it doesn’t really ...
The Accidental Feature
It’s hard to change the Web
  You need to get through standards committees
  And it doesn’t really ...
The Accidental Feature
It’s hard to change the Web
  You need to get through standards committees
  And it doesn’t really ...
Someone Figured it Out!
Someone Figured it Out!
Google figured out the
browsers had all
learned a new trick
Someone Figured it Out!
Google figured out the
browsers had all
learned a new trick
They put it to use
Someone Figured it Out!
Google figured out the
browsers had all
learned a new trick
They put it to use
  Gmail, 2004
Someone Figured it Out!
Google figured out the
browsers had all
learned a new trick
They put it to use
  Gmail, 2004
  Goog...
Someone Figured it Out!
Google figured out the
browsers had all
learned a new trick
They put it to use
  Gmail, 2004
  Goog...
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 use...
Why the History Lesson?
Ajax was never really planned
  Even today, the way it is used are is very
  experimental
Some use...
Why the History Lesson?
Ajax was never really planned
  Even today, the way it is used are is very
  experimental
Some use...
So What the Heck is it?
You can scroll from Edmond to Tulsa
and beyond without loading a Web page!
So What the Heck is it?
You can scroll from Edmond to Tulsa
and beyond without loading a Web page!
A Definition
A Definition

 Ajax is the process of
A Definition

 Ajax is the process of
   Using JavaScript to make a request to the server
A Definition

 Ajax is the process of
   Using JavaScript to make a request to the server
   Using the results of that requ...
A Definition

 Ajax is the process of
   Using JavaScript to make a request to the server
   Using the results of that requ...
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 ...
The Upside
Ajax can improve the user experience
When used right, it sometimes makes Web applications
feel a bit more like ...
The Upside
Ajax can improve the user experience
When used right, it sometimes makes Web applications
feel a bit more like ...
The Upside
Ajax can improve the user experience
When used right, it sometimes makes Web applications
feel a bit more like ...
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...
Many Downsides

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

Ajax interactions are usually much harder to debug
  Everything happens in the background, so it’s hard to...
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/
Still at the Same URL
Most of the content has changed,
but I’m still 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 impre...
Rails has Ajax
Support Built-in
 Rails added a slew of Ajax helpers many versions ago
   At the time, they were very impre...
Rails has Ajax
Support Built-in
 Rails added a slew of Ajax helpers many versions ago
   At the time, they were very impre...
Rails has Ajax
Support Built-in
 Rails added a slew of Ajax helpers many versions ago
   At the time, they were very impre...
Rails has Ajax
Support Built-in
 Rails added a slew of Ajax helpers many versions ago
   At the time, they were very impre...
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...
Unobtrusive JavaScript

Behavior (JavaScript) should be separated from
presentation (HTML and CSS)
We should progressively...
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 ...
jQuery
Rails uses the Prototype and script.aculo.us libraries
I prefer jQuery
  It makes it very easy to select pieces of ...
jQuery
Rails uses the Prototype and script.aculo.us libraries
I prefer jQuery
  It makes it very easy to select pieces of ...
jQuery
Rails uses the Prototype and script.aculo.us libraries
I prefer jQuery
  It makes it very easy to select pieces of ...
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.autofill’)
jQuery Crash Course
Run when the DOM is ready: jQuery(function() { });
Select with CSS: $(‘form#data input.autofill’)
Run o...
jQuery Crash Course
Run when the DOM is ready: jQuery(function() { });
Select with CSS: $(‘form#data input.autofill’)
Run o...
jQuery Crash Course
Run when the DOM is ready: jQuery(function() { });
Select with CSS: $(‘form#data input.autofill’)
Run o...
jQuery Crash Course
Run when the DOM is ready: jQuery(function() { });
Select with CSS: $(‘form#data input.autofill’)
Run o...
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",
 ...
$.ajax({
           url:     "http://ajaxapp.com/ajax_action",
           type:     "POST",
           dataType: "html",
 ...
$.ajax({
           url:     "http://ajaxapp.com/ajax_action",
           type:     "POST",
           dataType: "html",
 ...
$.ajax({
           url:     "http://ajaxapp.com/ajax_action",
           type:     "POST",
           dataType: "html",
 ...
$.ajax({
           url:     "http://ajaxapp.com/ajax_action",
           type:     "POST",
           dataType: "html",
 ...
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)
Th...
Commenting via Ajax

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

Let’s take a working blog comment system and convert
it to use Ajax (when JavaScript is available)
Th...
An Article With Comments
This is a trivial blog like interface,
allowing users to comment on articles
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
A Full Page Refresh
We loaded a lot of content that didn’t change
just to add that little comment
A Full Page Refresh
We loaded a lot of content that didn’t change
just to add that little comment
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 file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
 ...
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">
...
<h1><%= h @article.title %></h1>
     <%= simple_format @article.body %>

     <h2>Comments</h2>
     <div id="comments">
...
<h1><%= h @article.title %></h1>
     <%= simple_format @article.body %>

     <h2>Comments</h2>
     <div id="comments">
...
<h1><%= h @article.title %></h1>
     <%= simple_format @article.body %>

     <h2>Comments</h2>
     <div id="comments">
...
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();
          ...
jQuery(function() {
          $('#comment_form').submit(function(event) {
              event.preventDefault();
          ...
jQuery(function() {
          $('#comment_form').submit(function(event) {
              event.preventDefault();
          ...
jQuery(function() {
          $('#comment_form').submit(function(event) {
              event.preventDefault();
          ...
jQuery(function() {
          $('#comment_form').submit(function(event) {
              event.preventDefault();
          ...
Respond to Ajax
Remember XMLHttpRequest (“xhr”)?
We respond with just the comment.
class CommentsController < ApplicationController
        def create
          @comment = Comment.new(params[:comment])
   ...
class CommentsController < ApplicationController
        def create
          @comment = Comment.new(params[:comment])
   ...
class CommentsController < ApplicationController
        def create
          @comment = Comment.new(params[:comment])
   ...
class CommentsController < ApplicationController
        def create
          @comment = Comment.new(params[:comment])
   ...
Sending Ajax
I have provided some interface clues
so the user knows work is in progress
Sending Ajax
I have provided some interface clues
so the user knows work is in progress
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
Ajax Complete
This time we loaded much less data,
but we had to do more interface cleanup
Ajax Complete
This time we loaded much less data,
but we had to do more interface cleanup
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 “...
Mind the Details
 With Ajax, you need to manage the interface details
   I added a “Saving…” indicator
   I disabled the “...
Mind the Details
 With Ajax, you need to manage the interface details
   I added a “Saving…” indicator
   I disabled the “...
Mind the Details
 With Ajax, you need to manage the interface details
   I added a “Saving…” indicator
   I disabled the “...
Questions?
Ajax Lab
Your book has instructions on how to add some
Ajax page manipulations to your application
Upcoming SlideShare
Loading in...5
×

Ajax with jQuery in Rails

23,424

Published on

This was the tenth speech of a three day Rails training I gave in Tulsa, OK in the spring 2010.

Published in: Technology
2 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,424
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
463
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide
























































































































  • Ajax with jQuery in Rails

    1. 1. Ajax The quest to turn Web applications into desktop applications
    2. 2. What is Ajax? It’s hard to avoid hearing about Ajax in Web discussions these days, but what is it really?
    3. 3. What’s in a Name?
    4. 4. What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML”
    5. 5. What’s in a Name? The term originally stood for “Asynchronous JavaScript and XML” But it doesn’t have to be asynchronous
    6. 6. 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
    7. 7. 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
    8. 8. The Accidental Feature
    9. 9. The Accidental Feature It’s hard to change the Web
    10. 10. The Accidental Feature It’s hard to change the Web You need to get through standards committees
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. Someone Figured it Out!
    16. 16. Someone Figured it Out! Google figured out the browsers had all learned a new trick
    17. 17. Someone Figured it Out! Google figured out the browsers had all learned a new trick They put it to use
    18. 18. Someone Figured it Out! Google figured out the browsers had all learned a new trick They put it to use Gmail, 2004
    19. 19. Someone Figured it Out! Google figured out the browsers had all learned a new trick They put it to use Gmail, 2004 Google Maps, 2005
    20. 20. Someone Figured it Out! Google figured out the browsers had all learned a new trick They put it to use Gmail, 2004 Google Maps, 2005 Ajax was born
    21. 21. Why the History Lesson?
    22. 22. Why the History Lesson? Ajax was never really planned
    23. 23. Why the History Lesson? Ajax was never really planned Even today, the way it is used are is very experimental
    24. 24. 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
    25. 25. 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
    26. 26. 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!
    27. 27. So What the Heck is it? You can scroll from Edmond to Tulsa and beyond without loading a Web page!
    28. 28. So What the Heck is it? You can scroll from Edmond to Tulsa and beyond without loading a Web page!
    29. 29. A Definition
    30. 30. A Definition Ajax is the process of
    31. 31. A Definition Ajax is the process of Using JavaScript to make a request to the server
    32. 32. A Definition 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
    33. 33. A Definition 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
    34. 34. The Upside
    35. 35. The Upside Ajax can improve the user experience
    36. 36. 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)
    37. 37. 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
    38. 38. 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 files, and typically several images
    39. 39. 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 files, and typically several images Ajax requests usually load a lot less
    40. 40. Many Downsides
    41. 41. Many Downsides Ajax interactions are usually much harder to debug
    42. 42. Many Downsides Ajax interactions are usually much harder to debug Everything happens in the background, so it’s hard to see things go wrong
    43. 43. 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
    44. 44. 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)
    45. 45. Addressability Note that I arrived at http://maps.google.com/
    46. 46. Still at the Same URL Most of the content has changed, but I’m still at http://maps.google.com/
    47. 47. Still at the Same URL Most of the content has changed, but I’m still at http://maps.google.com/
    48. 48. Still at the Same URL Most of the content has changed, but I’m still at http://maps.google.com/
    49. 49. Ajax in Rails There are many ways to handle Ajax with Rails
    50. 50. Rails has Ajax Support Built-in
    51. 51. Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago
    52. 52. Rails has Ajax Support Built-in Rails added a slew of Ajax helpers many versions ago At the time, they were very impressive
    53. 53. 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?)
    54. 54. 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
    55. 55. 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
    56. 56. 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
    57. 57. Unobtrusive JavaScript
    58. 58. Unobtrusive JavaScript Behavior (JavaScript) should be separated from presentation (HTML and CSS)
    59. 59. Unobtrusive JavaScript Behavior (JavaScript) should be separated from presentation (HTML and CSS) We should progressively enhance pages with functionality
    60. 60. 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
    61. 61. jQuery
    62. 62. jQuery Rails uses the Prototype and script.aculo.us libraries
    63. 63. jQuery Rails uses the Prototype and script.aculo.us libraries I prefer jQuery
    64. 64. 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
    65. 65. 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
    66. 66. 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
    67. 67. 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
    68. 68. jQuery Crash Course
    69. 69. jQuery Crash Course Run when the DOM is ready: jQuery(function() { });
    70. 70. jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autofill’)
    71. 71. jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autofill’) Run on click: $(‘…’).click(function() { });
    72. 72. jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autofill’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { });
    73. 73. jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autofill’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { }); Change content: $(‘…’).html(content);
    74. 74. jQuery Crash Course Run when the DOM is ready: jQuery(function() { }); Select with CSS: $(‘form#data input.autofill’) Run on click: $(‘…’).click(function() { }); Run on submit: $(‘form’).submit(function() { }); Change content: $(‘…’).html(content); Append content: $(‘…’).append(content);
    75. 75. Ajax With jQuery jQuery gives you full control over how the Ajax request is executed
    76. 76. $.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
    77. 77. $.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
    78. 78. $.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
    79. 79. $.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
    80. 80. $.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
    81. 81. An Example Let’s take a look at an Ajax request in action
    82. 82. Commenting via Ajax
    83. 83. Commenting via Ajax Let’s take a working blog comment system and convert it to use Ajax (when JavaScript is available)
    84. 84. 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
    85. 85. 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
    86. 86. 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
    87. 87. An Article With Comments This is a trivial blog like interface, allowing users to comment on articles
    88. 88. An Article With Comments This is a trivial blog like interface, allowing users to comment on articles
    89. 89. A Full Page Refresh We loaded a lot of content that didn’t change just to add that little comment
    90. 90. A Full Page Refresh We loaded a lot of content that didn’t change just to add that little comment
    91. 91. A Full Page Refresh We loaded a lot of content that didn’t change just to add that little comment
    92. 92. A Full Page Refresh We loaded a lot of content that didn’t change just to add that little comment
    93. 93. Add JavaScript I have loaded jQuery from Google and my own JavaScript file
    94. 94. <!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> <%= flash_messages %> <%= yield %> </body> </html> Add JavaScript I have loaded jQuery from Google and my own JavaScript file
    95. 95. <!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> <%= flash_messages %> <%= yield %> </body> </html> Add JavaScript I have loaded jQuery from Google and my own JavaScript file
    96. 96. <!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> <%= flash_messages %> <%= yield %> </body> </html> Add JavaScript I have loaded jQuery from Google and my own JavaScript file
    97. 97. Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation
    98. 98. <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_field :article_id %> <%= f.label :author %><br> <%= f.text_field :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">&nbsp;</span> <% end %> Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation
    99. 99. <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_field :article_id %> <%= f.label :author %><br> <%= f.text_field :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">&nbsp;</span> <% end %> Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation
    100. 100. <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_field :article_id %> <%= f.label :author %><br> <%= f.text_field :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">&nbsp;</span> <% end %> Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation
    101. 101. <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_field :article_id %> <%= f.label :author %><br> <%= f.text_field :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">&nbsp;</span> <% end %> Prepare Form I have added a little structure to the document to assist me with the JavaScript manipulation
    102. 102. Build Ajax Request We can pull the request details from the form, but we have to do some manual interface work
    103. 103. 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('&nbsp;'); 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
    104. 104. 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('&nbsp;'); 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
    105. 105. 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('&nbsp;'); 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
    106. 106. 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('&nbsp;'); 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
    107. 107. 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('&nbsp;'); 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
    108. 108. Respond to Ajax Remember XMLHttpRequest (“xhr”)? We respond with just the comment.
    109. 109. class CommentsController < ApplicationController def create @comment = Comment.new(params[:comment]) if @comment.save if request.xhr? render @comment else flash[:notice] = "Comment added." redirect_to article_path(@comment.article) end else if request.xhr? render :status => 403 else flash[: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.
    110. 110. class CommentsController < ApplicationController def create @comment = Comment.new(params[:comment]) if @comment.save if request.xhr? render @comment else flash[:notice] = "Comment added." redirect_to article_path(@comment.article) end else if request.xhr? render :status => 403 else flash[: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.
    111. 111. class CommentsController < ApplicationController def create @comment = Comment.new(params[:comment]) if @comment.save if request.xhr? render @comment else flash[:notice] = "Comment added." redirect_to article_path(@comment.article) end else if request.xhr? render :status => 403 else flash[: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.
    112. 112. class CommentsController < ApplicationController def create @comment = Comment.new(params[:comment]) if @comment.save if request.xhr? render @comment else flash[:notice] = "Comment added." redirect_to article_path(@comment.article) end else if request.xhr? render :status => 403 else flash[: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.
    113. 113. Sending Ajax I have provided some interface clues so the user knows work is in progress
    114. 114. Sending Ajax I have provided some interface clues so the user knows work is in progress
    115. 115. Sending Ajax I have provided some interface clues so the user knows work is in progress
    116. 116. Ajax Complete This time we loaded much less data, but we had to do more interface cleanup
    117. 117. Ajax Complete This time we loaded much less data, but we had to do more interface cleanup
    118. 118. Ajax Complete This time we loaded much less data, but we had to do more interface cleanup
    119. 119. Ajax Complete This time we loaded much less data, but we had to do more interface cleanup
    120. 120. Mind the Details
    121. 121. Mind the Details With Ajax, you need to manage the interface details
    122. 122. Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator
    123. 123. Mind the Details With Ajax, you need to manage the interface details I added a “Saving…” indicator I disabled the “Comment” button
    124. 124. 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 finished
    125. 125. 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 finished I cleared the form for new entries
    126. 126. 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 finished I cleared the form for new entries I showed a reasonable error message for failure
    127. 127. Questions?
    128. 128. Ajax Lab Your book has instructions on how to add some Ajax page manipulations to your application
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×