By big_smile on

I am trying to use Coda Slider on my Drupal 7 website.
I have copied the Script to my theme directory and added it to my .info file. But how do I call the script from within my page?

In Drupal 6, I would have done this:

  	 <script type="text/javascript">
			$().ready(function() {
				$('#coda-slider-1').codaSlider();
			});
		 </script>

But it doesn't work.

I have been reading around on the subject and found that for Drupal 7, you have to call scripts in a special way like this:


	 <script type="text/javascript">
	(function ($) {
				$('#coda-slider-1').codaSlider();
})(jQuery);	 </script>

But this also doesn't work. I've also spent over three hours trying variations of the above, but no matter what I do, I get this error message in the error console:
Error: $ is not a function
Error: $("#coda-slider-1").codaSlider is not a function

(See the site here)

Could someone help, please? A problem with a lot of the online documentation is that assumes far too much and so is bit over-complicated for a themer who is used to just dropping in JQuery plugins.

⋅ Categories: Drupal 7.x

Comments

shadcn’s picture

shadcn commented

Can you try this?

(function ($) {
    $(document).ready(function(){
        $('#coda-slider-1').codaSlider();
    });
})(jQuery);

Make sure you've flushed the cache.

Thanks

big_smile’s picture

big_smile commented

Hi Thank you so much for the reply.

I tried the script you posted, but it still says $ is not a function

I'm not sure what I am doing the wrong. I know the Coda Slider script does work, as I've tried it on a regular non-drupal HTML page.

I have also tried other Jquery scripts on my Drupal site and I get the same $ is not a function error message.

Just to double check: the code you posted goes in html.tpl.php inside of <script type="text/javascript"> </script> tags.

shadcn’s picture

shadcn commented

No. you should add the code to a js file in your theme. The example here is script.js.

big_smile’s picture

big_smile commented

Thanks again for the reply!

I don't quite understand. I thought using Jquery scripts worked liked this:
1) Link the js script file (Which you do in Drupal via .info file)
2) Initiate the linked JS file from the HTML page (which in Drupal's case would be a tpl.hp file).

Is that correct?

If I put the code you posted in my JS file, then how do I initiate it from the HTML page?

shadcn’s picture

shadcn commented

Please see Using the theme's .info file (Drupal 6) on this page : http://drupal.org/node/304255.

If there's anything please add here, ill help. ;)

big_smile’s picture

big_smile commented

Thanks for your continued help.

I've added my script in the Info file, (as in the theme guide you linked to), but how do you initialise the script?
The handbook doesn't explain that.

In Drupal 6, I would just use code in my tpl.php file. Has it changed for Drupal 7?

d_l’s picture

d_l commented

The answer is yes.

From my experiments with js i found that links put in *.info file actually place javascript in <body> region and not in <head> region which I required to initialise scripts in <body> region. You can check where your script links appear by "view source" in your browser.

In drupal 7 I learned after digging around that I had to edit html.tpl.php (the page wrapper) in theme templates folder.

...

p.s. if you go to your original link you posted here http://www.ndoherty.biz/demos/coda-slider/2.0/

then "view source" .. you will see that the script appears in <head> region.

big_smile’s picture

big_smile commented

Hi

My script is appearing in the head region, but it still doesn't work!!

I think I must be missing something, as it wasn't this hard in Drupal 6.

Does anyone have any working examples of a Drupal 7 template with a working Jquery script, or a set of step-by-step instructions.

big_smile’s picture

big_smile commented

Hmm.... After a bit more poking, it seems you have to open up you js files and replace all instances of $ with jQuery.

This can't be right?! It seems daft, because now you can't drop in Jquery plugins - Instead you have to re-write them.

I must be missing something, as you didn't have to do this in Drupal 6. Why would Drupal 7 break something that worked so well in Drupal 6?

d_l’s picture

d_l commented

This article gave me a better understanding of the jQuery namespace .. and separation of different frameworks

http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-fun...

ahimsauzi’s picture

ahimsauzi
Primary language English
Location USA
commented

Thank you this works well. A quick question, how would I go about creating a global variable to replace $ with jQuery to avoid having to change too many scripts?

In D6 jQuery UI took care of this but I am not sure which function did that.

WorldFallz’s picture

WorldFallz commented

instead of guessing, why not just go through the docs:

http://drupal.org/node/394070 (search for the 'javascript' section)
http://drupal.org/update/modules/6/7

Looks like it might be: http://drupal.org/node/224333#javascript_compatibility

big_smile’s picture

big_smile commented

The docs (at least on JavaScript) assume way too much about reader's knowledge.

For example, on this page it posts the following:

(function ($) {
  // Original JavaScript code.
})(jQuery);

Is that code supposed to be PHP code or jquery code?

The beauty of Drupal 6 is that you could just download jQuery plug-ins, pop a few lines on code in the page.tpl.php file and everything would work, making it ideal for themers who are still learning code. In Drupal 7, this isn't possible.

Anyway I worked it out. Here is a little tutorial for anyone who is struggling:
1) Open your JS file and do a find and replace to change '$' to 'Jquery'.
2) Open up your page.tpl.php and post your initialization script, remembering to replace '$' with 'Jquery'.

Everything should then work as normal.
I hope that helps someone!

j.am’s picture

j.am commented

If you wrap your jquery code in the snippet above, replacing
// Original Javascript code.
with your jquery code, then you will not have to do step 1 or 2 to find/replace all instances of '$' to 'jquery' in your file and initialization code.

WilliamB’s picture

WilliamB commented

but how can you wrap your js files?

doompal’s picture

doompal commented

Try http://drupal.org/node/224333#javascript_compatibility

theodorosploumis’s picture

theodorosploumis
he/him
Location Greece
commented

Use "jQuery" instead of "$" in any jQuery code.

TheodorosPloumis.com - Drupal developer @ eworx.gr.