By Dalabad on

Hello,
I try to use something like this in my node:

<div id="link">LINK</div>
<div id="container">First Container</div>
<div id="container" style="display:none">Second Container</div>

I added a js-file to my template with the following content:

(function ($) {
    $("#link").click(function () {
        $("#container").toggle();
    });
})(jQuery);

In the pages sourcecode i can see the javascript and the html-code but it does not work.
I searched for a couple of hours now and found drupal_add_library() which helps me to add special features of jquery/jquery_ui to drupal.
Is there a possibility to add the complete jquery package?
What did i forget?

Thanks

Dalabad

⋅ Categories: Drupal 7.x

Comments

anupom.gogoi’s picture

anupom.gogoi commented

You can use drupal_add_js api. Here you will get more information: http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_ad...

My Blog site: http://www.anupomgogoi.com

Dalabad’s picture

Dalabad commented

Thank you for your fast reply.

I tried it with
drupal_add_js(path_to_theme() . '/javascript/main.js');
in the template file, but the result is the same like writing the code directly into the node.

maxferrario’s picture

maxferrario commented

I do not know jQuery very well, but if I were you I would try to change one of the IDs (and propagate the change to your JS code)

Dalabad’s picture

Dalabad commented

Good Idea, but jquery can handle multiple elements with the same id.
this script should hide the first container and show the second one.

The script works fine in a html-file, but within a node, the jquery/javascript-code has no effects

maxferrario’s picture

maxferrario commented

and it doesn't work exactly as you described/expected: in my example clicking on LINK toggle the visibility of the first #container element, but doesn't show the second one!
Please note that I am using JQuery 1.4.4

WorldFallz’s picture

WorldFallz commented

...but jquery can handle multiple elements with the same id.

Maybe so, but it's both incorrect an invalid -- ids must be unique (that's the entire purpose of them). If not unique, then use a class. I've often had javascript/jquery problems with invalid html or non unique ids.

Dalabad’s picture

Dalabad commented

You are both right.
i changed the code and used a jquery-example:

my html-file with this code works fine:

<html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>          
 <script type="text/javascript">                                         
   $(document).ready(function() {
	   $("a").click(function() {
		 alert("Hello world!");
	   });
	 });                        
 </script>                                                               
 </head>                                                                 
 <body>                                                                  
   <a href="">Link</a>                        
 </body>                                                                 
</html>

now i copied the code to my node and it does not work:

<script type="text/javascript">                                         
   (function ($) {
    $("a").click(function() {
		 alert("Hello world!");
	   });
	 });
})(jQuery);                        
 </script>                                                             
 <a href="">Link</a>
systemick’s picture

systemick commented

Have you tried using Firebug to see if there are any javascript errors?

Dalabad’s picture

Dalabad commented

Yes i did, and there was one. One pair of brackets to much.
it needs to be:

<script type="text/javascript">                                         
   (function ($) {
    $("a").click(function() {
		 alert("Hello world!");
	   });
	 })(jQuery);                        
 </script>

But now the funny part: The hyperlinks inside my node are not working, but the drupal links like "View, Edit, Outline, Track, ..." do exactly what the script obove tells them.

Why can i use the code just outside of my nodes?

devtherock’s picture

devtherock commented

Hi

After clicking on hyperlink did you check error console ??

Dev

Dalabad’s picture

Dalabad commented

Yes i did. At first there were no errors, now i get these:

function changeTab(id) {
    $('[id*=bigTab]').hide();
}

Uncaught TypeError: Cannot call method 'hide' of null

The divs are id=bigTab1, id=bigTab2, id=bigTab3

edit: ok i got it working. Drupal includes jQuery by default, but when including jquery again in the templatefile it works

maxferrario’s picture

maxferrario commented

I suggest you to start from http://docs.jquery.com/Tutorials:How_jQuery_Works and http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery.

The code you wrote changes EVERY link in the page, adding an alert to the click event.

If you want to modify the behaviour of one particular link do not use the $("a") selector.
I would use in this case its ID as in $("#linkId").

Dalabad’s picture

Dalabad commented

It was just a testing case.
I know that $("a") takes all links. My problem is, that i cannot use jquery inside a node.
Only the links outside my node are effected