By hferree on

Why does Drupal 6 have issues with some JQuery code?

Since upgrading to Drupal 6 I have had issues inserting JQuery code into my custom themes. There will be no errors when I test the page in my browser (local on my computer but outside of drupal), but once I link the appropriate .js and .css files, and insert the HTML nothing works. The page acts like the jquery files don't exist and firefox now shows errors that this function doesn't exist or something is not defined, etc.

Example on my site:
http://cbf.holly.hobby-site.com/test2-old
(port forwarded, just shows a small div with a scroll bar... shouldn't have the scroll bar and the links should actually make the content scroll)

The above link shows the content slider jquery 1.2 version that should work since my drupal 6 is 1.2.6. File from http://www.ndoherty.biz/demos/coda-slider/1.1.1/#5

I really wanted to use http://css-tricks.com/creating-a-slick-auto-playing-featured-content-sli... but it didn't work. There's even a link to the slick content slider from another page on the drupal.org site so I thought it would work fine.

I asked around and the thought was it could be my jquery level so I installed jquery update to 1.3 and nothing (this was on the slick jquery 1.3 version), now I am on Jquery Update 1.2.6 and trying to get jquery 1.1 and 1.2 files to work. I've had this happen before with no solution and just really want to know what's going on.

I used to be able to insert jquery wherever I wanted. Were there rules that I was following and just didn't know? Does anyone know what the problem is?

Thanks in advance,
HFerree

(I'm not strong in coding jquery otherwise I would write my own)

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

How are you including the jquery code, you want to use drupal_add_js() to be sure the jquery library is added.

hferree’s picture

hferree commented

I have never used drupal_add_js() but I am open to doing so. I didn't even know it existed so I wouldn't know the correct formating for it (assuming in template.php instead of scripts[] = file.js; in the site.info file (just remembered that way!)

I added the code like I have in the past: linked the jquery files in the head section of the page.tpl.php (although instead of one or two files these are 5 to 7), then inserted the required HTML into a node (Ex. mysite.com/node/42).

kbharath’s picture

kbharath commented

hello ,
i tryied to executethe jquery slide show in my drupal page(in content area). for that i fallowed the process.please seoo once of that and please tell me where i am doing wrong. for this i am not installed any jquery related modules(which belongs to drupal)

1)First i created a folder as "js" this is placed in "drupal/sites/default/js".
2)i kept three files in this(a)jquery-1.4.2.min.js,(b) jquery.panelgallery-1_2.js,(c)slideshow.html (in this files i called the (a)jquery-1.4.2.min.js,jquery.(b) panelgallery-1_2.js.js files by using

tag 3)In druapl i created the node i called the slideshow.html file by using include('druapl/sites/default/js/slideshow.html') Output: slideshow displaying on header section. Please can any one tell me the step by step procedure to implement jquery slideshow in node content ares. Thanks in advance From: Bharath
i-sibbot’s picture

i-sibbot commented

Try to follow basic debugging procedures.

Check you code (view source in fire fox) and make sure that drupal is including the

tags to your .js file. When you call a function to initalise your jquery and u get an error saying undefined funciton. This is because the browser is not grabbing the file with the function in it, usuaully. If your file is being linked in the header (by using drupal_add_js() function in your template.php) then use firebug and click on the .js tag and expand the tree in Friebug. You should see your jquery code there. If it is blank then you have a syntax error in your .js file. If you are using 
<?php
drupal_add_js();
?>
in a php input text area then debug this by doing a simple jquery statement to make sure jquery is being successfully included in the head. 
<?php
drupal_add_js("$(document).ready(function(){alert("jQuery is loaded and this is being fired when the DOM is finished loading");});","inline");
This way you can guarentee that jquery is being used. You'll probably find your code is fine for you functionilty and that you just havent linked your file correctly.
hferree’s picture

hferree commented

Since you both suggested and gave examples, I'm going to try the drupal_add_js() today! So nice to have another plan. I can't tell you how frustrating this has been.

Anonymous’s picture

Anonymous (not verified) commented

If the browser is not able to find your function that usually means the file is not linked correctly. Right click and 'view source' in firefox and you'll be able to click on your linked js. If they pull up a 404 page that means they aren't linked right. Check your spelling, paths and URL's. Depending on where the file is, you either going to have to include the full theme path or not.

Drupal 6 is built on jQuery and I build my own functions all the time. I just link them in my .info file, I never use drupal_add_js(). Not saying it's the wrong way, but you can definitely accomplish the task without it.

hferree’s picture

hferree commented

Andrew, Thanks for the input. I'm going to try the "scripts[] = file.js;" in the site.info too then. It would be great to have one fix (two fixes would be awesome) for this linkage problem. So many amazing jquery tutorials out there and so little time to have issues with Drupal (my favorite CMS) and JQuery. I can't wait till everyone get's along again. :)

Good tip on the firefox 404 page. That's jquery debugging testing that I can do!

Thanks everyone for all the input/help. So happy I have two things to try!

Holly

hferree’s picture

hferree commented

I opened my .info file and inserted:

scripts[] = js/jquery-1.2.6.min.js;
scripts[] = js/jquery-easing-1.3.pack.js;
scripts[] = js/coda-slider.1.1.1.pack.js;
scripts[] = js/jquery-easing-compatibility.1.2.pack.js;

I added a folder called js and added the four files mentioned above to my theme folder.

to my page.tpl.php I added:

(this file is in my root folder for now)
var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function(cur){ clearInterval(theInt); more lines of code.........

Now I get a new error of: Error: $ is not defined
Source File: http://cbf.holly.hobby-site.com/node/42
Line: 62 theInterval(); (firefox points to a

above the logo div)

and the .js files are not being inserted into the code at all (so now change for the file, so it really does seem to be a linkage issue). I did a view source > search for .js (4 files were at the bottom of the page).

Now going to try the drupal_add_js();

nevets’s picture

nevets commented

Your lines in the .info should look like

scripts[] = iframecheck.js
scripts[] = mp_menu.js

(no semi-colon at end)

Paths are relative to the theme directory

And you should not explicitly include jquery.

hferree’s picture

hferree commented

Thank you all for your help! I'm going to write this solution down in all my notes so I'll have it.

I removed the lines from .info (any tips on why that didn't work would be appreciated) kept the files in /themefolder/js/ and put the following in the template.php:

drupal_add_js(drupal_get_path('theme','themename').'/js/filename.js');

And it works! I'm so happy. Drupal and Jquery like each other again! (there are a little alignment issues with one thumbnail and the 4th page, but I think those are css conflicts with theirs vs my sites css). There are no errors in red in firefox :) But most importantly the slider works and looks awesome and this is the happiest I have been this week! I think I might go and fix my site with my first choice!

Finally working (if anyone wants to ooh and ahh over the results of their wonderful help :) ): http://cbf.holly.hobby-site.com/node/42

Thanks everyone!
Holly

ludo1960’s picture

ludo1960 commented

Well done!

Kreapix’s picture

Kreapix commented

Hey, im glad that you made it finally, im having a project with similar functionality, my portfolio is done with a similar technique (link below), and im thinking to make it work on drupal, so i will ask you some questions and hope someone will be so kind to answer :
1. can you add/update the images from the drupal administration like if you are managing your content ?

2. can someone point me to the right direction, i need to achieve the same effect while giving the user the ability to change / update the images ? and what are the modules i may need to think of to achieve this ? CCK, Views, Panels...?

hope someone will answer this,

Thanks

wfx’s picture

wfx commented

Thanks @herree and all that helped come up with this answer!

drupal_add_js(drupal_get_path('theme','themename').'/js/filename.js');
This line added to my template file got Easy Slider working in my 960 gs based theme. I'm a total Javascript n00b and I was beginning to think embedding a slider was impossible.