-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery-drupal-youre-probably-doing-it-wrong.html
166 lines (120 loc) · 16.4 KB
/
jquery-drupal-youre-probably-doing-it-wrong.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../sites/all/themes/sitetheme/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="description" content=""jQuery with Drupal: You're (Probably) Doing It Wrong" is for those of us who don’t fully understand how to write custom jQuery for a Drupal 7 project. Too many of us copy an example file, empty the middle, hack away until something works, slap it on the page, and run away screaming. It doesn’t have to be like that." />
<meta name="generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="../node/23.html" />
<link rel="shortlink" href="../node/23.html" />
<title>jQuery with Drupal: You're (Probably) Doing It Wrong | MidCamp</title>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- <a href="https://plus.google.com/105676072717448976925" rel="publisher" /> -->
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_Lwq5JSI1tGRjp1FRNxg5kt8fOiI4e0flzM6YeUq78u8.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_atkFGFlvG6sSQcIj6Q73rpgsXhtr58AwITc2aQjVotk.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_GSl0KrVrOmPGyWhvCYT4-PlK0I1rEce-UTDdvd4mKho.css" media="all" />
<script src="../sites/default/files/js/js_vDrW3Ry_4gtSYaLsh77lWhWjIC6ml2QNkcfvfP5CVFs.js"></script>
<script src="../sites/default/files/js/js_6RfqyQ6dGB15EZV8a7SPpd5EOSSerQR7s-GxPVyVTqA.js"></script>
<script src="../sites/default/files/js/js_I8yX6RYPZb7AtMcDUA3QKDZqVkvEn35ED11_1i7vVpc.js.html"></script>
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-60086119-1", {"cookieDomain":".2015.midcamp.org"});ga("set", "anonymizeIp", true);ga("send", "pageview");</script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"sitetheme","theme_token":"s-c33Y4Dw6HFgo0KS-dWV-gmoduHR5db4B5tZ9aK8sQ","js":{"sites\/all\/themes\/sitetheme\/js\/script.js":1,"sites\/all\/themes\/sitetheme\/js\/google_fonts.js":1,"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/tinycon.min.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/color.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"0":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all\/modules\/contrib\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/youtube\/css\/youtube.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/contrib\/panels\/css\/panels.css":1,"sites\/all\/themes\/sitetheme\/system.menus.css":1,"sites\/all\/themes\/sitetheme\/system.messages.css":1,"sites\/all\/themes\/sitetheme\/system.theme.css":1,"sites\/all\/themes\/sitetheme\/css\/styles.css":1}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackDomainMode":"1"}});</script>
<!--[if lt IE 9]>
<script src="/sites/all/themes/zen/js/html5-respond.js"></script>
<![endif]-->
</head>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-23 node-type-session section-session-proposal page-panels" >
<p id="skip-link">
<a href="../node/23.html#main-menu" class="element-invisible element-focusable">Jump to navigation</a>
</p>
<div class="header__top">
<div class="header__region region region-header">
<div id="block-system-user-menu" class="block block-system block-menu first odd" role="navigation">
<h2 class="block__title block-title">User menu</h2>
<ul class="menu"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul>
</div>
<div id="block-block-1" class="block block-block last even">
<p>March 19-22, 2015 at University of Illinois at Chicago (UIC)</p>
</div>
</div>
</div>
<div id="navigation" class="clearfix">
<div class="inner">
<a href="../index.html" title="Home" rel="home" class="logo-mobile">MidCamp</a>
<a class="links--mobile__title ss-icons ss-rows"></a>
<div class="links--mobile__container">
<input type="checkbox" id="toggle-button"><label for="toggle-button" onclick></label>
<div class="menus">
<nav id="user-menu" role="navigation" tabindex="-1"><ul class="menu--user-menu menu links"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul></nav> <nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-expanded first expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/15.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Camp<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/123.html" title="" class="menu__link">Buy Tickets</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/4.html" class="menu__link">Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/101.html" title="Navigating around the venue" class="menu__link">Closer Look at the Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../about/news.html" class="menu__link">News</a></li><li class="menu__item is-expanded expanded level-2"><a href="../community.1.html" class="menu__link">Community</a><nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-leaf first last leaf menu-item level-3"><a href="../community/all.html" class="menu__link">Community</a></li></ul></nav></li><li class="menu__item is-leaf leaf level-2"><a href="../node/158.html" class="menu__link">Speaker Resources</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/178.html" class="menu__link">Nearby Restaurants</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/58.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Schedule<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../schedule/friday.html" title="" class="menu__link">Friday schedule</a></li><li class="menu__item is-leaf leaf level-2"><a href="../schedule/saturday.html" title="" class="menu__link">Saturday schedule</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../sessions.html" title="" class="menu__link">Filterable Sessions</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../trainings.html" title="" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Training Day<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/145.html" class="menu__link">Absolute Beginners Guide to Drupal</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/139.html" class="menu__link">Behavior Driven Development with Behat</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/140.html" class="menu__link">Build. Launch. Run.</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/141.html" class="menu__link">Intro to Drupal 7 Module Development</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../sponsors.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Sponsors<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first last leaf level-2"><a href="../node/1.html" class="menu__link">Become a Sponsor</a></li></ul></li><li class="menu__item is-leaf last leaf menu-item level-1"><a href="../jobs.html" class="menu__link">Jobs</a></li></ul></nav></div>
</div>
</div>
</div>
<div class="header-wrapper">
<header class="header__region" id="header" role="banner">
<div class="header__badge">
<a href="../index.html" title="Home" rel="home" class="header__logo" id="logo"><img src="../sites/all/themes/sitetheme/logo.png" alt="Home" class="header__logo-image" /></a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<a href="../index.html" title="Home" class="header__site-link" rel="home"><span>MidCamp</span></a>
</h1>
<h1 class="page__title title session__title" id="page-title">jQuery with Drupal: You're (Probably) Doing It Wrong</h1>
</div>
</div>
</header>
</div>
<div id="page">
<div id="main">
<div id="content" class="column session-detail" role="main">
<nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="../index.html">Home</a></li></ol></nav> <a id="main-content"></a>
<article class="node-23 node node-session view-mode-full node--session__full clearfix">
<div class="field field-name-field-speakers field-type-entityreference field-label-inline clearfix"><div class="field-label">Speakers: </div><div class="field-items"><div class="field-item even">guschilds</div></div></div><div class="field field-name-field-track field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Track: </div><div class="field-items"><div class="field-item even">Coding</div><div class="field-item odd">Front End</div></div></div><div class="field field-name-field-audience field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Audience: </div><div class="field-items"><div class="field-item even">Intermediate</div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>jQuery may not be the talk of the town these days, but it remains an important piece of many Drupal projects. Unfortunately it is also one of the least understood.</p><p>This session is for those of us who don’t fully understand how to write custom jQuery for a Drupal 7 project. Too many of us copy an example file, empty the middle, hack away until something works, slap it on the page, and run away screaming. It doesn’t have to be like that.</p><p>A basic understanding of best practices and how Drupal works with jQuery goes a long way. It will improve the maintainability and performance of your Drupal project. Even better: it will restore your sanity.</p><p>This session will cover the following topics:</p><ul><li>the anatomy of a custom jQuery file within a Drupal theme or module</li><li>what behaviors are, how they work their magic, and how to use them</li><li>the many and best ways to add custom jQuery to the page</li><li>the Drupal JavaScript object and what it does</li><li>the future: jQuery in Drupal 8 (very brief)</li></ul><p>This session will not cover these topics in depth:</p><ul><li>AngularJS or other frameworks, libraries</li><li>how to write advanced jQuery like a champion</li><li>headless Drupal</li></ul></div></div></div><div class="field field-name-field-length field-type-list-text field-label-inline clearfix"><div class="field-label">Length: </div><div class="field-items"><div class="field-item even">50 minutes</div></div></div>
</article>
</div>
</div>
</div>
<div class="footer-wrapper">
<footer id="footer" class="footer__region region region-footer">
<div id="block-menu-menu-footer-navigation" class="block block-menu first odd" role="navigation">
<div class="block-inner">
<ul class="menu__footer-navigation links inline inline-links"><li class="menu__item is-leaf first leaf"><a href="../node/2.html" title="" class="menu__link">Code of Conduct</a></li>
<li class="menu__item is-leaf leaf"><a href="https://twitter.com/MidwestCamp" title="" class="menu__link">Twitter</a></li>
<li class="menu__item is-leaf leaf"><a href="https://www.facebook.com/MidCamp" title="" class="menu__link">Facebook</a></li>
<li class="menu__item is-leaf leaf"><a href="https://plus.google.com/+MidCampOrg" title="" class="menu__link">Google+</a></li>
<li class="menu__item is-leaf last leaf"><a href="https://twitter.com/search?f=realtime&q=%23MidCamp&src=typd" title="" class="menu__link">#MidCamp</a></li>
</ul>
</div>
</div>
<div id="block-views-random-sponsor-gold" class="block block-views even">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-gold view-dom-id-9850299b0eff142303c63672f1ff94b2">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/124.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/acquia_no_tagline.png%3Fitok=eafnnrOw" width="287" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Gold Sponsor!</h2>
</div>
</div>
<div id="block-views-random-sponsor-silver" class="block block-views last odd">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-silver view-dom-id-55545d286f7555f5a87f64cf2848a152">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/146.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/br_horizontal_cmyk.png%3Fitok=AafxvWnj" width="301" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Silver Sponsor!</h2>
</div>
</div>
</footer>
</div>
<script src="../sites/default/files/js/js_vVlWfsDgq27ypN6KJTygzAqN1nk0JW5lt4sp7W4x0VY.js"></script>
</body>
</html>