Drupal 7 module not loading JavaScript code

Question

I am trying to load a JavaScript file for my module. The javascript code should execute and dynamically apply some CSS styling.

However, my jQuery is not having any effect. Plain vanilla JavaScript code works but not my jQuery code.

I am loading my JavaScript with the following code:

drupal_add_js(drupal_get_path('module', 'my_module') .'/js/mycode.js', 'file');

I'm applying this code outside of any function but loaded it in hook_node_view when the $view_mode is full.

And the following is my javascript:

(function ($) {

    alert('RESPONDING!');

    $('#page').css('background', 'red')

    alert('RESPONDING-2!');


    jQuery('body').click(
        function () {
            alert('clicked!');
        }
    );

})(jQuery);

Nothing $/jQuery tagged works but both alert statements work.

what is $('#page') reffering to? make sure $('#page') is a valid html element — Thariama
– Thariama, Commented Oct 17, 2012 at 10:35
div#page is a valid element. I am actually pasting the same code into Chrome's console and it works as expected — sisko
– sisko, Commented Oct 17, 2012 at 10:38
is it available to the time of point when you try to access it? — Thariama
– Thariama, Commented Oct 17, 2012 at 10:40
That's where I was a bit unsure. There is no real reason why it could not be available but, just in case, I used hook_node_view and only load the js when the page is fully loaded — sisko
– sisko, Commented Oct 17, 2012 at 10:45
you may test it easily just log $('#page') to console right before you access it — Thariama
– Thariama, Commented Oct 17, 2012 at 10:50

sisko · Accepted Answer · 2012-10-17 11:20:45Z

1

@Thariama:

Thanks for all your input and ideas.

Your suggestion to console.log($('#page')) was very instructive. I realized something was seriously wrong when the output came out entirely empty. It go me thinking and I decided to try relocating the code to "the bottom of the page".

With the following modified code:

drupal_add_js(drupal_get_path('module', 'my_module') .'/js/mycode.js', array('type' => 'file', 'scope' => 'footer'));

My $/jQuery tagged code now executes.

Thanks!

answered Oct 17, 2012 at 11:20

sisko

9,96021 gold badges76 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drupal 7 module not loading JavaScript code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related