Am I missing something obvious about using jQuery with Drupal 6?

Under Drupal 5.x, I can easily create nodes and/or blocks with jQuery calls using the method described in this post. By adding a simple drupal_add_js call to load a plugin, I can also access plugin functionallity using this method without loading up a special module (assuming you have the jQuery update module installed). For example, I can call the jCarusoelLite plugin without a supporting module by creating a PHP input-type node like:

<?php drupal_add_js('sites/all/modules/jcarousellite/jquery.jcarousellite.pack.js') ?>

<a href="#" class="prev"><</a>&nbsp;<a href="#" class="next">></a>
<div class="anyclass">
  <ul>
    <li><img src="/files/images/IMG_3585.jpg" alt="" /></li>
    <li><img src="/files/images/IMG_3586.jpg" alt="" /></li>
    <li><img src="/files/images/IMG_3587.jpg" alt="" /></li>
  </ul>
</div>

<script type="text/javascript">
$(function() {
$(".anyclass").jCarouselLite({
items: "li",
btnPrev: ".prev",
btnNext: ".next",
speed: 200,
visible: 1
});
});
</script>

Alas, none of this works for me under Drupal 6. I've looked at the code for the small number of jQuery-related modules that are compatible with Drupal 6, but I can't find an obvious clue about why this worked under Drupal 5, but not under Drupal 6.

Any ideas about what I'm leaving out?

Comments

WorldFallz’s picture

not sure why it's not working, but one thing you might try is using jquery plugins to see if it makes any difference. Its a very tiny module that allows you to call any plugin with jquery_plugin_add($plugin). Also, try other plugins... maybe the problem is specific to that one.

keown100’s picture

Thanks for the advice, WorldFallz. But I don't think it's related to the plugin because the simple test from this handbood page doesn't work for me under Drupal 6 and it uses a built-in qQuery function... no plug-ins required. The plug-in test was just an extended version of the first test. It all works as I expect under 5.7, but I can't get the simplest of jQuery calls to work under 6.1. I'm sure I've overlooked something, but damned if I can figure out what it is.

WorldFallz’s picture

I just had another thought... i believe D6 can aggregate js the way d5 aggregates css. Therefore, if you don't turn off the aggregation your js changes wont appear. I'm thinking you might have to turn it off then on to rebuild the aggregation.

WorldFallz’s picture

actually, the more I think about it... I don't see how you could use js aggregation with individual pages making add_js calls. How will the system know to add the node specific js to the aggregation? I'll have to play with this some on my dev box and see...

dvessel’s picture

Anything added through drupal_add_js, Drupal will know about. It's checked on drupal_get_js serializing the js array and doing an md5.

If the script is new, then it'll re-aggregate the files. Editing existing scripts, then Drupal will not notice it but it's a good idea to clear it when your not sure.

joon park

keown100’s picture

Hey, it seems to help if I use the version of the plug-in that's compatible with jQuery 1.2! :) Thanks for the info.

WorldFallz’s picture

Thats EXCELLENT... thanks for the info.

keown100’s picture

The problem that I had with the fadeIn example from this post stems from a change in behavior. Essentially, the p.jtest element was being displayed normally when the page first rendered. So the fadeIn effect was taking place, but you couldn't tell because the element it was fading in was already visible. I added a 'display:none' style to the element (so that it's not visible when the page is initially rendered), and now it works as expected. So my very simple change to the example looks like this:

<?php

drupal_add_js (
    '$(document).ready(function(){$("p.jtest").fadeIn(6000);}); ',
    'inline');
?>

<p class="jtest" style="background-color: palegreen; width: 30em; display: none">

This is an example of an effect which is built into the core jQuery
library. This text should fade in after the DOM is loaded. <a
href="http://api.drupal.org/api/HEAD/function/drupal_add_js">
drupal_add_js()</a> was used to add the <a href="http://jquery.com/api/"> fadeIn</a> effect to any paragraph with the class <b>jtest</b>.

</p>

As for the plug-in problems, I pointed out earlier that I was using an incompatible version of the plug-ins. Once I tried the updated version of jCarosuelLite (I've also been playing with ScrollTo and SerialScroll), everything worked great.

There's a lot of great new features in Drupal. But for my money, jQuery 1.2 is THE killer feature of Drupal 6.