You wouldn’t think something that should be so easy as adding a script to a page would require a trip to the Drupal API documentation. But Drupal, like most Content Management Systems, has security systems in place to filter most javascript during submission so site members can’t do ugly things via scripting. In most cases, that’s a good thing. When you’re scratching your head trying to figure out a way around it, not so much.
You can hard-code a script into the template, if you need it on all the pages and it works. But just adding a a single, inline javascript into a Drupal node was much harder than I expected. Since I wasted plenty of my own precious time figuring out a workable approach for this–don’t laugh, you coders!–I thought I’d share it with others. Maybe it can save you from feeling foolish.
It’s easy – as 1, 2, 3! First, put the script on your server, someplace it’s easy to find. I opted to make a “scripts” folder in my sites/all folder in the Drupal installation because I knew that’s where I’d be most likely to look for it later. Y’kno. In case you get lazy with the documentation. (But you’d never do that, right? Ha!)
Second, when do your post, set your input filter to PHP, and third, do a php include where you’d like to place the script. Something like this:
<?php include('sites/all/scripts/my_javascript.js'); ?>That’s it! You now have instant javascript, with no API-scouring-induced drowsiness. Happy Drupalling!
Posted on October 9, 2009 at 1:33 pm in: Tech Help
{ 13 comments… read them below or add one }
I’d go one stage further (Drupal 6.14). The PHP filter seems to have been removed, so go to administer >> site configuration >> input formats >> add input format, and add a new input format (available to NO roles – administrators can use all filters) with no filters checked.
This will then run javascript. this means you can update the page in the usual node editing window instead of uploading a file.
Of course it represents a security risk, and you need to test your code carefully before uploading.
Thanks for the addition, Hugo. I haven’t worked with Drupal 6 yet, so have yet to experience the horror of not having access to straight PHP filter.
While I utterly understand and appreciate the need for security, I hate having my hands tied behind my back in trying to whip sites into submission.
It’s 2010, and you still have never worked with D6? I have to ask a HUGE question. Why? D7 is almost here. That’s not good at all.
Laughing @ Jeff.
I had need for a single signon between a CMS and vBulletin, so I used vbdrupal (http://vbdrupal.org/), a forked version which has now fallen behind the main version. I recently detached the Drupal and forums, but with the modules I was using, it would have been a major undertaking to upgrade. So I’m limping along on with an older install and will be moving my further development efforts on the site to the vBulletin CMS.
hello Dixie,
first “great thank to you” from last 2-3 days i am digging google,and number of forums to know how can we add external javascript files in drupal. Now i got solution from ur article.
Now let’s come to my problem.i want to display the javascript slide show (i have taken the code from www. dynamicdrive.com)the code kept in file named as “slideshow.js” which is kept in “sites/default/js/slideshow.js” required images also stored in that folder.
images are not displaying but alternate text is displaying.
can you help me please? what is wrong? is the images path or what else ?
From:
Bharath
Would lay money it’s the image path. Refer to the code in your script to see where it’s looking for them, and check the source code on the borked images to see where the script is trying to pull them from. This is most likely a minor issue that should be easy to find via backtracking.
hell Dixie,
Thank you for replay Dixie.I executed the .js file just now.First i tryed by giving relaive paths but it not excuted.When i give complete path as “drupal/sites/default/files/image.jpeg” like this i have given complete path.
can you do One More Help Please Dixie.i have tried number of times to execute the “Jquery” files,but i failed .
“drupal/sites/default/js” in ja folder i kept fallowing 3 files (1)jquery-1.4.2.min (2)jquery.panelgallery-1_2 , and html file (3)slide.html files.
in html file i given src of jquer files path as
In Drupal node using include() function i called html file.
But no effect .Please can u help me here by telling the procedure
How can we execute the jquery files in drupal.
Thank you Dixie.
From:
Bharath
Sorry, Bharath. This article above you represents the sum total of my knowledge about executing Javascript in a Drupal node. I am a hack, not a coder. Can troubleshoot my own stuff as required, but I’m afraid am not the best person to ask here.
thanx alot Dixie ..u r such a genius….:D
it is realy useful..
Glad you found it helpful, bio.
Use drupal_add_js: http://api.drupal.org/api/function/drupal_add_js/6
Example:
Using PHP input filter is dangerous, all executable code should be kept in code and not in database. Use drupal_add_js in your theme or custom module.
Examples didn’t come through: (add php start and end tags)
drupal_add_js (‘$(document).ready(function(){$(“p.jtest”).fadeIn(6000);}); ‘,’inline’);
drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’).’/js/loopedslider.min.js’, ‘theme’, ‘header’);
Thanks for the help/article!