CiviCRM js breaks Drupal-triggered jquery plugins?

[greenmachine]

I've encountered this with two sites, running Drupal 6 and CiviCRM 2.2.5 or 2.2.7. It seems like there is something about how CiviCRM instantiates its own copy of jquery that causes subsequent loading of jquery plugins to fail. My Drupal code loads the plugin js file OK, but actually trying to run the function provided by the plugin causes a "is not a function" error in the javascript console. Meanwhile, other inline code using the core jquery methods (like $("#this").hide() in my Drupal code works fine.

Here's an example from the resulting page markup:

Code: [Select]

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/jquery.js"></script>

... ( several lines lower ) ...

 <script type="text/javascript" src="/misc/jquery.js?n"></script>

... ( several lines lower, getting to my code ) ...

<script type="text/javascript" src="/sites/all/themes/fairvotemn/js/superfish.js?n"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--

  $(document).ready(function(){
    $("ul.sf-menu").superfish();
  });
 
//--><!]]>
</script>

I've tried it with three different jquery plugins (superfish, timers, curveycorners) that all work fine on non-CiviCRM pages, so I don't think the plugin code is the problem here. I've also tried different plugin function invocations like jquery(element).superfish(); and cl(element).superfish();

You can see an example of this problem (for the moment) here:

http://fairvote.reinventingthe.com/civicrm/profile/edit&gid=9&reset=1

Is the CiviCRM invocation of jquery hijacking later plugin loading (meant for the Drupal invocation of jquery)? Can I excise CiviCRM's invocation so my site is not loading jquery twice on some pages?

[teetree]

Same here. Superfish menus working on Drupal pages, not on Civipages. In order to truly integrate this site, I need to understand what is happening on the civi - side to ignore the jquery for superfish. Has anyone gotten past this or have a clue as to what might need to happen to stop this?

[Eileen]

And vice versa!

As at v 2.2.8 my civicrm autocomplete (based on http://civicrm.org/node/528) doesn't work on the drupal pages (?q=user/register) that I was using it on. If I delete the drupal jquery.js it does work.

Also on the same page I'm seeing 'calendar is not defined', - I thought this had been fixed? Perhaps it's not fixed until 3.0

[xavier]

Hi,

It's been an ongoing discussion with Kurund. So far we have identified two options:
- we override the existing jquery loaded by random module X (or drupal core), and we are sure that civicrm has the jquery version we want (but might cause problem in the other modules, I had the same problem you describe with other modules too)
- we take whatever jquery is loaded and it might be a version that is too old and civicrm doesn't work

so far as you have experienced, that's the first option that is implemented (the main reason is that K is at least as stuborn as I am, contributes much more that I do beside arguing, and offered me a beer so I shut up if I recall our discussions properly .

Don't remember the detail, but some things we use (either custom code or one of the jquery plugin we add) aren't compatible with the version of jquery by default in drupal (civicrm needs a more recent version somewhere)

No matter what, having to deal with different modules expecting different versions of jquery (or different versions of one of the jquery plugins, or a mix of the two), is one I don't see any solution, beside a big warning. Throw standalone and joomla in the mix, and it gets even hairier.

If you have any suggestion to solve this catch 22 problem , please come in (and if in the process, you can come up with a good reason to use cj instead of $ as the "official" name of jquery on civicrm

X+

[teetree]

I really want drupal with working superfish menus to override civi so my integrated site menu system works consistently so disabling jq at drupal level is not a satisfactory solution in my case. Has anyone tried implementing superfish on a standalone civi? May shed some light as to what is missing - as an example.

[xavier]

You'll have to dig on the html source and check the js errors (firebug is your friend), but one of the problems I had was something like (didn't try too hard to fix, disabled the module at the end, didn't have the time to investigate):

- jquery + suckerfish is loaded
- civicrm is loaded, and jquery is overloaded with the jquery from civicrm, and it erases the original one with suckerfish plugin
- your custom code tries to call a suckerfish defined method that isn't there anymore, and fails

Have a look at the source, see if that's your case.
X+

[torenware]

How are you folks loading your plugins, exactly?

I haven't seen this yet.  But a jQuery plug-in, IIRC, loads itself into the jquery object, effectively putting it into a particular namespace.  When a CiviCRM page runs, it's going to have the "cj"  version of the object running, but I've discovered that the Drupal copy of jquery may not be running, unless something is calling drupal_add_js() somewhere in the page. 

Also, it seems clear that when you include a particular plug-in, it's going to be loaded into the context of one, and only one, jquery object.  I suspect _which_ object gets the plug-in depends a lot on how you load it.

I load my plug-ins via drupal_add_js(), rather than by directly including it in the theme, or by injecting the JavaScript via a Smarty template the way that CiviCRM does it.  This seems to work, in that the plug-in loads into the Drupal copy of the jquery object.  The calls to drupal_add_js are wrapped in a function that uses something like this to make sure it isn't loaded twice:

Code: [Select]

function load_my_library() {
  static $loaded;
  if (empty($loaded)) {
    $loaded = TRUE;
     ... get the path to my library
   drupal_add_js($path_to_my_library, 'module);
  }
}

Maybe I'm lucky and the problem is specific to certain libraries (so I also have the problem, and just haven't seen it yet).  But how are you folks doing your loading?

[Eileen]

Hey thanks Xavier & torrenware - I did get it fixed. The thing that had changed since v2.2.2 & v2.2.8 seemed to be the order in which the CiviCRM & the Drupal versions of jquery were called (on the user register page).  Anyway I changed the $ in my script to a cj and it seems to be working again.

For what it's worth I think that the idea of using a separate version of jquery for CiviCRM & the cj reference is the way to go. The idea of trying to share versions with different apps is terrifyingly reminiscent of java - arrghh.

[petednz]

x - did you get the beer?

[xavier]

For what it's worth I think that the idea of using a separate version of jquery for CiviCRM & the cj reference is the way to go. The idea of trying to share versions with different apps is terrifyingly reminiscent of java - arrghh.

Agree. However, the two versions will compete with the same domain space ($ probably, jQuery certrainely). Putting an alias with cj doesn't solve it, and various jquery plugins loaded by civicrm are going to assume jQuery (or $) is there, and that's the version packaged by civicrm.

Not sure at all how, nor if, there is a solution to handle the conflicts that might arise. rescheffling the order of the modules might help to end up in the right spot with whatever is expected loads at the right time, or that the version loaded is not the right one but compatible enough with what was expected. I'd be delighted to be proven wrong and that an obvious solution exists, but my experience with python modules, or PEAR hasn't shown me anything that just works easily.

X+

[teetree]

this is the error I am getting:

$("#superfish-inner ul").superfish is not a function
anonymous()info?id=...9&reset=1 (line 62)
anonymous()jquery.j...val/seq/4 (line 1)
anonymous()jquery.j...val/seq/4 (line 1)
anonymous([function(), function()], function(), Object name=c)jquery.j...val/seq/4 (line 1)
anonymous()jquery.j...val/seq/4 (line 1)
[Break on this error] dropShadows: false ... // disable drop shadows );\r\n

also here is the head section of the html...I have tried several approaches - none work:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Event Information | www.verite.org</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">@import url(http://www.verite.org/sites/all/themes/verite/css/civicrm.css);</style>
<meta http-equiv="X-UA-Compatible" content="IE=7" /><style type="text/css">@import url(/sites/all/modules/civicrm/css/skins/aqua/theme.css);</style>
<script type="text/javascript" src="http://www.verite.org/sites/all/modules/civicrm/packages/dojo/dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true, usePlainJson: true" ></script><script type="text/javascript" src="http://www.verite.org/sites/all/modules/civicrm/packages/dojo/dojo/commonWidgets.js"></script><style type="text/css">@import url(/sites/all/modules/civicrm/packages/dojo/dijit/themes/tundra/tundra.css);</style><script type="text/javascript" src="/sites/all/modules/civicrm/js/calendar.js"></script><script type="text/javascript" src="/sites/all/modules/civicrm/js/lang/calendar-lang.php?en_US"></script><script type="text/javascript" src="/sites/all/modules/civicrm/js/calendar-setup.js"></script><script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/jquery.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/jquery-ui.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/jquery-ui.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/flexigrid.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/flexigrid.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.autocomplete.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/jquery.autocomplete.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.chainedSelects.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.treeview.min.js"></script>
<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.bgiframe.pack.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
  <link type="text/css" rel="stylesheet" media="all" href="/modules/book/book.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?z" />

<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date_popup/themes/datepicker.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date_popup/themes/timeentry.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/fckeditor/fckeditor.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/calendar/calendar.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/misc/farbtastic/farbtastic.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/verite/style.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/verite/css/custom_style_plain.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/verite/css/custom_fonts.css?z" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/verite/sf/css/superfish.css?z" />
  <!--[if lt IE 7]><style type="text/css" media="all">@import "/sites/all/themes/verite/conditional-le-ie6.css";</style><![endif]-->
  <!--[if IE 7]><style type="text/css" media="all">@import "/sites/all/themes/verite/conditional-le-ie7.css";</style><![endif]-->
  <!--[if Safari]><style type="text/css" media="all">@import "/sites/all/themes/verite/conditional-le-safari.css";</style><![endif]-->

    <script type="text/javascript" src="/misc/jquery.js?z"></script>
<script type="text/javascript" src="/misc/drupal.js?z"></script>
<script type="text/javascript" src="/sites/all/themes/verite/sf/js/superfish.js?z"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/" });
//--><!]]>
</script>
      <script type="text/javascript">
      $(document).ready(function() {
        $('#superfish-inner ul').superfish({
         delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows );
          });

        $('.nav li li:has(ul) > a').addClass('subfish');
     });
    </script>

  </head>

[CiviTeacher.com]

It seems that if the CiviCRM module is installed and active on Drupal, then by default CiviCRM loads its Javascript through Drupal no matter what node on the Drupal site you're on, even if the Drupal node has nothing at all to do with CiviCRM.  (and contains Javascript that would potentially conflict with CiviCRM's Javascript)

Is there a way to make exceptions to CiviCRM Javascript loading: "Don't load CiviCRM Javascript on the following pages..." much the way through Drupal we can elect to NOT load certain Blocks on certain nodes?  

Or is this not feasible?

[alextronic]

Is there a way to make exceptions to CiviCRM Javascript loading: "Don't load CiviCRM Javascript on the following pages..." much the way through Drupal we can elect to NOT load certain Blocks on certain nodes?  

I used to have a problem with the Popups module in Drupal; the solution was to disable the jQuery Update module (in case some if you are using it, might cause to override or overload jQuery) and implementing the following conditional in the popups module. Checks src for the jQuery string, and skips if so.

Code: [Select]

for (var i in scripts) {
var src = scripts[i];
if (src.match('/misc/jquery.js')) {
civicrm.addedJS[src] = true;
}
if (!$('script[src='+ src + ']').length && !civicrm.addedJS[src]) {
Of course you'll have to adapt it and use it in CiviCRM module before it loads jQuery... Would that be possible?

[Donald Lobo]

hmm, i dont think civicrm loads its JS on non civicrm pages.

However if you have a civicrm block exposed on that page (like the event block), civicrm will add the js files etc

lobo

[CiviTeacher.com]

Thanks lobo I just checked into this.  It turns out we do have an Events Block that uses some custom PHP to display CiviCRM events.  I removed this events block from the homepage of our site but the CiviCRM Javascript jquery libraries still load on the homepage and seemingly every other page.   I am not sure I fully understand why CiviCRM is loading this jquery on pages that are not /civicrm.  It would be really nice on a couple of pages of our site that don't need CiviCRM content to have this Jquery stuff NOT load.

Code: [Select]

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/jquery.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/jquery-ui.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/jquery-ui.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/flexigrid.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/flexigrid.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.autocomplete.js"></script>
<style type="text/css">@import url(/sites/all/modules/civicrm/packages/jquery/css/jquery.autocomplete.css);</style>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.chainedSelects.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.treeview.min.js"></script>
<script type="text/javascript" src="/sites/all/modules/civicrm/packages/jquery/plugins/jquery.bgiframe.pack.js"></script>

<script type="text/javascript" src="/sites/all/modules/civicrm/packages/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>