By saltcod on

Hi All,

I'm starting to feel like an idiot. I've combed the documentation, including changes from D6->D7, but I can't figure out how to get started with jQuery. Here's what I've done:

1. Paste the <script src = link to latest jquery at Google> into the head section of html.tpl.php
2. Add scripts[] = myscripts.js in my theme's .info file
3. Start writing jQuery in myscripts.js

This should work shouldn't it? But yet it doesn't. Oddly, when I put regular Javascript in the myscripts.js file, it works fine, but jQuery code won't work.

Here's what's in my myscripts.js file: 

alert("I am Javascript!)";

$(document).ready(function(){
$('h2').hide();
}
</script>

Results

The alert window pops up as it should, but the second part (the jQuery) doesn't work. BUT when I paste that jQuery into my page.tpl.php and wrap it in a <script src> tag, it works just fine.

In summary

jQuery works, loading a mytheme.js file in my theme's .info file works, but putting jQuery in mytheme.js DOESN'T work.

There's something I'm not doing right here, and I can't find the answer!

Much thanks for any guidance.

Terry

Comments

the fatman’s picture

the fatman commented

I'm struggling here too

I'm using the jq4dat theme which has no theme overrides but uses the drupal_add_library in template.php. It's loading the css and the js files from the ui in core, I can see them in the page source (using the tabs tool).

I'm getting a sample tool from http://flowplayer.org/tools/demos/tabs/index.html, adding the css to a local.css file and including the supplied html in the node content, using the full html filter. I added the supplied script to myscript.js, wrapped as described at http://drupal.org/node/756722 and updated the .info file.

The script is being called because if I put rubbish in there an error shows on Firefox's error console. None of the css formatting is being applied to the elements referred to in the script.

I've tried it on Safari and Firefox both with Javascript enabled.

jQuery combine with Drupal 7 is a killer combination and I'm keen to get it happening, can't see what I'm missing though. I'd be willing to help with the documentation once I figure this out myself, should that ever happen.

Cheers

WillHall’s picture

WillHall commented

If you are calling a script you do not need script tags in the file - we already know it is javascript. You should also get used to writing your js in noconflict mode... annnnd your javascript has errors in the syntax.

try:

jQuery(function() {
 alert("I am Javascript!)";
 jQuery('h2').hide();
)};

There ya go.

charlie-s’s picture

charlie-s commented

I can't get that code to execute. Neither can I get this to execute:

(function ($) {
  jQuery('.mydiv').click(function() {
    alert('test');
  });
})(jQuery);

What am I missing?

seagle’s picture

seagle commented

I was running into the same trouble and found that exchanging every instance of '$' to read 'jQuery' fixed the code. I'd prefer to use the $ sign but it wasn't working for me.... very strange, maybe its conflicting with another module?

charlie-s’s picture

charlie-s commented

Yes, D7 uses jQuery in a much smart way, i.e. the jQuery string allows it to not conflict with other javascript libraries.

Checkout this page I wrote on the topic: http://drupal.org/node/1058168

quinns’s picture

quinns commented

Thank you, I was struggling with this today. Your suggestion works perfectly.