Author Topic: CiviCRM js breaks Drupal-triggered jquery plugins? (Read 20359 times)

greenmachine · September 09, 2009, 12:08:02 pm

One suggestion: perhaps CiviCRM could have as a global settings field/variable whether to load the CiviCRM jQuery library, or to assume that something else (ie Drupal) is loading it. That way at least a developer could control the behavior.

greenmachine · September 09, 2009, 01:52:33 pm

Here's what I did to fix the problem:

Created a custom templates directory and defined it in Global Settings > Directories
Copied /templates/CRM/common/drupal.tpl and /templates/CRM/common/jquery.tpl to my custom templates directory
Deleted everything from my new coyp of jquery.tpl and took out the jQuery.noConflict line in drupal.tpl
Added necessary JS includes (from jquery.tpl) to my Drupal theme (page.tpl.php)

The new drupal.tpl file looks like this at the end:

Code: [Select]

{* We need to set jquery $ object back to $*}
{* JKM commented out per http://forum.civicrm.org/index.php/topic,8977.0.html
<script type="text/javascript">jQuery.noConflict(true);</script>
*}
</div> {* end crm-container div *}

And my page.tpl.php looks like this at the beginning:

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>

<!-- CiviCRM -->
<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 = $; </script>
<!-- end CiviCRM -->

I haven't tested it very much, but most importantly it allows the Drupal/module javascript on user-facing pages (ie signup, contribution) to work properly so the site doesn't look broken. I'll probably set up an admin-only theme to be used for backend CiviCRM pages that includes the original CiviCRM javascript includes/code just in case there is an incompatibility.

teetree · September 11, 2009, 01:17:53 pm

thanks greenmachine - will give this a try and report back to the thread

CiviTeacher.com · September 22, 2009, 08:34:33 am

As an interesting follow up to this, we were experiencing slow load times on our site. When we edited the civicrm.module Drupal file to only include the AJAX and Javascript required by CiviCRM on pages that contain CiviCRM content we reduced our average pade load time from 36 seconds to 12 seconds. That's a big AJAX package that CiviCRM is loading. I propose that it would be a good exploration to do conditional loading (only when needed) of these file.

on about line 72 of file: civicrm.module

Code: [Select]

    if (arg(0) === 'civicrm') {
      $head .= $template->fetch( 'CRM/common/jquery.tpl' );
    }

bcobin · October 11, 2009, 10:05:17 pm

Drupal 6.14
Civi 3.0.1

I can confirm that Collapsiblock fails on Civi pages, but I don't know how to verify whether or not this is directly pertinent to this thread (I assume it is.) I have a collapsible block for newsletter mailing list submission and new Drupal account creation; the block opens and remains open when on Civi pages.

Sad to say, most of this discussion is beyond me and I would welcome any guidance as to a workaround - greenmachine's fix (brilliant though it may be) looks a bit too involved in my particular case.

I expect to deploy the site shortly to an IP (the bug is not worth holding up production for) and will post the address here, if anyone thinks it would be worthwhile. In the meantime, any suggestions would be most appreciated - thanks!

xavier · October 11, 2009, 11:08:44 pm

What about civi testing (in js) if jQuery is already defined, and if the version is higher than what it needs instead of always <script> include it ?

I saw an interesting jQuery plugin (that I can't find anymore), that lazy load additional plugins, eg. not always loading the 10 or so plugins, but only when they are needed. Does it ring a bell and have you tried it ?

X+

bcobin · October 12, 2009, 08:39:45 am

I tried the suggested fix in #16 and wasn't able to get it to work - Civi pages took forever to load (over a minute) and js was broken, including the original problem. Nice try... though there has to be a better way. Reverting...

As Drupal is seeming to implement js more and more, I'd say this is a serious issue that should be addressed sooner rather than later - but of course, that's easy for me to say as a designer - not a developer.

Wish I could be of more help here - I will post a link to the IP-deployed site as soon as it's up in case anybody has a suggestion - thanks!

torenware · October 14, 2009, 12:57:25 am

Quote from: xavier on October 11, 2009, 11:08:44 pm

What about civi testing (in js) if jQuery is already defined, and if the version is higher than what it needs instead of always <script> include it ?

I saw an interesting jQuery plugin (that I can't find anymore), that lazy load additional plugins, eg. not always loading the 10 or so plugins, but only when they are needed. Does it ring a bell and have you tried it ?

X+

This is probably the best approach: for Civi to wrap its JS deploying code in platform specific implementations. I suspect this is also an issue with Joomla as well, since jQuery is getting a lot of use.

It's occurred to me that because jQuery uses the global variable "jquery", that there cannot be a safe way for two instances of jquery to load without the two instances clobbering each other. Aliasing '$' to 'cj' doesn't cut it, because the CiviCRM instance of jquery is still using the jquery variable in background, as is the Drupal instance.

Under Drupal, there's no good alternative to using drupal_add_js(). And whatever call Joomla does to accomplish the same thing.

CiviCRM should only load its JavaScript directly in standalone mode.

bcobin · October 22, 2009, 08:56:53 pm

The IP-deployed site is here: http://174.37.219.149/. Note the Newsletter signup block on the upper right; the block is collapsed using Drupal collapsiblock.

On any CiviCRM page, like http://174.37.219.149/civicrm/event/info?reset=1&id=1, note that collapsiblock fails and the block remains expanded.

Any ideas? Thanks!

xavier · October 26, 2009, 10:58:40 am

Quote from: torenware on October 14, 2009, 12:57:25 am

This is probably the best approach: for Civi to wrap its JS deploying code in platform specific implementations. I suspect this is also an issue with Joomla as well, since jQuery is getting a lot of use.

It's occurred to me that because jQuery uses the global variable "jquery", that there cannot be a safe way for two instances of jquery to load without the two instances clobbering each other. Aliasing '$' to 'cj' doesn't cut it, because the CiviCRM instance of jquery is still using the jquery variable in background, as is the Drupal instance.

Under Drupal, there's no good alternative to using drupal_add_js(). And whatever call Joomla does to accomplish the same thing.

The problem is that civicrm is likely to need a more recent jquery version than the one in drupal. And that will be hell to debug/support, so not sure at all you can blindly use the jquery provided.

And yes, there is a namespace collision on jQuery if you try including both.

bcobin · October 29, 2009, 03:36:05 pm

Running into this same problem again on another site I'm doing - I'm using forms for both search and newsletter subscription with javascript text overlays where the text disappears on focus. It all looks great, until...

...you go to a Civi page, where it all breaks. Major bummer.

I'm not a tech, but wouldn't it be a good idea to synchronize with the lowest common denominator of the jQuery version being used by Drupal/Joomla and depend on their scripts? Do I even know what I'm talking about? (Don't put money on it.)

I would have to say that Civi "breakage" of Drupal javascript is pretty major... thoughts? Thank you...

Donald Lobo · October 29, 2009, 04:27:03 pm

in general the lowest common denominator is just a bad idea, IMO.

Drupal and Joomla have a major release/upgrade every couple of years? (and increasing). We tend to have 2-4 upgrades on a yearly basis

for the short term u might want to exclude those forms on a civicrm page

lobo

bcobin · October 30, 2009, 07:14:27 am

Thanks, Donald - it looks like I'll have no choice save to either disable and/or come up with alternate versions of the forms for Civi pages for now.

But I do like the fact that you said, "for the short term," which is hopeful!

I would say the topic deserves serious thought, especially in light of the seeming increase of javascript usage in Drupal; the current situation is akin to having a car (Drupal) with a great audio system (Civi), but the radio makes the car break down in certain parts of town.

Except for the standalone version, Civi is dependent on the host CMS, so as distasteful as it might be, my opinion would be that java compatibility should in general take precedence over using the "latest and greatest" javascript - to strain the car metaphor further, what good is the stereo system if the speakers don't fit in the car?

Thanks for the response and for all the great work you're doing - for now, I will "stay tuned..." Rock on!

Donald Lobo · October 30, 2009, 08:00:59 am

following the car analogy: the radio uses its own set of electronics and does not share a lot with the car electronics (probably nothing!)

finally taking it one step further: folks are getting the car and radio for FREE (along with FREE maintaneance), might be super useful if folks step up and help fix the issues and/or sponsor someone to take a closer look at it and figure out something that will work for both systems

lobo

bcobin · October 30, 2009, 10:01:54 am

Agreed! (Such a deal!)

Please don't misconstrue my point here - I am not complaining, I'm merely seeking to define a problem, which you have done very well indeed. Currently, the workaround is to avoid Drupal javascript on Civi pages - and that is extremely useful information you've provided. I doubt, however, that it will end up being a desirable and lasting solution and am willing to help however I can.

I wish I had coding skills to solve the problem, but I would certainly be happy to test code and/or do anything else that might be useful - let me know!

Thanks for taking the time - it is greatly appreciated, as always - keep up the great work... back to work for me! Rock on...

CiviCRM Community Forums (archive)

News:

Author Topic: CiviCRM js breaks Drupal-triggered jquery plugins? (Read 20359 times)

greenmachine

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

greenmachine

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

teetree

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

CiviTeacher.com

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

xavier

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

torenware

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

xavier

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

Donald Lobo

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

Donald Lobo

Re: CiviCRM js breaks Drupal-triggered jquery plugins?

bcobin

Re: CiviCRM js breaks Drupal-triggered jquery plugins?