Zug.fr :: le blog d'un geek ...

jQuery, un collocataire qui sais ce faire discret !

J'ai récement (hier !) du faire fasse a un problème dans Joomla!. Par defaut, la librairie javascript Mootools est installée, et ajoutée à tous les templates.

C'est sympa, vu que la plupart des modules utilisent Mootools pour faire des effets ou de l'ajax, ca marche tout seul. Mais moi, j'y connais rien à Mootools, et je n'ai pas trouvé ce que je cherchais, tout beau, tout fait, pret à installer.

Donc je devais partir sur l'écriture du code nécessaire pour réaliser ce dont j'avais besoin. Problème : jQuery, qui est la seule chose que je maitrise, est sois disant incompatible avec Mootools !

Et bien ce n'est pas vrai, et même si l'on dois faire attention, on peut faire cohabiter les deux !

Exemple d'inclusion des deux librairies :

1
23

<script type="text/javascript" src="/path/to/mootools.js"></script>
<script type="text/javascript" src="/path/to/jQuery.js"></script><script type="text/javascript" src="/path/to/aJqueryPlugin.js"></script>

Le truc vital se passe ici :

1

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

C'est un methode pour surcharge la methode $, qui par defaut est un raccourcis vers jQuery, mais egalement vers Mootools, d'ou les conflits !

Une fois ceci effectué, tapper votre code en remplacant $ par jQuery, pour TOUT les appels a jQuery (les autres librairies, Mootools par exemple, continuent de fonctionner de manière identique):

1

jQuery('#MonIdElement').monAction() ... ;

Deux autres méthodes, existent, et semblent plutôt sympa. L'une consite à reassigné à jQuery un autre raccourcis, pour aller plus vite :

1
23

var $j = jQuery.noConflict();
[...]$j('#MonIdElement').monAction() ... ;

L'autre a ajouter jQuery avant les autres librairies, rendant inutile la surcharge avec noConflict, mais rendant toujours possible le changement de raccourcis, histoire de pas tapper jQuery 500x dans votre code !

1
23

<script type="text/javascript" src="/path/to/jQuery.js"></script>
<script type="text/javascript" src="/path/to/aJqueryPlugin.js"></script><script type="text/javascript" src="/path/to/mootools.js"></script>

et le miracle :

1
23

var $j = jQuery;
[...]$j('#MonIdElement').monAction() ... ;

Attention tout de même à certain plugins qui ne sont pas écrit comme il faut, et qui ne savent pas utiliser le mode de compatiblité décrit si dessus !