jQuery and AJAX with Rails


Published on

ATLRUG Emerald City Presentation - 3/26/2011

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery and AJAX with Rails

  1. 1. jQuery & AJAX with Rails Alan Hecht http://alanhecht.me
  2. 2. Additional Firefox Debugging Tools <ul><ul><li>HttpFox </li></ul></ul><ul><ul><ul><li>Analyze incoming & outgoing HTTP traffic </li></ul></ul></ul><ul><ul><ul><li>Can filter on strings </li></ul></ul></ul><ul><ul><li>Visual Event </li></ul></ul><ul><ul><ul><li>JavaScript bookmarklet for examining JavaScript & jQuery events on a page </li></ul></ul></ul><ul><ul><ul><li>www.sprymedia.co.uk/article/Visual+Event </li></ul></ul></ul><ul><ul><ul><li>Copy to bookmark toolbar </li></ul></ul></ul><ul><ul><ul><li>Click on ‘Visual Event’ bookmark to show events </li></ul></ul></ul>
  3. 3. Visual Event & HttpFox Demo
  4. 4. Options for Using jQuery with Rails <ul><ul><li>Manually add jQuery to Rails </li></ul></ul><ul><ul><li>Install and run the jQuery Rails adapter gem </li></ul></ul>
  5. 5. Manual jQuery Installation <ul><ul><li>Add a copy of jQuery to ‘public/javascripts/ </li></ul></ul><ul><ul><li>Edit ‘config/application.rb’ to automatically load jQuery with each page </li></ul></ul><ul><ul><ul><li>Add the line: </li></ul></ul></ul><ul><ul><ul><li>Can always include jQuery with specific pages </li></ul></ul></ul>
  6. 6. jQuery Scripts <ul><ul><li>public/javascripts/application.js is loaded with every page </li></ul></ul><ul><ul><li>All other JavaScript files must be explicitly loaded unless added JavaScript default pages in ‘ config/application.rb ’ </li></ul></ul><ul><ul><li>JavaScript to be executed will be a function wrapped in the jQuery </li></ul></ul><ul><ul><li>$(document).ready( ) event </li></ul></ul>
  7. 7. jQuery w/ Rails Installation Demo
  8. 8. Key Concepts for Working with jQuery <ul><ul><ul><li>Unobtrusive JavaScript </li></ul></ul></ul><ul><ul><ul><li>AJAX </li></ul></ul></ul>
  9. 9. Unobtrusive JavaScript <ul><ul><li>Separation of JavaScript and HTML </li></ul></ul><ul><ul><ul><li>No in-line event handlers </li></ul></ul></ul><ul><ul><ul><li>All JavaScript code in external files </li></ul></ul></ul><ul><ul><li>Your site works with or without JavaScript </li></ul></ul><ul><ul><li>HTML should be just as accessible to those with disabilities or devices that don’t support JavaScript </li></ul></ul>
  10. 10. Unobtrusive JavaScript Issues <ul><ul><li>Need to design site for use with or without JavaScript </li></ul></ul><ul><ul><li>Doesn’t work with sites where JavaScript is integral to proper function </li></ul></ul><ul><ul><li>Biggest benefit is for designing sites for people with disabilities </li></ul></ul><ul><ul><ul><li>Mobile devices starting to have some form of Javascript support </li></ul></ul></ul>
  11. 11. AJAX <ul><ul><li>Asynchronous JavaScript and XML </li></ul></ul><ul><ul><li>Can call the web server without refreshing the entire page </li></ul></ul><ul><ul><li>Implemented with XMLHttpRequest </li></ul></ul><ul><ul><ul><li>Send data directly to web server </li></ul></ul></ul><ul><ul><ul><li>Response loaded directly into script </li></ul></ul></ul><ul><ul><ul><li>JSON commonly used instead of XML </li></ul></ul></ul>
  12. 12. jQuery Rails Adapter <ul><ul><li>Supports unobtrusive JavaScript for jQuery with Rails </li></ul></ul><ul><ul><li>Adds AJAX support </li></ul></ul><ul><ul><ul><li>Not necessary for AJAX but provides helpers </li></ul></ul></ul><ul><ul><ul><li>Site works both with & without AJAX </li></ul></ul></ul><ul><ul><li>Will be installed by default in Rails 3.1 </li></ul></ul>
  13. 13. jQuery Adapter Installation <ul><ul><li>Add ‘jquery-rails’ to Gemfile </li></ul></ul><ul><ul><ul><li>bundle install </li></ul></ul></ul><ul><ul><li>Set up Rails project to work with jQuery </li></ul></ul><ul><ul><ul><li>rails generate jquery:install </li></ul></ul></ul><ul><ul><ul><li>say ‘yes’ to overwrite rails.js </li></ul></ul></ul><ul><ul><li>Can skip Prototype installation in new Rails app </li></ul></ul><ul><ul><ul><li>rails new <application> --skip-prototype </li></ul></ul></ul>
  14. 14. AJAX Using jQuery Adapter <ul><ul><li>Implemented with unobtrusive JavaScript using custom attributes: </li></ul></ul><ul><ul><ul><li>data-method: HTTP method to call (PUT, GET, DELETE, or POST) </li></ul></ul></ul><ul><ul><ul><li>data-confirm: confirmation dialog before proceding </li></ul></ul></ul><ul><ul><ul><li>data-remote: submit via AJAX if true </li></ul></ul></ul><ul><ul><ul><li>data-disable-with: disable form elements during submission </li></ul></ul></ul>
  15. 15. HTML Changes <ul><ul><li>Add ‘:remote => true’ to link or submit button to execute using AJAX </li></ul></ul><ul><ul><li>is rendered as: </li></ul></ul>
  16. 16. Controller Changes <ul><ul><li>Need to respond to JavaScript in a similar manner to HTML </li></ul></ul><ul><ul><li>JavaScript will be sent to client to be executed </li></ul></ul>
  17. 17. View Changes <ul><ul><li>View file will contain JavaScript to be executed on the client </li></ul></ul><ul><ul><li>File will be similarly named as the HTML file (i.e. create.js.erb or destroy.js.erb) </li></ul></ul>
  18. 18. AJAX w/ jQuery Adapter Demo
  19. 19. AJAX w/ jQuery <ul><ul><li>AJAX support built into jQuery </li></ul></ul><ul><ul><ul><li>Good when a lot of functionality is on the client </li></ul></ul></ul><ul><ul><ul><li>Sites like Facebook limit server requests, so calls need to be made from client </li></ul></ul></ul><ul><ul><ul><li>Does not support unobtrusive JavaScript </li></ul></ul></ul>
  20. 20. $.ajax <ul><ul><li>The jQuery function upon which all AJAX calls are built </li></ul></ul><ul><ul><li>$.ajax(<url>, <settings>) </li></ul></ul><ul><ul><ul><li>url: the URL to call </li></ul></ul></ul><ul><ul><ul><li>settings: JSON object containing settings such as: </li></ul></ul></ul><ul><ul><ul><li>- HTTP call </li></ul></ul></ul><ul><ul><ul><li>- function to call if successful </li></ul></ul></ul>
  21. 21. $.ajax Example
  22. 22. Additional AJAX Methods <ul><ul><li>$.post(<url>, <data>, <success function>) </li></ul></ul><ul><ul><li>$.get(<url>, <data>, <success function>) </li></ul></ul>
  23. 23. jQuery AJAX Demo