SlideShare a Scribd company logo
JavaScript in Drupal 7:

WHAT DEVELOPERS NEED TO KNOW




                               October 24th, 2009
PROBLEM:

jQuery’s use of the $ can interfere with other
libraries.

D6:
$(document).ready(function(){

      ....

});


                                         October 24th, 2009
SOLUTION:

Wrap everthing in the following:


(function($) {

  ....

})(jQuery);




                                   October 24th, 2009
PROBLEM:

Not enough flexibility in how we can add js to our Drupal pages:

 - can’t fully control the ordering of js files

 - can’t load external js

D6:

drupal_add_js(‘path/to/some_js_file.js’, ‘module’, ‘header’);




                                                  October 24th, 2009
SOLUTION:

drupal_add_js() now allows you to add a weight value to each script
you’re adding:
  - JS_LIBRARY: Any libraries, settings, or jQuery plugins.
  - JS_DEFAULT: Any module-layer JavaScript.
  - JS_THEME: Any theme-layer JavaScript.

 drupal_add_js('jQuery(document).ready(function ()
{ alert("Hello!"); });', array('type' => 'inline', 'scope' => 'footer',
'weight' => 5);



                                                          October 24th, 2009
SOLUTION:

drupal_add_js() allows you to load external js files:

drupal_add_js('http://example.com/example.js', 'external');




                                                       October 24th, 2009
PROBLEM:

Some JavaScript code is being provided by core or some contrib
module but it’s not the most up-to-date version.




                                                 October 24th, 2009
SOLUTION:

hook_js_alter()

function hook_js_alter(&$javascript) {
  // Swap out jQuery to use an updated version of the library.
  $javascript['misc/jquery.js']['data'] = drupal_get_path('module',
'jquery_update') . '/jquery.js';
}




                                                             October 24th, 2009
Renderable arrays and #attached js:


function render_my_content() {
  $build['myelement'] = array(
    '#theme' => 'my_theme_function',
    '#myvar' => $myvar,
    '#attached' => array('js' => drupal_get_path('module', 'mymodule') .
'/myjs.js', 'css' => drupal_get_path('module', 'mymodule') . '/
styles.css'),
  );
  $output = drupal_render($build);
  return $output;
}




                                                      October 24th, 2009
PROBLEM:

There’s no standard way of adding collections of JavaScript and
CSS, such as jQuery plugins




                                                  October 24th, 2009
SOLUTION: Libraries
                      function system_library() {
                        ...
                        // Vertical Tabs.
                        $libraries['vertical-tabs'] = array(
                           'title' => 'Vertical Tabs',
                           'website' => 'http://drupal.org/node/323112',
                           'version' => '1.0',
hook_library()             'js' => array(
                              'misc/vertical-tabs.js' => array(),
                           ),
                           'css' => array(
                              'misc/vertical-tabs.css' => array(),
                           ),
                        );
                        ...
                        return $libraries;
                      }




                                                          October 24th, 2009
function mymodule_library() {
SOLUTION: Libraries     $libraries['mylibrary'] = array(
                           'title' => 'An Awesome Library',
                           'website' => 'http://example.com/library',
                           'version' => '3.1-beta1',
                           'js' => array(
                              // JavaScript settings may use the 'data' key.
                              array(
                                 'type' => 'setting',
                                 'data' => array('mylibrary' => TRUE),
hook_library()                ),
                           ),
                           'dependencies' => array(
                              // Require jQuery UI core by System module.
                              array('system' => 'ui'),
                              // Require our other library.
                              array('mymodule', 'library-1'),
                              // Require another library.
                              array('other_module', 'library-2'),
                           ),
                        );
                        return $libraries;
                      }


                                                          October 24th, 2009
SOLUTION: Libraries

                        function theme_vertical_tabs($variables) {
                          $element = $variables['element'];
                          // Add required JavaScript and Stylesheet.
                          drupal_add_library('system', 'vertical-
drupal_add_libarary()   tabs');

                          return '<div class="vertical-tabs-panes">' .
                        $element['#children'] . '</div>';
                        }




                                                  October 24th, 2009
PROBLEM:

AHAH forms make people want to jump out the window of very tall
buildings




                                               October 24th, 2009
AHAH in D6.... ugh!
function quicktabs_ahah() {
  $form_state = array('storage' => NULL, 'submitted' => FALSE);
  $form_build_id = $_POST['form_build_id'];
  $form = form_get_cache($form_build_id, $form_state);
  $args = $form['#parameters'];
  $form_id = array_shift($args);
  $form['#post'] = $_POST;
  $form['#redirect'] = FALSE;
  $form['#programmed'] = FALSE;
  $form_state['post'] = $_POST;
  drupal_process_form($form_id, $form, $form_state);
  $form = drupal_rebuild_form($form_id, $form_state, $args, $form_build_id);
  $qt_form = $form['qt_wrapper']['tabs'];
  unset($qt_form['#prefix'], $qt_form['#suffix']); // Prevent duplicate wrappers.
  $javascript = drupal_add_js(NULL, NULL, 'header');
  drupal_json(array(
    'status'   => TRUE,
    'data'     => theme('status_messages') . drupal_render($qt_form),
    'settings' => call_user_func_array('array_merge_recursive',
$javascript['setting']),
  ));
}


                                                                         October 24th, 2009
AJAX in D7.... :-)




function quicktabs_ajax($form, $form_state) {
  $form_tabs = $form['qt_wrapper']['tabs'];
  $output = drupal_render($form_tabs);
  return $output;
}




                                                October 24th, 2009
SOLUTION:

There’s now a framework for ajax in Drupal

Merlinofchaos has done all the hard work, so you don’t have to! :-)




                                                       October 24th, 2009
PROBLEM:

Ajax-loaded content doesn’t get behaviors attached to it if they
depend on Drupal.settings




                                                   October 24th, 2009
SOLUTION:

Drupal.attachBehaviors now takes a second parameter, which is the
local settings for the portion of the DOM it’s attaching behaviors to:

Drupal.attachBehaviors(context, settings)




                                                        October 24th, 2009
To have the settings available for your ajax-loaded content:

- your ajax callback must make a call to drupal_add_js to grab the
JavaScript for the output it’s rendering

- it must return the settings array as part of its response

- when your ajax success function makes a call to
Drupal.attachBehaviors, it must pass in the settings from the
response.




                                                    October 24th, 2009
function quicktabs_ajax_qtabs($qtid) {
  $tabpage = array(
    'type' => 'qtabs',
    'qtid' => $qtid,
  );

  $output = quicktabs_render_tabpage($tabpage);

  $scripts = drupal_add_js(NULL, NULL);
  $settings = call_user_func_array('array_merge_recursive', $scripts['settings']
['data']);
  drupal_json_output(array('status' => TRUE, 'data' => $output, 'settings' =>
$settings));
}




                                                             October 24th, 2009
Drupal.quicktabs.tab.prototype.success = function(response) {
  var result = Drupal.parseJson(response.data);
  this.container.append(Drupal.theme('quicktabsResponse', this,
result));
  Drupal.attachBehaviors(this.container, response.settings);
}




                                                 October 24th, 2009
Drupal.behaviors.quicktabs = {
  attach: function (context, settings) {
    $.extend(true, Drupal.settings, settings);
    $('.quicktabs_wrapper:not(.quicktabs-processed)',
context).addClass('quicktabs-processed').each(function(){
      Drupal.quicktabs.prepare(this);
    });
  }
}




                                               October 24th, 2009
jQuery UI is in core

- accordion            - progressbar   effects:

- datepicker           - resizable     - bounce

- dialog               - selectable    - explode

- draggable            - sortable      - fold

- droppable            - tabs          - pulsate



                                           October 24th, 2009
jQuery UI is in core
function render_accordion_block() {
  $build['myelement'] = array(
    '#theme' => 'my_accordion',
  );
  $build['myelement']['#attached']['library'][] = array('system',
'ui.accordion');
  $build['myelement']['#attached']['js'][] = array('data' =>
'(function($){$(function() { $("#accordion").accordion(); })})(jQuery);',
'type' => 'inline');
  $output = drupal_render($build);
  return $output;
}




                                                      October 24th, 2009
Miscellaneous Changes:

- Drupal.behaviors are now attached and detached

- drupal_to_js is now drupal_json_encode

- drupal_json is now drupal_json_output

- use jQuery.once() to attach a behaviour once




                                                   October 24th, 2009
QUESTIONS?




             October 24th, 2009

More Related Content

What's hot (20)

Drupal Development
Drupal DevelopmentDrupal Development
Drupal Development
Jeff Eaton
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)
Jeff Eaton
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex Devs
Aaronius
 
Drupal Step-by-Step: How We Built Our Training Site, Part 1
Drupal Step-by-Step: How We Built Our Training Site, Part 1Drupal Step-by-Step: How We Built Our Training Site, Part 1
Drupal Step-by-Step: How We Built Our Training Site, Part 1
Acquia
 
Drupal 8: Fields reborn
Drupal 8: Fields rebornDrupal 8: Fields reborn
Drupal 8: Fields reborn
Pablo López Escobés
 
Doctrine 2
Doctrine 2Doctrine 2
Doctrine 2
zfconfua
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
Eyal Vardi
 
How Not to Build a WordPress Plugin
How Not to Build a WordPress PluginHow Not to Build a WordPress Plugin
How Not to Build a WordPress Plugin
Will Norris
 
Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal core
Marcin Wosinek
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
Darren Mothersele
 
Drupal Module Development
Drupal Module DevelopmentDrupal Module Development
Drupal Module Development
ipsitamishra
 
AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS Overview
Eyal Vardi
 
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to zАнатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
LEDC 2016
 
An Introduction to Drupal
An Introduction to DrupalAn Introduction to Drupal
An Introduction to Drupal
Compare Infobase Limited
 
Drupal 8 Services
Drupal 8 ServicesDrupal 8 Services
Drupal 8 Services
Philip Norton
 
Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Forms
drubb
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
Brian Hogg
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
Nishan Subedi
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & More
drubb
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
 
Drupal Development
Drupal DevelopmentDrupal Development
Drupal Development
Jeff Eaton
 
Drupal Development (Part 2)
Drupal Development (Part 2)Drupal Development (Part 2)
Drupal Development (Part 2)
Jeff Eaton
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex Devs
Aaronius
 
Drupal Step-by-Step: How We Built Our Training Site, Part 1
Drupal Step-by-Step: How We Built Our Training Site, Part 1Drupal Step-by-Step: How We Built Our Training Site, Part 1
Drupal Step-by-Step: How We Built Our Training Site, Part 1
Acquia
 
Doctrine 2
Doctrine 2Doctrine 2
Doctrine 2
zfconfua
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
Eyal Vardi
 
How Not to Build a WordPress Plugin
How Not to Build a WordPress PluginHow Not to Build a WordPress Plugin
How Not to Build a WordPress Plugin
Will Norris
 
Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal core
Marcin Wosinek
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
Darren Mothersele
 
Drupal Module Development
Drupal Module DevelopmentDrupal Module Development
Drupal Module Development
ipsitamishra
 
AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS Overview
Eyal Vardi
 
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to zАнатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
LEDC 2016
 
Drupal 8: Forms
Drupal 8: FormsDrupal 8: Forms
Drupal 8: Forms
drubb
 
Introduction to backbone presentation
Introduction to backbone presentationIntroduction to backbone presentation
Introduction to backbone presentation
Brian Hogg
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
Nishan Subedi
 
Drupal 8: Routing & More
Drupal 8: Routing & MoreDrupal 8: Routing & More
Drupal 8: Routing & More
drubb
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
 

Similar to JavaScript in Drupal 7: What developers need to know (20)

Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupal
jhamiltoorion
 
Introduction to new technologies in drupal 8
Introduction to new technologies in drupal 8Introduction to new technologies in drupal 8
Introduction to new technologies in drupal 8
naxoc
 
Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8
Théodore Biadala
 
Drupal 7 Theming - Behind the scenes
Drupal 7 Theming - Behind the scenes Drupal 7 Theming - Behind the scenes
Drupal 7 Theming - Behind the scenes
ramakesavan
 
Drupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First StepsDrupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First Steps
Luís Carneiro
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
katbailey
 
jQuery for Drupal
jQuery for DrupaljQuery for Drupal
jQuery for Drupal
jhamiltoorion
 
jQuery for Drupal
jQuery for DrupaljQuery for Drupal
jQuery for Drupal
jhamiltoorion
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
katbailey
 
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
camp_drupal_ua
 
2007 Fsoss Drupal Under The Hood
2007 Fsoss Drupal Under The Hood2007 Fsoss Drupal Under The Hood
2007 Fsoss Drupal Under The Hood
James Walker
 
Theme like a monster #ddceu
Theme like a monster #ddceuTheme like a monster #ddceu
Theme like a monster #ddceu
Marek Sotak
 
Introduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScriptIntroduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScript
Jakob Torp
 
Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQueryDrupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery
Matt Butcher
 
Drupal Render API
Drupal Render APIDrupal Render API
Drupal Render API
Pavel Makhrinsky
 
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
Ranel Padon
 
The Flexibility of Drupal 8
The Flexibility of Drupal 8The Flexibility of Drupal 8
The Flexibility of Drupal 8
Michael Miles
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
Emma Jane Hogbin Westby
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practices
Synapseindiappsdevelopment
 
Leveraging the Chaos tool suite for module development
Leveraging the Chaos tool suite  for module developmentLeveraging the Chaos tool suite  for module development
Leveraging the Chaos tool suite for module development
zroger
 
Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupal
jhamiltoorion
 
Introduction to new technologies in drupal 8
Introduction to new technologies in drupal 8Introduction to new technologies in drupal 8
Introduction to new technologies in drupal 8
naxoc
 
Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8
Théodore Biadala
 
Drupal 7 Theming - Behind the scenes
Drupal 7 Theming - Behind the scenes Drupal 7 Theming - Behind the scenes
Drupal 7 Theming - Behind the scenes
ramakesavan
 
Drupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First StepsDrupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First Steps
Luís Carneiro
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
katbailey
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
katbailey
 
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
camp_drupal_ua
 
2007 Fsoss Drupal Under The Hood
2007 Fsoss Drupal Under The Hood2007 Fsoss Drupal Under The Hood
2007 Fsoss Drupal Under The Hood
James Walker
 
Theme like a monster #ddceu
Theme like a monster #ddceuTheme like a monster #ddceu
Theme like a monster #ddceu
Marek Sotak
 
Introduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScriptIntroduction to the wonderful world of JavaScript
Introduction to the wonderful world of JavaScript
Jakob Torp
 
Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQueryDrupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery
Matt Butcher
 
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
The Synergy of Drupal Hooks/APIs (Custom Module Development with ChartJS)
Ranel Padon
 
The Flexibility of Drupal 8
The Flexibility of Drupal 8The Flexibility of Drupal 8
The Flexibility of Drupal 8
Michael Miles
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
Emma Jane Hogbin Westby
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practices
Synapseindiappsdevelopment
 
Leveraging the Chaos tool suite for module development
Leveraging the Chaos tool suite  for module developmentLeveraging the Chaos tool suite  for module development
Leveraging the Chaos tool suite for module development
zroger
 
Ad

Recently uploaded (20)

ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Scott M. Graffius
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Mark Zuckerberg teams up with frenemy Palmer Luckey to shape the future of XR...
Scott M. Graffius
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdfTop 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
Top 25 AI Coding Agents for Vibe Coders to Use in 2025.pdf
SOFTTECHHUB
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Ad

JavaScript in Drupal 7: What developers need to know

  • 1. JavaScript in Drupal 7: WHAT DEVELOPERS NEED TO KNOW October 24th, 2009
  • 2. PROBLEM: jQuery’s use of the $ can interfere with other libraries. D6: $(document).ready(function(){ .... }); October 24th, 2009
  • 3. SOLUTION: Wrap everthing in the following: (function($) { .... })(jQuery); October 24th, 2009
  • 4. PROBLEM: Not enough flexibility in how we can add js to our Drupal pages: - can’t fully control the ordering of js files - can’t load external js D6: drupal_add_js(‘path/to/some_js_file.js’, ‘module’, ‘header’); October 24th, 2009
  • 5. SOLUTION: drupal_add_js() now allows you to add a weight value to each script you’re adding: - JS_LIBRARY: Any libraries, settings, or jQuery plugins. - JS_DEFAULT: Any module-layer JavaScript. - JS_THEME: Any theme-layer JavaScript. drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', array('type' => 'inline', 'scope' => 'footer', 'weight' => 5); October 24th, 2009
  • 6. SOLUTION: drupal_add_js() allows you to load external js files: drupal_add_js('http://example.com/example.js', 'external'); October 24th, 2009
  • 7. PROBLEM: Some JavaScript code is being provided by core or some contrib module but it’s not the most up-to-date version. October 24th, 2009
  • 8. SOLUTION: hook_js_alter() function hook_js_alter(&$javascript) { // Swap out jQuery to use an updated version of the library. $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update') . '/jquery.js'; } October 24th, 2009
  • 9. Renderable arrays and #attached js: function render_my_content() {   $build['myelement'] = array(     '#theme' => 'my_theme_function',     '#myvar' => $myvar,     '#attached' => array('js' => drupal_get_path('module', 'mymodule') . '/myjs.js', 'css' => drupal_get_path('module', 'mymodule') . '/ styles.css'),   );   $output = drupal_render($build);   return $output; } October 24th, 2009
  • 10. PROBLEM: There’s no standard way of adding collections of JavaScript and CSS, such as jQuery plugins October 24th, 2009
  • 11. SOLUTION: Libraries function system_library() { ... // Vertical Tabs. $libraries['vertical-tabs'] = array( 'title' => 'Vertical Tabs', 'website' => 'http://drupal.org/node/323112', 'version' => '1.0', hook_library() 'js' => array( 'misc/vertical-tabs.js' => array(), ), 'css' => array( 'misc/vertical-tabs.css' => array(), ), ); ... return $libraries; } October 24th, 2009
  • 12. function mymodule_library() { SOLUTION: Libraries $libraries['mylibrary'] = array( 'title' => 'An Awesome Library', 'website' => 'http://example.com/library', 'version' => '3.1-beta1', 'js' => array( // JavaScript settings may use the 'data' key. array( 'type' => 'setting', 'data' => array('mylibrary' => TRUE), hook_library() ), ), 'dependencies' => array( // Require jQuery UI core by System module. array('system' => 'ui'), // Require our other library. array('mymodule', 'library-1'), // Require another library. array('other_module', 'library-2'), ), ); return $libraries; } October 24th, 2009
  • 13. SOLUTION: Libraries function theme_vertical_tabs($variables) { $element = $variables['element']; // Add required JavaScript and Stylesheet. drupal_add_library('system', 'vertical- drupal_add_libarary() tabs'); return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>'; } October 24th, 2009
  • 14. PROBLEM: AHAH forms make people want to jump out the window of very tall buildings October 24th, 2009
  • 15. AHAH in D6.... ugh! function quicktabs_ahah() {   $form_state = array('storage' => NULL, 'submitted' => FALSE);   $form_build_id = $_POST['form_build_id'];   $form = form_get_cache($form_build_id, $form_state);   $args = $form['#parameters'];   $form_id = array_shift($args);   $form['#post'] = $_POST;   $form['#redirect'] = FALSE;   $form['#programmed'] = FALSE;   $form_state['post'] = $_POST;   drupal_process_form($form_id, $form, $form_state);   $form = drupal_rebuild_form($form_id, $form_state, $args, $form_build_id);   $qt_form = $form['qt_wrapper']['tabs'];   unset($qt_form['#prefix'], $qt_form['#suffix']); // Prevent duplicate wrappers.   $javascript = drupal_add_js(NULL, NULL, 'header');   drupal_json(array(     'status'   => TRUE,     'data'     => theme('status_messages') . drupal_render($qt_form),     'settings' => call_user_func_array('array_merge_recursive', $javascript['setting']),   )); } October 24th, 2009
  • 16. AJAX in D7.... :-) function quicktabs_ajax($form, $form_state) {   $form_tabs = $form['qt_wrapper']['tabs'];   $output = drupal_render($form_tabs);   return $output; } October 24th, 2009
  • 17. SOLUTION: There’s now a framework for ajax in Drupal Merlinofchaos has done all the hard work, so you don’t have to! :-) October 24th, 2009
  • 18. PROBLEM: Ajax-loaded content doesn’t get behaviors attached to it if they depend on Drupal.settings October 24th, 2009
  • 19. SOLUTION: Drupal.attachBehaviors now takes a second parameter, which is the local settings for the portion of the DOM it’s attaching behaviors to: Drupal.attachBehaviors(context, settings) October 24th, 2009
  • 20. To have the settings available for your ajax-loaded content: - your ajax callback must make a call to drupal_add_js to grab the JavaScript for the output it’s rendering - it must return the settings array as part of its response - when your ajax success function makes a call to Drupal.attachBehaviors, it must pass in the settings from the response. October 24th, 2009
  • 21. function quicktabs_ajax_qtabs($qtid) {   $tabpage = array(     'type' => 'qtabs',     'qtid' => $qtid,   );   $output = quicktabs_render_tabpage($tabpage);   $scripts = drupal_add_js(NULL, NULL);   $settings = call_user_func_array('array_merge_recursive', $scripts['settings'] ['data']);   drupal_json_output(array('status' => TRUE, 'data' => $output, 'settings' => $settings)); } October 24th, 2009
  • 22. Drupal.quicktabs.tab.prototype.success = function(response) {   var result = Drupal.parseJson(response.data);   this.container.append(Drupal.theme('quicktabsResponse', this, result));   Drupal.attachBehaviors(this.container, response.settings); } October 24th, 2009
  • 23. Drupal.behaviors.quicktabs = {   attach: function (context, settings) {     $.extend(true, Drupal.settings, settings);     $('.quicktabs_wrapper:not(.quicktabs-processed)', context).addClass('quicktabs-processed').each(function(){       Drupal.quicktabs.prepare(this);     });   } } October 24th, 2009
  • 24. jQuery UI is in core - accordion - progressbar effects: - datepicker - resizable - bounce - dialog - selectable - explode - draggable - sortable - fold - droppable - tabs - pulsate October 24th, 2009
  • 25. jQuery UI is in core function render_accordion_block() {   $build['myelement'] = array(     '#theme' => 'my_accordion',   );   $build['myelement']['#attached']['library'][] = array('system', 'ui.accordion');   $build['myelement']['#attached']['js'][] = array('data' => '(function($){$(function() { $("#accordion").accordion(); })})(jQuery);', 'type' => 'inline');   $output = drupal_render($build);   return $output; } October 24th, 2009
  • 26. Miscellaneous Changes: - Drupal.behaviors are now attached and detached - drupal_to_js is now drupal_json_encode - drupal_json is now drupal_json_output - use jQuery.once() to attach a behaviour once October 24th, 2009
  • 27. QUESTIONS? October 24th, 2009