jQuery & AJAXwith Rails

Alan Hechthttp://alanhecht.me

Additional FirefoxDebugging 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 & HttpFoxDemo

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/ RailsInstallation Demo

Key Conceptsfor

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 JavaScriptIssues

• 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 callsettings: 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