1

I try to include a jQuery in the body of a content type, as shown in the image below:

enter image description here

The purpose of this jQuery is to hide a div with id="test", so that the text aaaaaaaaaaaaaaaaaaaa in it is not shown. The jQuery was added to the content (saved in it), but yet I still can see the aaaaaaaaaaaaaaaaaaaa and my js did not run.

I added scripts[] = js/test.js to my .info file. I then put test.js inside the mytheme/js folder. I cleared all caches and still nothing happens. I also installed jQuery, changed to version 1.10, and still no luck.

Seems like Drupal JQuery.js file is not loaded, so how can I get it loaded? Do I also need to add jquery.min.js in the .info file and the js/ folder?


UPDATE:

(function($) {

$('#wrap').hide();

})(jQuery);

When I put the above code in a block, it works. If I put in the test.js file, it doesn't work.

If I put an id or a div that is not part of my page.tpl, it doesn't work even on a block.

This is so weird.

Update #2 (re-edited)

Turns out the actual reason it didn't work when using the .info and .js file is that the .js file needs a document ready function

(function($) {
$(document).ready(function(){
$('#test').hide();
});
})(jQuery);

Thanks to all that tried to help.

  • Mixing javascript with content is a bad practice. I strongly discourage you to practice that. Code must always be separated from content. jQuery is part of Drupal core. If you can't see the jQuery in the response then there is something wrong with your setup. See this documentation about Drupal and Javascript: 1. JavaScript best practices 2. Working with JavaScript and jQuery – Gulok Aug 9 '15 at 3:47
1

As @Gulok and @Drupalist said it is not good that add your js in content,the simple way to add js with one of below solutions (it is seems you are newbie to drupal I suggest if you want use learn and use drupal use is correct,I can suggest a solution that you can add js in body(content) but I prefer guide you in correct way ;) )

The PHP function drupal_add_js() lets you add a JavaScript file, setting or inline code to the page and it takes 5 parameters (see the api reference).

The first parameter is always going to be a path to a js file, an array, or a piece of JavaScript code. If the second parameter is 'module' (the default), 'theme', or 'core', then the first parameter must be a path and the only difference between these three is the order in which the script tag will be placed relative to other scripts, i.e. core scripts first, then module scripts and finally theme scripts.

If the second parameter is 'setting', then the first parameter must be an array of settings. This is very handy for telling JavaScript about the configuration settings for your module, for example, and is explained in more detail in the next section.

The final possibility for the second parameter is "inline" and this means you are passing in straight JavaScript code as your first parameter, which you want written directly to your page between script tags, rather than a call to a file.

These two are the most important parameters for this function - indeed you may never even use the second one if all you ever want to do is add a js file for your module - but you can learn about the other parameters by reading this function's documentation at api.drupal.org. Adding JavaScript from within a module

So, let's say you have written some jQuery code that targets some of the elements that are output by your module or theme. You simply need to save your jQuery code as a JavaScript file (i.e. with the .js extension) and place it in your module or theme's directory. If it's for a module, you then need to make the call to drupal_add_js() as above, from wherever the module is about to output content (e.g. in hook_block or hook_nodeapi), or if the JS is not acting on content output by your own module you can call it from hook_menu or hook_init. Note, that putting this file into hook_init means it will run on every page request, whether needed or not. Here is how you would ensure the file gets added:

The jquery.js file is included automatically so you don't need to worry about adding it.

To add JS (or CSS) file from form builder function the recommended way is to use Form API #attached property as below,

See Form API reference for more details. Adding JavaScript from within a theme

Adding JavaScript to a Drupal 8 theme With drupal_add_js (Drupal 6 & 7)

(drupal_add_js is deprecated in Drupal 8; use '#attached' instead.) If you are adding your .js file from within a theme, then you simply need to make the call from within template.php, you need to add the second parameter this time as 'theme' so that Drupal knows this script should be loaded after all core and module scripts are loaded:

  <?php drupal_add_js(drupal_get_path('theme', 'mytheme')   .'/mytheme.js'); ?>

Using the theme's .info file (Drupal 6 & 7)

You can add your script path in the .info file of your theme and Drupal will include them automatically. name = My theme description = Theme developed by me. core = 7.x engine = phptemplate

     scripts[] = mytheme.js Using a preprocess_page function

To conditionally add js to the theme, you can use a process_page function:

 <?php function mytheme_preprocess_page(&$vars, $hook) {   if (true) {
     drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
     $vars['scripts'] = drupal_get_js(); // necessary in D7?   } } ?>

and according you comment your js will be something like

I try to include a jQuery in the body of a content type, as shown in the image below:

enter image description here

The purpose of this jQuery is to hide a div with id="test", so that the text aaaaaaaaaaaaaaaaaaaa in it is not shown.

The jQuery was added to the content (saved in it), but yet I still can see the aaaaaaaaaaaaaaaaaaaa and my js did not run.

Seems like Drupal JQuery.js file is not loaded, so how can I get it loaded?

(function($) {
$(document).ready(function(){
$('#wrap').hide();
});
})(jQuery);
  • @Newbie it need to add jquery, it added by default (default add jquery 1.4(for show and hide it is ok)) but if you want higher version isntall jquery_update module. but I think the problem is in your test.js file – Yusef Aug 9 '15 at 5:29
0

Add a .js file in your theme directory and declare its existence in the .info file of the theme, In this file write the above code to see if it works.

Besides that you should never call Javascript functions in that way. you must either place it in the theme folder (as I said) or load it via drupal_add_js.

  • Is there any error in js console? – M a m a D Aug 9 '15 at 5:32
0

For your specific need, if you really need code to belong to node, I suggest Code per Node. OK, it's still no good on production server, but sometimes one needs an easy to use test field, or just one page for some very specific purpose.

Code per Node makes it possible to add custom CSS and Javascript per node, per content type, per block, and globally. The code is stored in the database, but served from the file system. It also supports syntax highlighting with CodeMirror.

Serving from filesystem means that if you grep your site for code you don't like, you will find it. And it's fast. There are other problems with content containing code, and CPN at least tries to address them. Still no go on important sites, but way better than having the same on your own.

Your Answer

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