Drupal Block View Execute Javascript function

Question

This would be my first custom module I am creating, and having a few grey hair's for something as simple as rendering a js function into a drupal block module.

so the script works just fine in php mode by pasting the following code into a drupal create new block , and it renders out just fine.

   <!-- Include my.js  -->
    <script src="https://1.2.3.4/static/my.js"></script>

    <!-- Decide where you want to put my -->
    <div id="my_container" style="position: relative; width: 60em; height: 30em;">
        <div id="my"></div>
    </div>

    <!-- Call my.init() at some point after the page is done loading -->
    <script>
    window.onload = function() {
        // Initialize my:
        my.init({url: 'https://1.2.3.4/'});
    }
    </script>

now what is the best practice to load this into a block module, is it hook_init or hook_block_view or both which ever it is , please give example and explanation .

Many Thanks in advance.

Answer 1

I agree with most or the answer given, but I'd like to point out a potential error.

The problem is with using drupal_add_js in a hook_block_view once block cache is enabled.

More specifically, your js will not be added with this method once the block is cached.

To solve this, you can use '#attached' in the renderable array you build in the hook_block_view.

Check out https://api.drupal.org/comment/28929#comment-28929

Answer 2

I'm guessing this is in Drupal 7.

If you need to get started quickly...

Example of how to organise your module. Let's call your module "mymodule".

[inside mymodule folder]

mymodule.info mymodule.module --js/ --inc/

Put all the javascript specifically related to your module in the 'js' folder Put all the PHP files specifically related to your module in the 'inc' folder (short for includes)

1) Use hook_block_view()

//Within mymodule_block_view()

//Put your content for the block
$block['content']= '<div id="my_container" style="position: relative; width: 60em; height: 30em;">
              <div id="my"></div>
            </div>';

//Later on
return $block;

See https://api.drupal.org/api/drupal/modules%21block%21block.api.php/function/hook_block_view/7 for full example.

I would split this out into a separate file, and either use module_file_include() (see https://api.drupal.org/api/drupal/includes!module.inc/function/module_load_include/7 ) or wrap it in a function and call the function from within mymodule_block_view()

2) Use drupal_add_js() in your block view

$module_path = drupal_get_path('module', 'mymodule'); //Get path of your module
drupal_add_js($module_path.'/js/[your JS file]', 'file');

Explanation and example for adding JS here: https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7

Please note that just plainly adding <script> to $block['content'] would work, but by using drupal_add_js(), you can take advantage of Drupal's cache (and various caching modules) that can help speed up your site. You don't get any of the advantages if you just use <script>.

3) General tip: learn jQuery, much easier than pure javascript

drupal_add_js("jQuery(document).ready(my.init({url: 'https://1.2.3.4/'}));", 'inline');

Partial example (within your hook_block_view):

$module_path = drupal_get_path('module', 'mymodule'); //Get path of your module
drupal_add_js($module_path.'/js/[your JS file]', 'file');
$block['content']= '<div id="my_container" style="position: relative; width: 60em; height: 30em;">
                  <div id="my"></div>
                </div>';

drupal_add_js("jQuery(document).ready(my.init({url: 'https://1.2.3.4/'}));", 'inline');

As I mentioned above, I would separate out module code into smaller (more manageable) files.

So for example.

inc/mymodule_menu.inc.php //hook_menu
inc/mymodule_blocks.inc.php //hook_block_view
inc/mymodule_firstblock.inc.php //Code for a block wrapped in a function, which hook_block_view calls

Hope this helps