1

In node.tpl.php, I have:

          <a href="#" id="hideshow">Show </a>
       <div id="comments" style="width: 300px; border" 1px solid #777; padding:10px;> 

              Some text in here

       </div>

       <script type="text/javascript" src="js/comments.js"></script>

And as you know node.tpl.php is in template folder.

I also have a comments.js file:

                 $('#hideshow'). toggle
                  ( 
                    function()
                     {
                  $('#hideshow') . text('Hide');
                     },
                 function()
                  {
                $('#hideshow'). text('Show');
                  }
                  );

the comments.js file is in a folder called, js, and it is in the template folder, so actually this is the path for comments.js file:

template/js/comments.js

So according to my program, when I click on the word Show, it should change to Hide, but when I click on it, nothing happens. Does anybody knows, what is the problem?

1
  • try using alert if that works? Jun 30, 2014 at 3:53

4 Answers 4

3

Change your $ to JQuery, or have below code wrapper around

(function ($, Drupal, window, document, undefined) {

})(jQuery, Drupal, this, this.document);

In this case you can use $ .

Normally I put js file inside of my subtheme, unless it is module relate.

1

Assuming you have confirmed your javascript file is actually being included in the page, your problem is likely that the javascript is running before the elements have been rendered on the page.

To avoid this you need to make sure that any custom js you have is inside a drupal behavior (or $(document).ready() at the very least).

It will be like this:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Your code goes here.
    }
  };
})(jQuery);

For more info see https://drupal.org/node/756722#behaviors (the whole page is useful info).

As for adding the js, I recommend you use drupal_add_js() in your node template preprocessor, which would look something like this:

/**
 * Variable preprocessor for the node template.
 */
function THEMENAME_preprocess_node(&$variables) {
  // Add the javascript for the comments on node pages.
  drupal_add_js(drupal_get_path('theme', 'THEMENAME') . '/js/comments.js');
}

That code would go in your theme's template.php file. Remember to change THEMENAME to the name of your theme.
Also, as you can see from that code I recommend you move the js file to the js folder of your theme, not put it in the templates directory.

0

1) unless you specifically allow for it, change the $ to jQuery. To avoid JS library conflict, Drupal by default turns this jQuery shortcut off.

2) your source path is wrong. It would be relative to the root, not the node. For example, if your node.tpl.php is in /sites/all/themes/THEMENAME/template/, and your comments.js is in /sites/all/themes/THEMENAME/template/js/ your include source path should be:

<script type="text/javascript" src="/sites/all/themes/THEMENAME/template/js/comments.js"></script>

where you have it relative to node.tpl.php. Most things run relative to the root (or $base_url) not the position of the file.

0

The code is correct. Make sure the js file is included with the correct path followed from the base url.

If it is then try this to replace the selector $ with jQuery

jQuery('#hideshow').toggle(function() {
  jQuery('#hideshow') . text('Hide');
},
function() {
  jQuery('#hideshow'). text('Show');
});

I hope It works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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