SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
jQuery
             + Ruby + Rails
        Boston Ruby Group - July 2007

              John Resig (ejohn.org)
                Download this:
http://dev.jquery.com/~john/files/apple-demo.zip
What is jQuery?


• An open source JavaScript library that
  simplifies the interaction between HTML
  and JavaScript.
Why jQuery?
• Fully documented
• Great community
• Tons of plugins
• Small size (20kb)
• Everything works in IE 6+, Firefox,
  Safari 2+, and Opera 9+
Complete Focus:


• Find some elements
• Do something with them
Find Some Elements...

• Full CSS 1-3 Support
• Basic XPath
• Better CSS support than most browsers
$(“div”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“#body”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“div > div”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“div[div]”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
Features

• Events (click, hover, toggle)
• DOM Manipulation (append, prepend, remove)
• Effects (hide, show, slideDown, fadeOut)
• AJAX (load, get, post)
Events


• $(“form input:last”).click(function(){
    $(“#menu”).slideDown(“slow”);
  });
DOM Manipulation

• $(“a[@target]”)
        .append(“ (Opens in New Window)”);
• $(“#body”).css({
        border: “1px solid green”,
        height: “40px”
  });
Effects

• $(“#menu”).slideDown(“slow”);
• $(“div”).hide(500,function(){
        $(this).show(500);
  });
AJAX


• $(“#body”).load(“sample.html”);
• $.getScript(“test.js”);
Chaining

• $(“div”).hide();
• $(“div”).hide().color(”blue”);
• $(“div”).hide().color(”blue”).slideDown();
Live Demo
Accordion Menu
Plugins

• Drag and Drop
• Sortables
• Tabbed Navigation
• Sortable Tables
• And hundreds more...
Community

• Very active mailing list
 • 108+ Posts/Day
 • 2500+ Members
• Technorati: 22+ blog posts per day
Who uses jQuery?
• IBM
• MSNBC
• Technorati
• Drupal
• Wordpress
• Digg
• many others...
Books

• 4 Books in Progress:
 • Learning jQuery (Packt)
 • jQuery Reference (Packt)
 • jQuery Quickly (Manning)
 • Designing with jQuery (Manning)
Future

• “jQuery UI”
• Themeing
• Internationalization
Using jQuery with Rails

• Most jQuery use is non different than
  normal jQuery use
 • $(“div”).remove(); // works on any site
• Considerations come in with dealing with
  Ajax requests
Ajax and Rails
• Just another request to a controller/action
• You might want to respond like so:
     respond_to do |format|
      format.js { # do stuff }
     end
• jQuery sends the right headers so you can
  respond easily
Ajax with jQuery


• Typically, you’ll reply with an HTML chunk
• jQuery handles this gracefully:
  $(“#stuff”).load(“controller/action”);
Reply with JSON
• Sometimes you’ll want to reply with a data
   structure for further manipulation
• ActiveRecord objects have to_json
   serialization built in:
   quot;{attributes:{foo: quot;barquot;, baz: quot;batquot;}}quot;

• Or you can get specific: quot;{foo: quot;barquot;, baz: quot;batquot;}quot;
  @ar_object.attributes.to_json #=>
Where does the JS go?
• jQuery dictates good separation of
  content, style, and behavior
• Put all your code in application.js
• jQuery and Prototype can play nicely
  together:
  jQuery.noConflict();
  jQuery(function($){ /* your code */ });
• More info in the docs
Where’s RJS?

• RJS says that sending back code (from the
  server) is the best way to do things
• This is overkill, simplify and extract what
  you’re trying to achieve
RJS v. jQuery-style
• With RJS: id=’myid’ onclick=”return someFunction
  <a href=”#”
   (‘myid’);”>text</a>
   <a href=”#” id=’myid2’ onclick=”return someFunction
   (‘myid2’);”>text</a>

• With jQuery:
  <a href=”...” id=”myid”>text</a>
   <a href=”...” id=”myid2”>text</a>
   <script>$(“a”).click(someFunction);</script>
Helpers


• Say you have a link that makes an Ajax call
  and updates some div with the response:
  <a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a>

• You might write a simple line of jQuery
  code to handle it:
  $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href) })
Helpers (cont.)

• You could then write a Rails helper to
   reuse it:
   def remote_link text, url_hash, update = nil
    link_to(text, url_hash, :class => quot;remotequot;, :rel => update)
   end

• You could thenBazquot;, {:controller => quot;fooquot;,
                      call it as:
  remote_link quot;Update
    :action => quot;barquot;}, quot;#bazquot;
More info:
• jQuery with Rails:
  •   http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/

  •   http://yehudakatz.com/2007/05/18/railsconf-talk-recap/

• jQuery Rails Plugin:
  •   http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/

  •   http://yehudakatz.com/2007/05/25/10/

  •   http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/
jquery.com
docs.jquery.com - jquery.com/plugins
               More:
          visualjquery.com
        learningjquery.com

Contenu connexe

Plus de jeresig

Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Resultsjeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysisjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilejeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)jeresig
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScriptjeresig
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)jeresig
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)jeresig
 

Plus de jeresig (20)

Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScript
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)
 

Dernier

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 

Dernier (20)

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 

jQuery - Boston Ruby Group (July '07)

  • 1. jQuery + Ruby + Rails Boston Ruby Group - July 2007 John Resig (ejohn.org) Download this: http://dev.jquery.com/~john/files/apple-demo.zip
  • 2. What is jQuery? • An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • 3. Why jQuery? • Fully documented • Great community • Tons of plugins • Small size (20kb) • Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 4. Complete Focus: • Find some elements • Do something with them
  • 5. Find Some Elements... • Full CSS 1-3 Support • Basic XPath • Better CSS support than most browsers
  • 6. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 7. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 8. $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 9. $(“div[div]”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 10. Features • Events (click, hover, toggle) • DOM Manipulation (append, prepend, remove) • Effects (hide, show, slideDown, fadeOut) • AJAX (load, get, post)
  • 11. Events • $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  • 12. DOM Manipulation • $(“a[@target]”) .append(“ (Opens in New Window)”); • $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • 15. Chaining • $(“div”).hide(); • $(“div”).hide().color(”blue”); • $(“div”).hide().color(”blue”).slideDown();
  • 18. Plugins • Drag and Drop • Sortables • Tabbed Navigation • Sortable Tables • And hundreds more...
  • 19. Community • Very active mailing list • 108+ Posts/Day • 2500+ Members • Technorati: 22+ blog posts per day
  • 20. Who uses jQuery? • IBM • MSNBC • Technorati • Drupal • Wordpress • Digg • many others...
  • 21. Books • 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  • 22. Future • “jQuery UI” • Themeing • Internationalization
  • 23. Using jQuery with Rails • Most jQuery use is non different than normal jQuery use • $(“div”).remove(); // works on any site • Considerations come in with dealing with Ajax requests
  • 24. Ajax and Rails • Just another request to a controller/action • You might want to respond like so: respond_to do |format| format.js { # do stuff } end • jQuery sends the right headers so you can respond easily
  • 25. Ajax with jQuery • Typically, you’ll reply with an HTML chunk • jQuery handles this gracefully: $(“#stuff”).load(“controller/action”);
  • 26. Reply with JSON • Sometimes you’ll want to reply with a data structure for further manipulation • ActiveRecord objects have to_json serialization built in: quot;{attributes:{foo: quot;barquot;, baz: quot;batquot;}}quot; • Or you can get specific: quot;{foo: quot;barquot;, baz: quot;batquot;}quot; @ar_object.attributes.to_json #=>
  • 27. Where does the JS go? • jQuery dictates good separation of content, style, and behavior • Put all your code in application.js • jQuery and Prototype can play nicely together: jQuery.noConflict(); jQuery(function($){ /* your code */ }); • More info in the docs
  • 28. Where’s RJS? • RJS says that sending back code (from the server) is the best way to do things • This is overkill, simplify and extract what you’re trying to achieve
  • 29. RJS v. jQuery-style • With RJS: id=’myid’ onclick=”return someFunction <a href=”#” (‘myid’);”>text</a> <a href=”#” id=’myid2’ onclick=”return someFunction (‘myid2’);”>text</a> • With jQuery: <a href=”...” id=”myid”>text</a> <a href=”...” id=”myid2”>text</a> <script>$(“a”).click(someFunction);</script>
  • 30. Helpers • Say you have a link that makes an Ajax call and updates some div with the response: <a href='/foo/bar' rel='#baz' class='remote'>Update Baz</a> • You might write a simple line of jQuery code to handle it: $(quot;a.remotequot;).click(function() { $(this.rel).load(this.href) })
  • 31. Helpers (cont.) • You could then write a Rails helper to reuse it: def remote_link text, url_hash, update = nil link_to(text, url_hash, :class => quot;remotequot;, :rel => update) end • You could thenBazquot;, {:controller => quot;fooquot;, call it as: remote_link quot;Update :action => quot;barquot;}, quot;#bazquot;
  • 32. More info: • jQuery with Rails: • http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/ • http://yehudakatz.com/2007/05/18/railsconf-talk-recap/ • jQuery Rails Plugin: • http://yehudakatz.com/2007/05/17/jquery-on-rails-a-fresh-approach/ • http://yehudakatz.com/2007/05/25/10/ • http://yehudakatz.com/2007/05/26/jquery-on-rails-a-still-very-alpha-update/
  • 33. jquery.com docs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com