Joomla, Ajax, jQuery: tips and tricks

When a site uses Ajax to retrieve html and dynamically insert it into its dom, there is a chance that some resources are loaded more than once.

This usually does not cause issues, nor speed issues since the browser will have the resources cached.

For stylesheets, the only annoying thing will be finding each rule multiplied several times in firebug.  No big deal.

The only issues you can face will be easily solved clearing the cache.

With scripts, however, a fundamental library such as jQuery could be reloaded.  Nothing bad about this; the issue becomes annoying when we use plugins dependant on such library, i.e. lightbox, colorbox, tipTip, placeholder etc, which may stop working after the first ajax call.

What happens: the main page will load:

jQuery.js

jQuery.colorbox.min.js

jQuery.otherplugin.js

The ajax-loaded html instead could have only:

jQuery.js

depending on whether it's modules or the component requiring the extra plugins.

At this point, when the calling page, after some user interaction or event, decides to invoke colorbox, it will on a new version of jQuery that does not have the colorbox plugin loaded!

Data e ora: 12/12/2012 15:31:42
Errore: TypeError: jQuery.fn.placeholder is not a function
File sorgente: http://test.com/ziggy.html
Riga: 904

How can I solve this?

Make sure jQuery is loaded once.

Ok, dimmi di più

The ajax calls will typically use one of the following formats when retrieving data:

...&tmpl=component  which includes (some) scripts and all inline declarations

...&format=raw   which contain just the component output (html markup without external libraries and styles)

In the second case, there will be no scripts loaded, so the problem should not occur; if you do not require to load extra scripts beyond the first page it will be safer to use this approach (format=raw).

The first instruction &tmpl=component is handled by the file component.php in your template's directory: thus the solution needs to be addressed by editing the component.php file:

a) if jQuery is loaded with markup, try to remove it

b) if it is not, a plugin may be inserting it. Check with the plugin configuration, if it doesn't allow you to avoid adding scripts on tmpl=component:

b.1) manually insert jQuery in the template's index.php

b.2) disable the plugin or edit its code.