Date post: | 10-May-2015 |
Category: |
Technology |
Upload: | alan-hecht |
View: | 22,036 times |
Download: | 0 times |
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