How to Use FireBoard (JQuery) and YooTheme or RocketTheme (Mootools) together with noConflict()

Sunday, 20 April 2008 13:41 Last Updated on Friday, 24 December 2010 08:30

If you're trying to use FireBoard 1.0.4 and any YooTheme, RocketTheme, or any other Joomla templates or Joomla components that utilize the MooTools framework, you will find out that MooTools has a conflict with FireBoard's JQuery framework. In my case, when I tried to use Fireboard and Page YooTheme template together, my MooTools that came with the template became non-functional on the FireBoard forum page because it overwrote MooTools framework. Everything that uses MooTools framework, like styleswitcher, spotlight, slider, and pretty much the whole YooTools package threw errors not being able to find required functions. Thankfully, developers at JQuery implemented a really easy workaround with the noConflict() method. Unfortunately, nobody at YooTheme, RocketTheme, and FireBoard seem to know about this easy fix. I know this because I originally searched in their forums for hours for the fix, and they all just gave up, which was very discouraging for me at first, and I almost gave up. However, I knew more about the problem, and it was simple problem, and I was willing to try to hack the thing myself to make it work. Eventually, I found out about the noConflict() method that nobody at these forums suggested. I found out later that JQuery and MooTools forums were much more helpful, and have a much more of a "developer" community, whereas other forums I mentioned earlier have a more of a "customer-in-crisis" community with no developers to help them. In YooTheme's case, I was very disappointed with their lack of any real developers. There are few staff members that go around the forum and answer questions, but it seems like their job is just to tell their customers that there is no fix. Those staff members are probably not developers, but rather customer support.

Here is the fix with noConflict()

1. Open /syydemo/components/com_fireboard/fireboard.php

2. Find

// Add required header tags
$mainframe->addCustomHeadTag('<script type="text/javascript" src="' . JB_JQURL . '"></script>');
$mainframe->addCustomHeadTag('<script type="text/javascript">

3. Add noConflict() methd below so it looks like this.

// Add required header tags
$mainframe->addCustomHeadTag('<script type="text/javascript" src="' . JB_JQURL . '"></script>');
$mainframe->addCustomHeadTag('<script type="text/javascript">
jQuery.noConflict();

Here is an explanation of how noConflict() works. JQuery backsup $ variable when it starts loading and overwrites $ variable. noConflict() method simply replaces the current $ variable with backed up $. You need to do this at the end when JQuery is done with loading. The scenario with FireBoard and YooTheme is that MooTools first gets loaded to $ variable, then FireBoard comes and overwrites it, now when you add jQuery.noConflict() method, you are telling it to bring back its overwritten $ back. This method can go anywhere after loading JQuery. This fix will not only work with JQuery and MooTools, but JQuery and any other frameworks it may have conflict with. They can be fixed in a similar way. A helpful hint if this doesn't work is to check if you're loading JQuery first, and then MooTools. If that's the case, you will want to switch the loading points of these frameworks, so that JQuery gets loaded later. At the moment, JQuery is the only framework smart enough to back up things it overwrites. Their developers are smart enough not to assume the people are only going to one framework at a time. If you have any questions, leave a comment here, and I will try to answer.

TrackBack URI for this entry

Comments (37)

Subscribe to this comment's feed