Our Blog

Related Posts

Automating Plugin/Module Updates on Pantheon. We automated the process to apply plugin and module updates on Pantheon sites with a simple command.

Listen to Pixo and Four Kitchens' case studies on how we decoupled Drupal and Wordpress site architectures to separate CMS content from the front end.

How to achieve Pantheon's one-click-update functionality for Drupal and Wordpress while retaining your git history using git-graft.

Popular Tags

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Brian Howard

About a month ago, I encountered the need to fetch some Drupal node information from within JavaScript. It turns out, this isn’t readily available in a built-in way. It’s one of those things that you don’t need, until you’re really getting your hands dirty, as in my case with some customized Google Analytics.

As I was scheming how to get what I needed from Drupal, an elegant solution revealed itself: Drupal has a JavaScript Object already in place, accessible at the object ‘Drupal’. Within this lies another object called ‘settings’, which seemed like the appropriate place to store my data.

To accomplish this, we only need two parts, one to set the data, and the other to access it. In the example, we’re going to be passing both the node id and the node title to our javascript.

Part I: Bridge the PHP data to JavaScript

In your theme’s template.php, we only need to add a couple lines to the theme_preprocess_node function ($variables may be $vars, depending on your theme):

drupal_add_js(array('nid' => $variables['node']->nid), 'setting'); // adds the node id
drupal_add_js(array('title' => urlencode($variables['node']->title)), 'setting'); // adds the node title
You’ll see that we’re adding this to the core ‘setting’ object, as discussed above. For this reason, we can’t just make up our own (e.g. if ‘setting’ was replaced with ‘awesomesetting’, it wouldn’t work).
The title needed some extra care to pass between languages, accounting for any spaces or special characters, thus the urlencode() function is called into action.

Part II: Call the data in JavaScript

This value will now be available for any node! From within any node script, you can access it via:
var node_nid = Drupal.settings.nid; // get the node id
var node_title = decodeURIComponent(Drupal.settings.title.replace(/\+/g, ' ')); // get the node title

The .replace() changes “+” symbols back to regular spaces, which were needed when passing the value. decodeURIComponent() does the rest.

Pay special attention to the difference between setting and settings. ‘setting’ is used when adding a setting (php), ‘settings’ is used when calling the settings (js). It makes sense, just confusing when you don’t think about it.

That’s it! If this began churning your brain, I can imagine you’re already thinking about how you can use this for other data and instances (other functions within template.php for example). If that’s the case, we’d love to hear how you may have used this in your work. Comments are welcome!

Related Posts

Automating Plugin/Module Updates on Pantheon. We automated the process to apply plugin and module updates on Pantheon sites with a simple command.

Listen to Pixo and Four Kitchens' case studies on how we decoupled Drupal and Wordpress site architectures to separate CMS content from the front end.

How to achieve Pantheon's one-click-update functionality for Drupal and Wordpress while retaining your git history using git-graft.

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Interested in working with us?
CONTACT US