Enviar pesquisa
Carregar
jQuery and Rails, Sitting in a Tree
•
8 gostaram
•
1,825 visualizações
A
adamlogic
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 47
Baixar agora
Baixar para ler offline
Recomendados
Sprout core and performance
Sprout core and performance
Yehuda Katz
J query training
J query training
FIS - Fidelity Information Services
JQuery introduction
JQuery introduction
NexThoughts Technologies
jQuery in 15 minutes
jQuery in 15 minutes
Simon Willison
jQuery
jQuery
Jay Poojara
Introduction to Web Components
Introduction to Web Components
Felix Arntz
jQuery secrets
jQuery secrets
Bastian Feder
jQuery
jQuery
Dileep Mishra
Recomendados
Sprout core and performance
Sprout core and performance
Yehuda Katz
J query training
J query training
FIS - Fidelity Information Services
JQuery introduction
JQuery introduction
NexThoughts Technologies
jQuery in 15 minutes
jQuery in 15 minutes
Simon Willison
jQuery
jQuery
Jay Poojara
Introduction to Web Components
Introduction to Web Components
Felix Arntz
jQuery secrets
jQuery secrets
Bastian Feder
jQuery
jQuery
Dileep Mishra
jQuery Presentation
jQuery Presentation
Rod Johnson
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
allilevine
jQuery for beginners
jQuery for beginners
Siva Arunachalam
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
Prototype & jQuery
Prototype & jQuery
Remy Sharp
Angular.js Fundamentals
Angular.js Fundamentals
Mark
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
Introduction to jQuery
Introduction to jQuery
manugoel2003
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Remy Sharp
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
jQuery Fundamentals
jQuery Fundamentals
Gil Fink
jQuery Best Practice
jQuery Best Practice
chandrashekher786
Get AngularJS Started!
Get AngularJS Started!
Dzmitry Ivashutsin
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs
jQuery
jQuery
Mohammed Arif
Event handling using jQuery
Event handling using jQuery
Iban Martinez
jQuery 1.7 Events
jQuery 1.7 Events
dmethvin
jQuery Essentials
jQuery Essentials
Marc Grabanski
jQuery
jQuery
Andrew Homeyer
Unit – II (1).pptx
Unit – II (1).pptx
DrDhivyaaCRAssistant
Mais conteúdo relacionado
Mais procurados
jQuery Presentation
jQuery Presentation
Rod Johnson
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
allilevine
jQuery for beginners
jQuery for beginners
Siva Arunachalam
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
Prototype & jQuery
Prototype & jQuery
Remy Sharp
Angular.js Fundamentals
Angular.js Fundamentals
Mark
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
Introduction to jQuery
Introduction to jQuery
manugoel2003
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Remy Sharp
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp
jQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
jQuery Fundamentals
jQuery Fundamentals
Gil Fink
jQuery Best Practice
jQuery Best Practice
chandrashekher786
Get AngularJS Started!
Get AngularJS Started!
Dzmitry Ivashutsin
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs
jQuery
jQuery
Mohammed Arif
Event handling using jQuery
Event handling using jQuery
Iban Martinez
jQuery 1.7 Events
jQuery 1.7 Events
dmethvin
jQuery Essentials
jQuery Essentials
Marc Grabanski
Mais procurados
(20)
jQuery Presentation
jQuery Presentation
Jqeury ajax plugins
Jqeury ajax plugins
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
WordCamp Montreal 2015: Combining Custom Post Types, Fields, and Meta Boxes t...
jQuery for beginners
jQuery for beginners
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
Prototype & jQuery
Prototype & jQuery
Angular.js Fundamentals
Angular.js Fundamentals
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Introduction to jQuery
Introduction to jQuery
DOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
jQuery from the very beginning
jQuery from the very beginning
jQuery Fundamentals
jQuery Fundamentals
jQuery Best Practice
jQuery Best Practice
Get AngularJS Started!
Get AngularJS Started!
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
jQuery
jQuery
Event handling using jQuery
Event handling using jQuery
jQuery 1.7 Events
jQuery 1.7 Events
jQuery Essentials
jQuery Essentials
Semelhante a jQuery and Rails, Sitting in a Tree
jQuery
jQuery
Andrew Homeyer
Unit – II (1).pptx
Unit – II (1).pptx
DrDhivyaaCRAssistant
jQuery
jQuery
Ivano Malavolta
Rails is not just Ruby
Rails is not just Ruby
Marco Otte-Witte
Understanding backbonejs
Understanding backbonejs
Nick Lee
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
LEDC 2016
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
Drupal & javascript
Drupal & javascript
Almog Baku
JQuery introduction
JQuery introduction
Pradeep Saraswathi
Introducing jQuery
Introducing jQuery
Wildan Maulana
jQuery secrets
jQuery secrets
Bastian Feder
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
Yearning jQuery
Yearning jQuery
Remy Sharp
jQuery's Secrets
jQuery's Secrets
Bastian Feder
The rise and fall of a techno DJ, plus more new reviews and notable screenings
The rise and fall of a techno DJ, plus more new reviews and notable screenings
chicagonewsyesterday
Bag Of Tricks From Iusethis
Bag Of Tricks From Iusethis
Marcus Ramberg
JQuery In Drupal
JQuery In Drupal
katbailey
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
jQuery, CSS3 and ColdFusion
jQuery, CSS3 and ColdFusion
Denard Springle IV
Semelhante a jQuery and Rails, Sitting in a Tree
(20)
jQuery
jQuery
Unit – II (1).pptx
Unit – II (1).pptx
jQuery
jQuery
Rails is not just Ruby
Rails is not just Ruby
Understanding backbonejs
Understanding backbonejs
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
Drupal & javascript
Drupal & javascript
JQuery introduction
JQuery introduction
Introducing jQuery
Introducing jQuery
jQuery secrets
jQuery secrets
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Yearning jQuery
Yearning jQuery
jQuery's Secrets
jQuery's Secrets
The rise and fall of a techno DJ, plus more new reviews and notable screenings
The rise and fall of a techno DJ, plus more new reviews and notable screenings
Bag Of Tricks From Iusethis
Bag Of Tricks From Iusethis
JQuery In Drupal
JQuery In Drupal
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
jQuery, CSS3 and ColdFusion
jQuery, CSS3 and ColdFusion
Último
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
Lars Bell
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
blackmambaettijean
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Rick Flair
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Último
(20)
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
jQuery and Rails, Sitting in a Tree
1.
Adam McCrea
adam@edgecase.com @adamlogic
2.
AGENDA
Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way
3.
JQUERY RECIPE
1. Select some HTML elements. 2. Call methods on them. 3. Repeat. $("p.neat").addClass("ohmy").show("slow");
4.
5.
$() == jQuery()
6.
CSS Selector
<p> <p> $("p.neat") <p> <p> <p> <p>
7.
CSS Selector
jQuery Wrapper <p> <p> $("p.neat") <p> <p> <p> <p>
8.
jQuery Wrapper Methods $("p.neat").addClass("ohmy").show("slow");
9.
10.
jQuery Wrapper
<p> <p> <p> <p>
11.
jQuery function always
returns jQuery wrapper $(...) ALWAYS
12.
Write your own
wrapper method $.fn.log = function() { console.log(this); return this; } $("p.neat").log().show("slow");
13.
Events
14.
html <a onclick="alert('I was clicked');
return false;">
15.
html <a class="clickme">
script $('a.clickme').bind('click', function(event) { alert('I was clicked!'); event.preventDefault(); });
16.
html <a class="clickme">
script $('a.clickme').live('click', function(event) { alert('I was clicked!'); event.preventDefault(); });
17.
REVISITED
18.
$(css_selector) $(dom_element) $(html_string) $(function)
$()
19.
$(function() { $('a.clickme').live('click', function(event) {
alert('I was clicked!'); event.preventDefault(); }); });
20.
AGENDA ✓
Intro to jQuery jQuery with Rails 3 jQuery with Rails 2 Beyond the Rails (Ajax) Way
21.
JQUERY + RAILS
3 Include jquery.js and rails.js Include csrf_meta_tags :remote => true Render .js.erb templates
22.
23.
<!DOCTYPE html> <html> <head> <title>Example</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag
'jquery', 'rails' %> <%= csrf_meta_tag %> </head> <body> <%= link_to 'view', item, :remote => true %> </body> </html>
24.
<%= csrf_meta_tag %> <%= link_to 'view',
item, :remote => true %>
25.
<meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %> <%= link_to 'view', item, :remote => true %>
26.
<meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %>
27.
<meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %> :confirm and :method also available
28.
rails.js $('form[data-remote]').live('submit', function(e) { $(this).callRemote(); e.preventDefault(); }); $('a[data-remote],input[data-remote]').live('click', function(e) { $(this).callRemote(); e.preventDefault(); });
29.
create.js.rjs page.insert_html :bottom, :items,
:partial => 'item', :object => @item page.replace_html :item_count, pluralize(@items.size, 'item') page[:new_item_form].toggle
30.
create.js.rjs page.insert_html :bottom, :items,
:partial => 'item', :object => @item page.replace_html :item_count, pluralize(@items.size, 'item') page[:new_item_form].toggle create.js.erb $('#items').append(<%= render(:partial => 'item', :object => @item).to_json %>); $('#item_count').html('<%= pluralize(@items.size, "item") %>'); $('#new_item_form').toggle()
31.
JQUERY + RAILS
3 ✓ Include jquery.js and rails.js ✓Include csrf_meta_tags ✓ ✓ :remote => true ✓ Render .js.erb templates
32.
2
JQUERY + RAILS X 3 Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true Render .js.erb templates
33.
2
JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates
34.
<meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/>
<%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %>
35.
Rack::Utils.escape_html(request_forgery_protection_token)
Rack::Utils.escape_html(form_authenticity_token) <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/> <%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, :remote => true %>
36.
Rack::Utils.escape_html(request_forgery_protection_token)
Rack::Utils.escape_html(form_authenticity_token) <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="m3nej8PL1UVZt6ZOak1yugukEQ="/> <%= csrf_meta_tag %> <a href="/item/1" data-remote="true">view</a> <%= link_to 'view', item, 'data-remote' => true %>
37.
2
JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js Include csrf_meta_tags ✓ :remote => true ✓ Render .js.erb templates
38.
2
JQUERY + RAILS X 3 ✓ Include jquery.js and rails.js ✓Reproduce csrf_meta_tags ✓ ✓‘data-remote’ => true ✓ Render .js.erb templates
39.
AGENDA ✓
Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 Beyond the Rails (Ajax) Way
40.
AJAX REQUEST browser
app JAVASCRIPT
41.
AJAX REQUEST browser
app JSON
42.
template <%= link_to 'view', '/item/1',
'data-remote' => true, 'data-type' => 'json' %>
43.
controller def create item = Item.create(params[:item]) render :json =>
{ :errors => item.errors, :item_count => Item.count, :html => render_to_string(:partial => 'item', :object => item) } end
44.
application.js $('#new_item_form').live('ajax:success', function(xhr, data) { if (data.errors.length) { alert(data.errors); } else { $('#items').append(data.html); $('#item_count').html(data.item_count); $(this).hide(); } });
45.
rails.js $.ajax({ url: url, data: data, dataType:
dataType, type: method.toUpperCase(), beforeSend: function (xhr) { el.trigger('ajax:loading', xhr); }, success: function (data, status, xhr) { el.trigger('ajax:success', [data, status, xhr]); }, complete: function (xhr) { el.trigger('ajax:complete', xhr); }, error: function (xhr, status, error) { el.trigger('ajax:failure', [xhr, status, error]); } });
46.
AGENDA
✓ Intro to jQuery ✓ jQuery with Rails 3 ✓ jQuery with Rails 2 ✓ Beyond the Rails (Ajax) Way
47.
Thanks! Adam McCrea
adam@edgecase.com @adamlogic Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg
Baixar agora