Houston, we.. 've a jQuery problem-> noConflict

12 years 7 months ago #90977 by ndee
Hi,

the way jQuery is implemented with CB 1.2 stable and latest plugins breaks other modules if they use mootools/prototype js lib :whistle:

How to reproduce: Enable a module or a template which uses mootools on every page. Call any CB page using jQuery e.g. "forgot password" or any profile page if a plugin using jQuery is published e.g. profileGallery ---> If jQuery comes into play mootools modules/parts will stop working.

Please confirm - tried 2 different mootools modules "RokSlide" and some News Tab module.


AFAICS CB does not use the noConflict mode correctly. Regarding to jQuery docs[1] CB uses two different techniques to avoid library conflicts:
1) you call jQuery.noConflict();
-> the result is that you will have to use jQuery instead of the $ shortcut on EVERY call.
2) CB uses (jQuery) at the end of functions (partly) to not have to use "jQuery" on each call
-> so far so good BUT regarding to docs this only affects the CURRENT code block. It seems that some code blocks have no (jQuery) at the end and $ overwrites the $ form mootools an breaks it.

Possible solutions would be:
a) add missing (jQuery) calls at the end of each block or
b) use jQuery instead of $ for EVERY appearance.
c) take the bulletproof approach which is my favourite as I used it with some projects 100% working with mootools templates and modules:

Overwrite the $ function with its own CB sign e.g. $cb. "var $cb = jQuery.noConflict();"

On line 2220 of admin../comp../com_comp.../plugin.foundation.php change
[code:1]$this->document->addHeadScriptUrl( '/components/com_comprofiler/js/jquery-' . _CB_JQUERY_VERSION . '/jquery-' . _CB_JQUERY_VERSION . '.js', true, null, 'jQuery.noConflict();' );[/code:1]
to
[code:1]$this->document->addHeadScriptUrl( '/components/com_comprofiler/js/jquery-' . _CB_JQUERY_VERSION . '/jquery-' . _CB_JQUERY_VERSION . '.js', true, null, 'var $cb = jQuery.noConflict();' );[/code:1]

and then replace all $-functions with the new $cb - imho a much cleaner and less conflicting, less confusing way of implementing the current jQuery.noConflict(); thing.

Another benefit would be the possibility to call mootools or prototype with $ between code blocks of jQuery, while the current way with (jQuery) at the end of code blocks would not allow that.

What do you think?

[1] Using jQuery with other libraries

CB 1.2
J! 1.5.9

Post edited by: ndee, at: 2009/03/07 00:22

###################
SPEED UP HELP, read first: Help us help you
###################

Please Log in to join the conversation.

12 years 7 months ago #90980 by beat
Very good analysis B) on usual wrong uses of jQuery's noConflict mode B) with mootools "conflict-only" :angry: mode.

But I'm not sure that the reason is what you think. ;)

As a matter of fact, I took a whole week to get CB to use jQuery in full non-conflict mode, and as a result of those 1-week-long findings, I'm a small contributing author of the small but crucial "NOTE" on this jQuery noConflict() documentation wiki page :whistle:

CB is not using the $ javascript variable outside of a jQuery renaming function, which references the jQuery global variable into a $ parameter making it a local variable which doesn't overwrite other global $ variables. We also checked (and fixed and reported bug back) all plugins that we used and which did use $ global instead of jQuery global.

Anyway, that's for the theory part :)

Practical part:

E.g. CB works fine with joomla 1.5, which uses mootools on each page.

It seems that some code blocks have no (jQuery) at the end and $ overwrites the $ form mootools an breaks it.


Could you please point me to such a block from CB in a real page ?
Would be very surprising, as CB provides and uses it's own jQuery PHP API to make sure that things are outputed in good order per above's theory.

Test part:

I went up to installing rokSlideshow with mootools enabled (suppose that's same as RokSlide) on a joomla 1.0 site, and then also on a Joomla 1.5 site as well, and tested that both CB ProfileBook and CB's lost password page are working fine.

You can try same in a default Joomla site with default template (or MyCommunity template) and CB and rokSlideShow module. It works.

Stats part:

This is the very first incompatibility report that I'm seeing since I implemented the complete-noConflict method outlined in my "NOTE" in jQuery's documentation, and that's since CB 1.2 RC 4 I believe, so that's way better stats than any other previous javascript implementation we had.

So must be something else outside CB and ProfileBook and ProfileGallery... :whistle:

Some hints to explore:

E.g. are you sure that you are loading only one time mootools ? and not loading prototype in same page ?

If you look with FIrebug at the page, what javascript error do you get in the javascript error console ?

EDIT: FIxed formating of link

Post edited by: beat, at: 2009/03/07 01:12

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

12 years 7 months ago #90982 by ndee
Hi Beat,

thanks for your detailed answer. After downloading 6+ modules and trying them all out with standard template (rhuk_milkyway).

Seems that I had luck first 4 downloaded plugins stop working when accessing CB pages. Some other work. I wrote the post after testing the first two of them - did I have luck and picked some bad written modules randomly? Dunno :)

beat wrote:

Very good analysis B) on usual wrong uses of jQuery's noConflict mode B) with mootools "conflict-only" :angry: mode.

But I'm not sure that the reason is what you think. ;)

As a matter of fact, I took a whole week to get CB to use jQuery in full non-conflict mode, and as a result of those 1-week-long findings, I'm a small contributing author of the small but crucial "NOTE" on this jQuery noConflict() documentation wiki page :whistle:

CB is not using the $ javascript variable outside of a jQuery renaming function, which references the jQuery global variable into a $ parameter making it a local variable which doesn't overwrite other global $ variables. We also checked (and fixed and reported bug back) all plugins that we used and which did use $ global instead of jQuery global.

Anyway, that's for the theory part :)

I see.

Practical part:

E.g. CB works fine with joomla 1.5, which uses mootools on each page.

It seems that some code blocks have no (jQuery) at the end and $ overwrites the $ form mootools an breaks it.


Could you please point me to such a block from CB in a real page ?
Would be very surprising, as CB provides and uses it's own jQuery PHP API to make sure that things are outputed in good order per above's theory.

That makes sense, so it is assured that jQuery does not break other functions. So the $ function calls after (document).ready() do not break anything. Very clever :)

Test part:

I went up to installing rokSlideshow with mootools enabled (suppose that's same as RokSlide) on a joomla 1.0 site, and then also on a Joomla 1.5 site as well, and tested that both CB ProfileBook and CB's lost password page are working fine.

You can try same in a default Joomla site with default template (or MyCommunity template) and CB and rokSlideShow module. It works.

Stats part:

This is the very first incompatibility report that I'm seeing since I implemented the complete-noConflict method outlined in my "NOTE" in jQuery's documentation, and that's since CB 1.2 RC 4 I believe, so that's way better stats than any other previous javascript implementation we had.

So must be something else outside CB and ProfileBook and ProfileGallery... :whistle:

As written above, some work some don't but knowing what you did to make sure jQuery runs in noConflict() mode I doubt it is CB / CB plugin related.

Some hints to explore:

E.g. are you sure that you are loading only one time mootools ? and not loading prototype in same page ?

If you look with FIrebug at the page, what javascript error do you get in the javascript error console ?

EDIT: FIxed formating of link

Post edited by: beat, at: 2009/03/07 01:12

Will check that tomorrow. As I'm using the standard templates to test it seems not to be template related.

With RokSlideshow I got a class is not defined error and a resulting missing constructor. Will report back tomorrow.. time to go to bed :)

Thank you for your time and clarification.

Post edited by: ndee, at: 2009/03/07 02:05

###################
SPEED UP HELP, read first: Help us help you
###################

Please Log in to join the conversation.

12 years 7 months ago #90983 by beat
Probably a conflict between those modules (or a setting to load a lib twice, as I understand you runing in joomla 1.0.x).

Also where javascript libraries are loaded matters.

Most joomla 1.0 modules don't load (because they can't) the javascript in the < head > portion of the page source.

Finally loading CSS before Javascript matters too, but unfortunately even core joomla 1.5.9 templates, save 3pd templates, didn't do it right yet.

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

12 years 7 months ago #90996 by nant
Good reading ;)

For those of us that when looking at similar threads and the title ( :P ) think of all this as rocket science, please keep in mind that the CB Team puts a great deal of effort to get things right BEFORE handing over to test teams.

Of course some times this cycle appears to be insanely time consuming and patience taxing for our community but I guess if things are released earlier, then frustration would be just as bad and would impact live sites and live communities - I for one am thankful that this is the case.

Don't get me wrong - I feel that features should be added quicker and released faster. This is the goal. reaching this goal without compromising quality is the challenge.

Please Log in to join the conversation.

12 years 7 months ago #91011 by ndee
beat wrote:

Probably a conflict between those modules (or a setting to load a lib twice, as I understand you runing in joomla 1.0.x).

Also where javascript libraries are loaded matters.

Most joomla 1.0 modules don't load (because they can't) the javascript in the < head > portion of the page source.

No, as written above I'm using J! 1.5.9 and CB 1.2.

Mootools 1.11 are loaded by Joomla! Core. Only the above mentioned RokSlideshow and Menu (w/o effects) and login module are published.

I will do some further tests and report back if I found something weird. For you RokSlideshow works with J!1.5.9 and CB 1.2, so I can be sure that RokSlideshow is not broken?

Finally loading CSS before Javascript matters too, but unfortunately even core joomla 1.5.9 templates, save 3pd templates, didn't do it right yet.

Ok will check that. But doesn't $(document).ready() and its mootools counterpart ensure that all DOM and CSS is loaded before any action takes place?
This means if I make a custom module/plugin and load a .css there, it is likely that it will break? How can I inject module/cb plugin specific .css and .js files into the head of the document?

Thanks!

###################
SPEED UP HELP, read first: Help us help you
###################

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.209 seconds

Facebook Twitter LinkedIn