CiviCRM Community Forums (archive)

Hi,

I have a custom Drupal/Civi module that creates a Civi form and uses a customised jQuery multiSelect plugin to implement dynamically-updated multi-selects based on custom Civi API calls. The original Drupal6/Civi3.3 version works. I'm now porting it to Drupal7/Civi4.0 and am having problems getting the jQuery to load. Are there known differences between D6/Civi3.3 & D7/Civi4.0 in this regard other than JavaScript should be compatible with other libraries than jQuery?

I used cj rather than $ throughout.

The customised jQuery multiSelect plugin defines some functions with cj.extend, including multiSelect():
   cj.extend(cj.fn, {
      multiSelect: function(o, callback) { ...
and other functions that use crmAPI().

The plugin code is wrapped in if(jQuery) (function(cj){...})(jQuery); and lives in a .js file that gets included into the .tpl using <script src=...> . I added alerts to verify that it gets loaded.
The multiSelect() function is used in cj(document).ready(), e.g.
          cj('#multiSelect1').multiSelect();
(have also tried this in cj(window).load(), also tried within cj.getScript() instead of using <script src=...> .)

The problem: in the D7/Civi4.0 version, I get:
cj("#multiSelect1").multiSelect is not a function.

Drupal 7.7 / Civi 4.0.6. Not using jQuery UI or jQuery update.

I've tried changing all "cj" to "$" - result:
$ is not a function
at:
$('#org_name').bind('change mouseleave', function() {...
in .tpl file.

Then tried enclosing the jQuery code in the .tpl file into (function($){...})(jQuery);
- result: $().crmAPI is not a function, in the plugin .js file.

Also tried this last approach using cj throughout rather than $.
- result: cj().crmAPI is not a function, in the plugin .js file.

Any advice appreciated!

Edit 7 Oct 2011 15:00 BST:
I found that the plugin works in D7/Civi4.0 if and only if it is loaded after civicrm/packages/jquery/jquery.js and before:
var cj = jQuery.noConflict(true);
I achieved this with:

        drupal_add_js(
            drupal_get_path('module', 'mymodule' ) . '/js/my.js',
            array('group' => JS_LIBRARY, 'weight' => 10, 'scope' => 'header')
        );

Thanks,

Dave J