Drupal provides JavaScript tools to help you write better code

Drupal AJAX using Drupal.settings.basePath

Drupal AJAX using Drupal.settings.basePath

Have you ever included a javascript file in your Drupal module that required an ajax call back to your Drupal module? Or maybe you need to tell another Javascript library where a particular file exists in your Drupal module directory?

Recently when using Uploadify (http://www.uploadify.com), I was faced with this situation (again... definitely not the first time!), and I knew there had to be a better way than how I had done it in the past.




Project Ricochet is a full-service digital agency specializing in Open Source.

Is there something we can help you or your team out with?




Example 1: Expose your Drupal base_path() to javascript for jQuery ajax calls.

The wrong way to setup the URL is just to pretend the Drupal site will always be on the root URL of the domain.

Why is this bad? what if your Drupal site runs in a subdirectory (ie. http://somedomain.com/SOMEDIR? Your ajax call will hit the root level of the site, http://somedomain.com/my_module/process-ajax, instead of http://somedomain.com/SOMEDIR/my_module/process-ajax, likely getting a 404 or 403 error. Anyone using your module in a Drupal site outside of the root folder will also have issues.

The right way to do this is actually very simple. Drupal provides a javascript object that contains lots of great info, including a basePath variable, much like the base_path() function you use in the Drupal API while coding your module. So you don’t really need to call the base_path() function in your module code at all.

Drupal will ensure that this variable is set for you - that’s all you need to do. Now, whatever path the Drupal site exists in, the module javascript will work properly.
Example 2: Exposing your module directory to javascript using the Drupal.settings object

There is geared for a slightly more complicated issue. When another jquery plugin requires...let’s say a file path to a image in your module directory, or maybe pointing to a flash object buried within your module directory. Uploadify is a good example of this, I need the Drupal module path in javascript to initiate the object.

The first idea I had was to simply write some inline JS code using using the Drupal API.

Then when initialized my jQuery object, I could do something like this.

This would work, but definitely makes your source look dirty, and makes use of some additional global variables, not ideal. Especially when the Drupal.settings.basePath variable is so convenient. Luckily, Drupal provides an easy way to add to the Drupal.settings variable properties via PHP in your module.

 array(

'modulePath' => drupal_get_path(

'module',

'my_module'

)

)

),

'setting'
);

?>

With this code, we can access the module path at Drupal.settings.my_module.modulePath, this allows us more consistent use of the Drupal.settings object.

})(jQuery);




Curious about how much it might cost to get help from an agency that specializes in Open Source?

We're happy to provide a free estimate!



A bit about Stephen:

Stephen Pope (Partner, Senior Software Engineer) has been working with technology for over 20 years. Steve has a B.S. in Computer Science and specializes in high end open source software development using LAMP, Drupal & Node.js.