custom JQuery functions not running with Joomla 3.2

[attachment=0]clubaero.zip[/attachment]Here is a form in the online version of my website http://clubaero.nl/en/formula/survey running Joomla 3.1. I use a Chronoform which I built with custom HTML code and custom JQuery scripts. I use several JQuery functions. For instance, filling in the ‘country’ form field activates my own JQuery script which automatically inserts the international dialing code in the dialing code field. The JQuery scripts seem to work okay in the online website.

Offline I am upgrading the website running under Wampserver with a multilingual J3.2. I use a similar Chronoform (see attachment) with the same JQuery routines, but somehow none of my JQuery routines are activated when the user fills in the form fields.

BTW, when the browser (Chrome) opens the form in the website I can see from the generated source code that Joomla has tried and failed to download a map file for my JQuery-1.10.2.js, even though I am not using the compressed version of the JQuery file? I doubt however if this is the cause of my own JQuery functions not being activated.

Could anyone tell me what may be wrong? Why aren’t my JQuery routines being activated?

Hi clubaero,

The handling of JavaScript libraries changes somewhere in the Joomla 3 releases so that JQuery and the Bootstrap code is now included in Joomla and MooTools is deprecated. It may be that your site is loading two different jQuery libraries and there is some conflict between them?

Really, you are the only person who can debug your custom code on your local development site.

Bob

Hi Bob
I appreciate you can't solve everyone's problems! But I'm almost there 🤔
From the same custom HTML Chronoform, Joomla 3.2 generates 4 more JS files than Joomla 3.1.5. In addition it generates:
<script src="/j32/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/j32/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/j32/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/j32/media/system/js/tabs-state.js" type="text/javascript"></script>

After these new JS files my own JS files follow.

The first of these extra js files seems to be the problem. If I change the order of this first JS file – using a text editor on the code generated by Joomla from my customHTML Chronoform - so that it is no longer the first of the four new JS files, my own JQuery functions are now working again. For instance:
<script src="/j32/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/j32/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/j32/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/j32/media/system/js/tabs-state.js" type="text/javascript"></script>

‘jquery.min.js’ is now the second of the four new JS files. My JQuery functions now work okay. 😀
I tested this by copying the source code generated by Joomla 3.2 into a text file and editing the text file before saving the file as html.

The thing is: how can I change the order of the 4 new JS files which Joomla 3.2 generates from my custom Chronoform🤨
The relevant code lines (from which Joomla 3.2 presumably generates the html) in my custom Chronoform are:
$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
$doc->addScript($clubaero_url.'scripts/wufoo.js');
$doc->addScript($clubaero_url.'scripts/clubaero.js');

I really hope you can give me some advice on this?

Hi clubaero,

Still hard to know :-( If Joomla! is loading jQuery then you should be able to use that instead of loading your own version. The noConflict file needs to come after the main library if it is going to do anything useful.

I'm guessing that you may need to edit your code so that it will work in noConflict mode - which probably means using jQuery() instead of $()

Bob

Hi Bob - Thanks for your help on this problem. I tried changing all the '$' characters to 'jQuery' in my custom JS file but that didn't make any difference.
But still your advice was a great help🤔
You explained that jquery-noconflict.js has to be after the main jQuery.min.js to have any effect. My testing showed that my own custom routines only work in Joomla 3.2 when jQuery-noconflict.js was placed before the jQuery.min.js instead of after (thus having no effect)🙄
So that must mean that the effect of having jQuery-noconflict.js in the first position in the markup produced by Joomla 3.2 was the reason that my own routines were no longer working.
I have now removed the jQuery-noconflict.js file from the Joomla3.2 folder:
/MySite/media/jui/js/
and my forms, with my own custom jQuery routines, are now working again 😀

Of course simply removing the offending file is probably not the best solution. In the API for jQuery-noconflict.js I read that:

If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

.
I understand what 'globally scoped' means but I have no idea why that should be a problem.
Thanks again for your help - I now have something to work on......

Hi clubaero,

I'm not at all sure that changing $ to jQuery will do what you need - you'd have to check the jQuery libraries to see what the correct syntax is.

Removing the noConflict file is absolutely the **worst** solution :-( Just remember that you have done that (a) when you upgrade Joomla! and (b) when other things start to break.

The **right** solution is to re-write your jQuery so that it will run correctly in noConflict mode. It probably isn't a major task.

Bob

[attachment=0]wufoo.txt[/attachment][attachment=1]clubaero.txt[/attachment]
Hi Bob - How right you are! I'm stuck between a rock and a hard place! If I delete the jQuery-noconflict.js then my custom jQuery routines are working again (see attachment - file extensions changed to txt). But now I notice that I cannot access my form code via the Form manager - on pressing the code tab nothing happens😢 Now the only way to access my form code is via the database...
But if I restore the jQuery-noconflict.js file to its rightful position in the mysite/media/jui/js/ folder then now I can access my form code again 😀 But my custom jQuery routines no longer work....
I have no idea where to begin by solving conflicts with the main jQuery files .... you can see that my custom jQuery routines are very simple.

Hi clubaero,

I'll try to take a look but it may not be for a few days - we have a family wedding tomorrow and I'm still struggling to catch up after losing my main hard disk (no data lost, just a lot of time and hassle).

Bob

Thanks for your reply - and happy wedding ceremony. At my age (67) I usually attend funerals... (I have one tomorrow - really!)

Hi clubaero,

First, you should keep the noconflict where its, don't remove it!

Do you have any other libraries loaded on the page ? like mootools or something else ?

Please use FireBug and check the error which causes your scripts not to work!

Please try to remove this line:

$doc->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

Regards,
Max

Hi clubaero,

I have this running Ok on Joomla! 3.2 here - that means without any JavaScript errors.

Two changes were needed:

a) The Wufoo script redefines the addEvent function used by MooTools so that needs to be changed by replacing addEvent( with say addEventWufoo(

b) The jQuery script needs to be changed to remove the $ usage. Change the first line to

jQuery(document).ready(function(jQ){

and then replace $ with jQ everywhere else in the script.

Bob

Hello Bob
Yes that's the solution. Just change all the "$" characters to "jQuery" in my custom scripts!
I said that I had tried that before, but I had overlooked a mistake in my code. Sorry for wasting your time!
I had initially changed the IDs in my scripts when they failed to work in J32. That was why my scripts still wouldn't work even after I changed '$' to 'jQuery'.

Hi clubaero,

Good to hear that it's working OK, a useful little tutorial for other jQuery users.

Bob