I have create a module who add a new node named SquareOffs. I make that in my squareoffs.info file.
I would like to add to that node a javascript file, squareoffs.js, but I don't know to do that.
I have seen the drupal_add_js() documentation but I don't know understand how it works, how can I add the js file to this node??
Thank you very much for your answers or your sugestions!!
Yes. drupal_add_js() is used to add js in your theme or custom module.
I assume that the node has been fetched under this custom module.
If you want to add in your module. Use this
drupal_add_js(drupal_get_path('module', 'mymodule') . '/js/squareoffs.js');
The js file can be added as inline and external too.
For more details Click Here
Once the js file has been included, it will be applied to all the nodes under this custom module.
OR If you want to add a js for particular content type. You can add preprocessor function in my custom module:
function mymodule_preprocess_node(&$vars) {
if($vars['type'] == 'Nodetype') {
drupal_add_js('drupal_get_path('module', 'mymodule') . '/js/squareoffs.js');
}
}
#attached in template_preprocess_node? I've try to rewrite my preprocess function using #attached, and it won't load attached files after the node is cached, although it's working for the first page call.
template_preprocess_node() is too late, because it's after you've already started rendering the render array. hook_node_view() or hook_node_view_alter() seem like sensible places to add any attached resources.
hook_node_view(). It works great :)
You can add your js through drupal_add_js() function. You can control on which pages this js should be added by implementing different hook and calling drupal_add_js() function in those hooks:
1) Use drupal_add_js() in hook_init() if you want to add this js on all drupal pages.
function mymoduel_init() {
drupal_add_js(drupal_get_path('module', 'mymodule') . '/js/mymodule.js');
}
2) Use drupal_add_js() in hook_node_view() with content type condition check if you want to add this js on only specific content types.
function mymodule_node_view($node, $view_mode, $langcode) {
if($node->type == 'my_content_type') {
$node->content['#attached']['js'][] = array (
'type' => 'file',
'data' => drupal_get_path('module', 'mymodule') . '/js/mymodule.js',
);
}
}
3) Use drupal_add_js() in module's preprocess function if you want to add this js only on specific node
function mymodule_preprocess_page(&$variables) {
if (isset($variables['node']) && $variables['node']->nid == 'your node nid') {
// Add js
drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.awesome.js');
}
}
You can implement this preprocess_page at theme level like mytheme_preprocess_page($variable) in theme's template.php file.
hook_init() is no longer the way for global JS - you can use the info file instead. Also your third example I think should be done in the same way as your second.
If you are working on developing a website, I suggest you to use JS injector Module and you can insert you jQuery/JavaScript into your website theme. To insert a jQuery, navigate to Configuration -> development -> Js Injector -> Add.
You can add your JScode as :
(function ($) { // your jquery goes here... })(jQuery);
If you are working on developing a module, go through this link and add your javaScript.
