jQuery and AJAX with Rails
Upcoming SlideShare
Loading in...5

jQuery and AJAX with Rails



ATLRUG Emerald City Presentation - 3/26/2011

ATLRUG Emerald City Presentation - 3/26/2011



Total Views
Slideshare-icon Views on SlideShare
Embed Views



5 Embeds 8

http://www.linkedin.com 3
https://twitter.com 2
http://paper.li 1
https://abs.twimg.com 1
http://www.plurk.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    jQuery and AJAX with Rails jQuery and AJAX with Rails Presentation Transcript

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