Drupal DOMinateStories of masochism on the front end

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

AgendaSteve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Worst Practices

Best Practices

Drupal.behaviors{}

Drupal.settings{}

Questions

Don’t hack coreIf I update jQuery versions it works it doesn’t work!

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Stories from the front-end lines

Better/Best PracticesSteve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

jQuery Update modulehttp://drupal.org/project/jquery_update

Using closurehttp://drupal.org/project/jqmulti

Drupal DOM objectWhip out your web inspector, firebug, dev tool flavor and take a peek

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Drupal {}

Drupal.settings{}

Drupal.theme()Drupal.locale{}

Drupal.behaviors{}

Drupal.jsLet’s have a read

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'locale': {} };

Drupal.behaviorsMan I wish I knew that before

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Drupal.behaviorsMan I wish I knew that before

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

So how should I load my script on the page?

Drupal.behaviorsMan I wish I knew that before

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Drupal.behaviorsMan I wish I knew that before

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Drupal.attachBehaviors();

Drupal.behaviorsMan I wish I knew that before

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

$(“#element”).doSomething();

$(“#element:not(.processed)”).addClass(‘processed’).doSomething();

vs

Drupal.settingsAnother way of using drupal_add_js

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Drupal.settingsAnother way of using drupal_add_js

Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

Sources Steve Rifkin & Matt Wrather LA Drupal 5-14-2013 @steverifkin @mwrather

http://api.drupal.org/api/drupal/developer!topics!javascript_startup_guide.html/6

http://drupal.org/node/304258

http://drupal.org/project/jqmulti

https://drupal.org/node/121997