0

I want to include jQuery widgets on my Drupal 7 page. So, I started the way is described here:

drupal_add_library('system', 'ui.dialog');
drupal_add_js('jQuery(document).ready(function(){jQuery("#dialog").dialog({ modal: true });});', 'inline');

However, there are two problems with this approach. First, I would prefer to keep the pages themselves HTML (with JavaScript, of course - but without PHP). And these two lines are the only PHP lines on a large HTML/Javascript page.

Second, JavaScript itself is in quotes which prevents some visual assistance from the editor (since everything is in the string) and forces me to use only double quotes or escaped single quotes inside.

So, I was wondering if there is a way to specify drupal_add_library outside the page, and get Drupal to read <script> tags and JavaScript inside those tags.

In general, I didn't find relevant documentation on Drupal side (relevant being not for theme or module developers but for those who want to use JavaScript / JQuery / JQuery UI as part of site building). If I missed it, I apologize!

  • actually, disregard the second half of the question. It is possible to just put script tags on the page instead of drupal_add_js function. Any downside to doing that? – Felix Jan 13 '12 at 19:30
  • Did you see my answer below? I show how to do that. (The 2nd method I mention about including a script in your .info file.) drupal.stackexchange.com/a/19691/697 It's not good Drupal practice to include a loose script in page.tpl.php. – Danny Englander Feb 10 '12 at 18:18
2

How about creating a 'scripts.js' file in your theme folder and then simply either add it in using the drupal_add_js method in template.php (the same method you are using above) or if it's something that's more global, include it in your theme's .info file. You will need to tweak the JQuery call according to 7 standards. I use both of these methods all the time and it works great.

So in your 'scripts.js' file you will have something like this:

(function ($) {
Drupal.behaviors.myTheme = {
attach: function(context, settings) {

// your custom JQuery here

}
};
})(jQuery);

... and then call that however you wish as I have described above. You can also have a look at this post: Managing JavaScript in Drupal 7

  • OK, let me explain the use case in more details. We have a developer and a web designer. Web designer typically designs the page outside Drupal, and when it works fine - she cuts and pastes it into Drupal page (maybe there is a better way, but it works fine for her). There is no PHP in her world. Developer would prefer not to make changes in the downloaded code. If he has to modify template.php, he knows how to do it - but more than once this code was overwritten during the upgrade. But it looks like this is the only way to do it. Oh, well! Thanks for your help! – Felix Feb 26 '12 at 8:06
  • @Felix - It sounds like your workflow is the issue here. When you say "more than once this code was overwritten during the upgrade", how does this happen, from a Drupal core upgrade or some other? Do you have your theme in /sites/all/themes? Are you using version control, ideally Git which can help avoid people overwriting other's work? Ideally you want to do what I mention above, to reference a script that gets updated and not the drupal page. Even if your designer is afraid of code, if they use Git, have them use something like Git Tower which is a GUI for Git. I use it and it's fabulous. – Danny Englander Feb 26 '12 at 19:53
  • overwrite happens from Drupal core upgrade. The theme is "stock" theme - there is no "my" theme; so upgrade instructions (step 4 in drupal.org/node/1223018 ) overwrite changes in template.php. I am using version control for my code; however, I would prefer to treat core Drupal (including themes) as "off the shelf" code, with as few modifications as possible. But it looks like I do need to make a change in template.php and just be careful to re-apply those changes every time we do the upgrade. Not perfect, but OK. I just hoped that there is a way to avoid it and I am missing it :) – Felix Feb 26 '12 at 23:11
  • So in a way you are dealing with a core hack here. Why not simply create a sub theme, drop it in /sites/all/themes and at least that solves that part of the issue of certain overwrites. see: drupal.org/node/225125 – Danny Englander Feb 27 '12 at 16:48
  • e-e-eh... because I want to leverage all the changes (fixes and improvements) that Drupal team puts into theme during upgrade! I don't want it to become my theme for two lines of code that aren't even "theming" in nature. Yes, it looks like a core hack, and I hoped to avoid it - but it seems that all other options are worse. BTW, there was an upgrade or two since I've done it; and I didn't forget to move the changes. So life is not so bad after all :) – Felix Mar 5 '12 at 5:46
2
  • First, there is no problem of using PHP in your HTML file. Don't know if it's the reason, but you will not gain any performance of not using PHP.

  • If you absolutely want to insert the javascript inline but you don't want to have to use only double quotes or escaped single quotes you can use the PHP heredoc syntax:

 

$js = <<<EOT
  jQuery(document).ready(function(){jQuery("#dialog").dialog({ modal: true });});
EOT;
drupal_add_js($js, 'inline');

But it's not really the way to go to insert javascript in your pages.

  • As you commented, you can insert directly you javascript code in the header of the html.tpl.php template file. But it's not the Drupal way to do it.

  • As "Danny Englander" answered you can insert it into your .info file. But your javascript code will be in included in all your pages. Not ideal if you don't need your widget in all your pages.

  • As "Danny Englander" answered (and it's the best way to do it) you can use a script that you insert in only the page you need with drupal_add_js.

-1

If you don't want to use php at all, then the best standard way to go about will be to add it in the .info file in theme folder. That will make drupal print you js in all pages. The down side of this approach will be that your js will loaded in all page even if you need or dont need.

scripts[] = js/myscript.js

Another way to this will be by adding js directly in the header of your theme with direct url, it not recommended and is not a standard way to go about. But that works.

<script type="text/javascript" src="http://your-site.com/js/jquery.min.js"></script>

<script type="text/javascript" src="https://your-site.com/js/jquery-ui.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){jQuery("#dialog").dialog({ modal: true });});
</script>

The available methods of adding javascript depends are.

  • By defining in the theme.info file.

  • Adding it inline.

  • Adding an external js file.

You can also use the php function drupal drupal_add_js to do this

This functions lets you easily add a JavaScript file or helps in setting an inline code to any page in your theme and it takes 5 parameters (you see it in the api reference).

There is a detail post on this here.

  • Adding script tags and scripts in the header of your theme is bad Drupa practice. Those scripts will never get aggregated and they can also cause errors. See the two methods I mention above. drupal.stackexchange.com/a/19691/697 – Danny Englander Feb 10 '12 at 18:21
  • I know it. But at the same time this person has asked for non-php method so i gave him an option, i have added that its not recommended. – esafwan Feb 15 '12 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.