CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Joomla Extensions (Moderator: lcdweb) »
  • civiCRM - Joomla J3 Mega Menu - jQuery conflict
Pages: [1]

Author Topic: civiCRM - Joomla J3 Mega Menu - jQuery conflict  (Read 6830 times)

Fredie

  • I’m new here
  • *
  • Posts: 5
  • Karma: 0
  • CiviCRM version: 4.1.1
  • CMS version: Joomla 2.5.4
  • MySQL version: 5.1.11
  • PHP version: 5.3.8
civiCRM - Joomla J3 Mega Menu - jQuery conflict
April 05, 2012, 07:00:39 am
We are just getting into using Joomla, with the J3 Framework and civiCRM. As a part of the J3 Framework, we are using the mega menu as our top level menu. It use jQuey to show UI/LI items in a drop-down menu. It works great until a civCRM form (e.g. event registration, profile input, etc.) is display then it quits. The top level is diplayed, but none of the drop-downs are viewable and none of the items work as links. Looking at the source code for the page being displayed, I noticed that it incudes lots of jQuery so I suspect that its conflicticting with the jQuey being used for the mega menu, but I can't figure out now to prevent the conflict. Both civiCRM and the J3 mega menu appear to be using jQuey.noConflict() so they should work independently. Thanks in advance for any assistance you can provide in resolving this issue.

lodestone

  • I’m new here
  • *
  • Posts: 20
  • Karma: 0
    • Montana FCF
  • CiviCRM version: 4.1.1
  • CMS version: Joomla 2.5.4
  • MySQL version: 5.1.61
  • PHP version: 5.3.8
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
April 23, 2012, 07:25:34 pm
I confess I'm not familiar with the code involved but my first thot is there is a variable name duplication between the two jQuery sets.

--Allen

Are you ABSOLUTELY sure there is no absolute truth?

Hershel

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4640
  • Karma: 176
    • CiviHosting
  • CiviCRM version: Latest
  • CMS version: Mostly WordPress and Drupal
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
April 24, 2012, 03:28:37 am
Fredie, can you look at such a page in Firefox with Firebug and look in the Console for an error?
CiviHosting and CiviOnline -- The CiviCRM hosting experts, since 2007

See here for the official: What to do if you think you've found a bug.

Fredie

  • I’m new here
  • *
  • Posts: 5
  • Karma: 0
  • CiviCRM version: 4.1.1
  • CMS version: Joomla 2.5.4
  • MySQL version: 5.1.11
  • PHP version: 5.3.8
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
April 24, 2012, 06:42:33 am
Yes, I have checked it with Firefox. There are no errors reported. I've not isolated the cause of the conflict yet, but further troubleshooting now has me thinking that it's not a jQuery conflict but a CSS issue. If I use the CSS Menu that comes with the T3 framework instead of the Mega Menu, the menus work.

tso2085

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 0
  • CiviCRM version: 4.7.15
  • CMS version: Joomla 3.6.5
  • MySQL version: 5.5.37
  • PHP version: 5.5.30
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
May 22, 2012, 06:52:05 am
I am having the exact same issue with JAT3 - Mega Menu and CiviCRM display (profile, form, etc.).   Your last statement that it does not seem to be JQuery is contradictory to your experience, it seems.  If you use CSS menu, it works.  If you use Mega Menu (JQuery) it does not.  Unless the CSS menu uses JQuery, which I do not believe it does, then it stand that this is a JQuery conflict issue?

tso2085

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 0
  • CiviCRM version: 4.7.15
  • CMS version: Joomla 3.6.5
  • MySQL version: 5.5.37
  • PHP version: 5.5.30
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
May 23, 2012, 11:15:57 am
Can anyone help with this?  It doesn't matter which CiviCRM function I present (listing a profile, email signup, user dashboard, new member registration, etc.), on the page is presented with the CiviCRM display, the JoomlArt Mega Menu sub-menus no longer slide down.  Clicking a top level menu item works, and then once on a page without a CiviCRM display, the sub-menus work fine again.

<edit:>  The hover-over windows on the member listing do not work either.  When you hover over the contact avatar on the listing, a window should come up with the contact details.  Just a black empty line shows up.

Thanks!
« Last Edit: May 23, 2012, 11:44:08 am by tso2085 »

tso2085

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 0
  • CiviCRM version: 4.7.15
  • CMS version: Joomla 3.6.5
  • MySQL version: 5.5.37
  • PHP version: 5.5.30
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
May 24, 2012, 08:10:55 pm
I did some Firebug debugging and I see the JQuery.noconflict() being invoked by CiviCRM in the jquery.min.js file.  But it is at the very end of the file, after all the other javascript has run.  Since the menu system is executed before the CiviCRM profile view (or whatever CiviCRM function you are invoking), should the JQuery.noconflict be at the beginning of the CiviCRM processes?

Not sure about this, as I am no expert.

Thanks!
Craig

howardshand

  • I’m new here
  • *
  • Posts: 13
  • Karma: 0
  • CiviCRM version: 4.1.5
  • CMS version: Joomla 2.5.6
  • MySQL version: 5.0.51b-community-nt
  • PHP version: 5.3.8
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
June 30, 2012, 05:03:38 pm
Hi Fredie,

Did you get this resolved? I am getting this error as well.

Firebug is displaying:
Code: [Select]
this.menu.getElements is not a function
prepare()mega.js (line 52)
b()mootools-core.js (line 141)
initialize()mega.js (line 47)
menu = "ja-megamenu"
options = Object { bgopacity=0, delayHide=300, slide=0, more...}
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 141)
g()mootools-core.js (line 136)
()index....mid=325 (line 214)
var imgElms = this.menu.getElements('img'); mega.js (line 52)
Found this reply helpful? Contribute NOW and help improve CiviCRM with the Make it Happen! initiative.

My current favorite is Recurring events and recording atten...

tso2085

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 0
  • CiviCRM version: 4.7.15
  • CMS version: Joomla 3.6.5
  • MySQL version: 5.5.37
  • PHP version: 5.5.30
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
July 03, 2012, 08:26:14 pm
All,

Here is what finally worked for me.  I worked with the Joomlart team and "Ninja" provided this solution.  Look in the jquery.tpl file located at this path:

<joomla dir>/administrator/components/com_civicrm/civicrm/templates/CRM/common

Insert this code at the very end of the jquery.tpl file

Code: [Select]
<script type="text/javascript">jQuery.noConflict();</script>
Please post if this works for you as well and we can document it as a solution to mootools and jquery conflicts with CivCRM.

howardshand

  • I’m new here
  • *
  • Posts: 13
  • Karma: 0
  • CiviCRM version: 4.1.5
  • CMS version: Joomla 2.5.6
  • MySQL version: 5.0.51b-community-nt
  • PHP version: 5.3.8
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
July 08, 2012, 09:31:29 pm
Hi tso,

Thanks for the suggestion, I am actually on version 4.1.3 and my jquery.tpl actually already has
Code: [Select]
<script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>inserted at the end of that file. Nevertheless tried adding the version of noconflict you suggested to no avail.
« Last Edit: July 08, 2012, 09:34:24 pm by howardshand »
Found this reply helpful? Contribute NOW and help improve CiviCRM with the Make it Happen! initiative.

My current favorite is Recurring events and recording atten...

tso2085

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 0
  • CiviCRM version: 4.7.15
  • CMS version: Joomla 3.6.5
  • MySQL version: 5.5.37
  • PHP version: 5.5.30
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
July 09, 2012, 08:05:42 am
Did you make sure you cleared your cache and JAT3 cache?  I am on CiviCRM 4.1.3 also (and Joomla 2.5.6).  My jquery.tpl had the line at the bottom you mention as well:

Quote
<script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>

The problem is it uses the "cj" var (for civicrm jquery, I presume) to avoid other jquery conflicts.  But you need the standard noconflict as well, as I posted, at the end of civiCRM functions.  I had read another post where it was indicated that civiCRM does not handle the noconflict properly (not looking for a fight here :-) ).

Quote
<script type="text/javascript">jQuery.noConflict();</script>

howardshand

  • I’m new here
  • *
  • Posts: 13
  • Karma: 0
  • CiviCRM version: 4.1.5
  • CMS version: Joomla 2.5.6
  • MySQL version: 5.0.51b-community-nt
  • PHP version: 5.3.8
Re: civiCRM - Joomla J3 Mega Menu - jQuery conflict
July 09, 2012, 08:00:38 pm
Thank you so much tso, this does work for me, I had forgotten to clear the cache.

+1 as a solution to mootools and jquery conflicts with CivCRM.
Found this reply helpful? Contribute NOW and help improve CiviCRM with the Make it Happen! initiative.

My current favorite is Recurring events and recording atten...
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Joomla Extensions (Moderator: lcdweb) »
  • civiCRM - Joomla J3 Mega Menu - jQuery conflict

This forum was archived on 2017-11-26.