Your SlideShare is downloading. ×
0
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript the Smart Way - Getting Started with jQuery

9,534

Published on

An introduction to jQuery aimed at Drupal themers and developers. Briefly covers using ajax in Drupal.

An introduction to jQuery aimed at Drupal themers and developers. Briefly covers using ajax in Drupal.

Published in: Business, Technology
2 Comments
7 Likes
Statistics
Notes
  • Thanks...Nice presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is an error on this slide: when it says themers should make their call to drupal_add_js() from a tpl file, this is incorrect - it is too late at the tpl stage to add the JavaScript because the scripts variable has already been populated. You should call drupal_add_js() from your template.php file.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,534
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
272
Comments
2
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript the Smart Way Getting Started with jQuery Drupal User Group presentation
  • 2. Introduction to jQuery • JavaScript / jQuery / AJAX - what’s the difference? – JavaScript is a scripting language that adds interactivity to web pages – jQuery is a JavaScript Framework – AJAX is a particular type of functionality • JavaScript is to jQuery as PHP is to Drupal
  • 3. Introduction to jQuery • What can jQuery do for me? “FLASH”Y STUFF AJAX TABS
  • 4. Introduction to jQuery • Advantages of jQuery over plain JavaScript – Simplifies cross-browser issues – You don’t have to write the same code over and over again • Advantages of jQuery over other JS frameworks – Very concise code – Small file size – completely open source – Plugin architecture
  • 5. jQuery Basics • What do I need to get started? – An understanding of CSS and the DOM – Basic understanding of JS syntax (ideally!) – jQuery itself http://docs.jquery.com/Downloading_jQuery • $(document).ready(function(){ //let’s get started! });
  • 6. Selectors • CSS $(‘a’), $(‘#container’), $(‘div.ajaxContainer’), $(‘li:first-child’) • X-Path: $(‘a[title]’), $(‘div[ul]’), $(‘a[href^=“mailto:”]’) • Custom: $(‘li:eq(1)’), $(‘tr:not([th]):odd’)
  • 7. Some Useful Methods • DOM Traversal – .parent(), .siblings(), .next() • Manipulation – .html(), .empty(), .append(content) • Events – .ready(fn), .hover(fn1, fn2), .click(fn) • Effects – .slideToggle(), .show(), .hide()
  • 8. Chaining • $(‘#someElement’) .parent().parent() .find(‘div.green’) .hide().end() .siblings().find(‘div.blue’) .show().end() .parent().next() .addClass(‘redBorder’);
  • 9. Show/Hide Example $(document).ready(function() { $('a.showhide').click(function() { $(this).parent().parent() .find('div.view-data-body') .slideToggle(); return false; }); }); see example
  • 10. jQuery in Drupal • drupal_add_js($data, $type) – Add a JavaScript file, setting or inline code to the page, for example: • drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) .'/myjs.js'); • drupal_add_js(array(‘myjs’=>$mysettings), ‘setting’); • Drupal_add_js(‘var myVar = “foo”;’, ‘inline’); • Where do I put my code? – themers: put your .js file in your theme directory and call drupal_add_js(drupal_get_path(‘theme’, ‘mytheme’) . ‘myjs.js’) from a tpl file – module developers: put your .js file in your module directory and call drupal_add_js() before you output content
  • 11. Ajaxifying Drupal with jQuery • Basic essentials: – jQuery’s .ajax() or .get() method – drupal/path – callback function • drupal_to_js($var) – Converts a PHP variable into its JavaScript equivalent. • Drupal.parseJSON(data)
  • 12. Ajaxifying Drupal with jQuery 12
  • 13. Ajaxifying Drupal with jQuery ‣ $items[] = array('path' => 'ajax/path', 'type' => MENU_CALLBACK, 'access' => TRUE, 'callback' => 'get_ajax_image'); ‣ function get_ajax_image($nid) { //some code to retrieve the image print drupal_to_js(array( ‘title’ => $image_title, ‘path’ => $image_path )); }
  • 14. Ajaxifying Drupal with jQuery ‣ $(‘a.ajax-button’).click(function() { $.get(this.href, function(data){ var result = Drupal.parseJSON(data); $('div.title').html(result['title']); $('div.image').html(result['path']); }); return false; });
  • 15. Resources • http://jquery.com • Book: Learning jQuery » PACKT Publishing • Cheat sheets: » http://colorcharge.com/jquery • Other online resources » http://www.learningjquery.com » http://15daysofjquery.com » http://visualjquery.com
  • 16. Quick Tabs Create blocks of tabbed views! http://drupal.org/project/quicktabs
  • 17. Key Takeaways • jQuery is a framework for writing JavaScript • It is extremely concise and therefore easy to learn • It has a robust and efficient CSS-based selector mechanism for precise selection of DOM elements • It is modular, so non-standard features are available as plugins • AJAX is a piece of cake with jQuery • Drupal ships with jQuery already built in

×