19 mar
Par Clément dans Javascript et Ajax, Tutoriels
Les librairies javascripts sont devenues quasiment incontournable dans le développement d’application interactive sur le web.
Néanmoins, la compatibilité entre elles posent souvent des problèmes lorsqu’on veut les utiliser en même temps.
Le problème réside dans leur utilisation de la méthode $() qui permet de sélectionner un élément avec un sélecteur CSS.
Lorsque deux ou plusieurs framework javascript (Mootools ou Prototype et jQuery)utilisant cette méthode sont sur la même page, on se retrouve avec ce genre d’erreurs :
$ is not a function $(document).ready is not a function
jQuery, qui tente de s’imposer dans ce milieu, possède une méthode qui permet d’utiliser tout les autres frameworks javascript en cohabitation avec lui-même. Cette méthode ce nomme : noConflict();
Voici comment utiliser cette méthode de plusieurs façons :
jQuery.noConflict();
jQuery('#madiv').css('color','red');
var J = jQuery.noConflict();
J('#madiv').css('color','red');
Attention, il faut obligatoirement inclure jQuery en dernier dans vos javascripts, sinon la méthode noConflict() n’aura aucun effet.
« La Cheat Sheet de jQuery | Forcer IE8 à interpreter les pages comme IE7 »
Un trackback
28 commentaires
Condutiarii
19 mars 2009 à 22:18
1Raaaah jQuery, j’adore ce framework !
FROLLON
20 mars 2009 à 2:57
2Nikel !!
Je voulai justement utiliser un multi upload JQuerry avec une appli sur mootools
ta assuré vieux
FreeTools
23 mars 2009 à 8:41
3Dès plus intéressant cette info… je me pose juste la question de savoir si cela ne ralenti pas trop l’execution des prog ? Combien de cycle « mange» cette fonction. ? Bref un petit benchmark de la « chose» serait très instructif
Tu me diras, si tu n’utilises que jkQuery, le prob est reglé
gabi26
24 mars 2009 à 21:27
4Bonjour,
je cherche depuis plusieurs jours et suis content de voir que ces messages sont récents (pour une fois!).J’ai trouvé différentes propositions pour résoudre le conflit avec jQuery.noconflict();
Je débute…alors vous pourriez me dire où je dois inclure ces lignes? (un petit exemple serait le bienvenu (oups))
J’essaie d’utiliser la librairie scriptaculous avec jQuery et ça plante.
Merci d’avance
gtomahawk
31 mars 2009 à 9:39
5@ gabi26 : tu l’inclus dans ton entre 2 balises
Je t’invite a regarder la doc jQuery à ce sujet http://docs.jquery.com/Using_jQuery_with_Other_Libraries
gabi26
7 avril 2009 à 16:24
6Bonjour,
merci gtomahawk. J’avais été sur le lien mais je n’avais pas tout saisi je suppose. Bref j’y arrive. Mon problème à présent est que la page qui contient jQuery est une page php appelée par ajax…j’ai essayé evalScript… mais pour l’instant il refuse de lire le javascript…je cherche donc. Enfin j’ai au moins une moitié de l’épine d’enlevée!
Merci Bonne journée.
gabi26
7 avril 2009 à 17:06
7Bon ben finalement j’ai réussi mais en passant par un lien et non un select et en utilisant prototype avec evalScripts:true, et non la pure requête ajax XMLhttprequest… Reste une ch’tiote d’épine…mais peut-être plus grand chose pour que je trouve.
Merci Dator blog! A plus!
Visual3D
17 avril 2009 à 9:11
8Slt, Merçi pour cette astuce! Néanmoins je me pose des questions sur son implémentation : relation div => css :
Ci-dessous mon index.php :
Mon index contient pas mal de scripts utilisant jquery avec des liens vers des css et des .js associé au scripts et un script basée sur mootools
Illustration :
//script en relation avec element.js :
$(function() {
$(’#container-1′).tabs();
$(’#container-2′).tabs(2);
…
//script en relation avec autre_script.js :
$().ready(function() {
$(’.kwicks’).kwicks({
maxWidth : 205, // required attribute
spacing : 5
});
});
….
…..ainsi de suite pour plusieurs scripts
En dernier on a :
//mon seul script mootools
$(function() {
$(’#test-1′).tabs();
$(’#test-2′).tabs(2);
…
var J = jQuery.noConflict();
J(’#madiv’).css(’color’,'red’);
—————————————————————–
Voici mes questions :
- Dans les divers scripts de mon head au début, je dois changer chaque $ par J pour attribuer le jquery noconflict ?
- Pour l’expression : J(’#madiv’).css(’color’,'red’); => je dois attribuer le nom de la div qui est en relation avec le script ainsi que son theme.css ?
- Et pour le script utilisant mootools je le laisse tel quel avec les $ ?
- En gros, je ne sais pas ce que je dois changer et pour chaque script…
——————————-
Si tu pouvais m’aider ça serait sympa. Mais j’èspere ne pas t’embetter. Dsl pour la longeur du post, je voulais être explicatif.
Bonne journée.
Visual3D
17 avril 2009 à 9:42
9Oups, dsl les balises ne sont pas passées… Tu peut effacer l’ancien post.
Un lien sera plus adapté pour expliquer mon problème :
http://www.developpez.net/forums/d726634/webmasters-developpement-web/javascript/noconflict-jquery-mootools/#post4213543
Merçi pour ton aide…
Visual3d
18 avril 2009 à 21:10
10Bon bah j’ai pu régler le problème en cherchant de mon côté, cela na pas était évident car j’ai bcp de scripts mais tout fonctionne!
Si ça intéresse quelqu’un je mettrai la soluce sur mon futur site. @++
Marakud
27 avril 2009 à 10:45
11bonjour,
qqun a t’il trouvé une solution qui marche pour rendre compatible jquery et les autres libs.svp
Merci
Clément
27 avril 2009 à 11:25
12Tu n’as pas lu l’article ? Tout est expliqué dans celui-ci (en haut de cette page)
Garedo
24 juillet 2009 à 18:09
13Merci pour cette info.
Je vien de réaliser une thème basé sur Iphone et un des utilisateur utilisais du mootools qui faisait planté tout le theme.
problème résolue encore merci
Pat
10 février 2010 à 21:38
14Bonjour,
j’ai beau faire pas mal de test pour insérer ce code, ça ne fonctionne pas.
————————————————————————————-
ci-dessous le code initial que j’ai :
echo » « ;
if ($js_system) {
echo » « ;
}
echo » « ;
echo » « ;
————————————————————————————-
Et voici les 2 autres éléments à modifier, toujours avec le code initial :
$(document).ready(
$(’#fisheye’).Fisheye(
————————————————————————————-
Si je place mon insertion de jquery.js en dernier, mon menu ne fonctionne plus.
PLEASE! HELP ME!!
Pat
10 février 2010 à 21:41
15echo » \» ;
if ($js_system) {
echo » \\» ;
}
echo » \\» ;
echo » \\» ;
Pat
10 février 2010 à 21:42
16bon décidément, je n’arrive pas à insérer mon code correctement:
echo » link rel=\» stylesheet\» href=\» ".$baseurl.» modules/mod_fisheye_menu_camp26/fisheye_menu/menu.css\» type=\» text/css\» « ;
if ($js_system) {
echo » script type=\» text/javascript\» src=\» ".$baseurl.» modules/mod_fisheye_menu_camp26/fisheye_menu/jquery.js\» /script» ;
}
echo » script type=\» text/javascript\» src=\» ".$baseurl.» modules/mod_fisheye_menu_camp26/fisheye_menu/fisheye.js\» /script» ;
echo » script type=\» text/javascript\» src=\» ".$baseurl.» modules/mod_fisheye_menu_camp26/fisheye_menu/iutil.js\» /script» ;
Barbara
4 août 2010 à 17:46
17Bonjour,
J’ai essayé les différentes méthodes indiquées mais je n’arrive toujours à faire fonctionner mon menu déroulant jquery avec ma lightbox.
Je vais essayer de procéder par point pour vous expliquer les différentes questions que je me pose
1- est ce que je dois introduire « la méthode pratique conseillé» comme ceci :
var J = jQuery.noConflict();
J(’.navigation’).css(’color’,'red’);
2- Et est ce que je dois la placer en 1er, juste avant d’appeler prototype, scriptaculous, jquery, etc.. ?
3- dois-je mettre un j après chaque $ ? comme par exemple :
$j(document).ready( function () ……
(J : majuscule ou minuscule?)
4- je dois mettre tous les css concernants ma navigation à la place de ‘color et ‘red’ ?
Merci par avance, là je tourne en rond et deviens dingo!
Clément
5 août 2010 à 17:31
18Hello
Quand tu fais : var J = jQuery.noConflict(); J remplace $ :
Donc :
1- Oui
2- Include de tes librairies et ensuite tu lance le noConflict
3- non tu dois faire J(document).ready(function()… (majuscule dans ton cas)
4- Pas compris
Barbara
5 août 2010 à 22:23
19Hello Clément,
Merci pour tes réponses, je vais essayer ça asap, en ce qui concernait la question 4, je voulais dire par là:
- dans l’exemple donné la personne a mis .css(’color’, ‘red’)
et moi je dois mettre quoi à la place de ‘color’ et ‘red’
est ce que je dois mettre tous les css concernant ma navigation, par exemple :
var J = jQuery.noConflict();
J(’#navigation).css(’navigation’,'navigation li a’,'navigation li ul li a’ ‘ect…..’);
ou seulement le css de ma class principale qui est navigation?
J’espère m’être exprimé assez clairement, désolé je manque un peu de termes techniques
Merci encore!
Barbara
5 août 2010 à 22:33
20Yeah Clément!!
ça marche!!!! You ouh!!
Vraiment je suis trop contente, en fait j’ai juste fait comme tu as dit, et j’ai laissé » .css(’color’, ‘red’) » comme ça tel quel, mais j’aimerai juste savoir si c’ets pas trop demandé, à quoi ça correspond, qu’est ce que ça veut dire.
Oh vraiment je vais bien dormir, ça me faisait tellement suer
Merci mille fois
Arguûl
7 septembre 2010 à 11:38
21C’est magnifique!!
c’est merveilleux!!!
Un grand merci à toi clément !!!
jojo
16 septembre 2010 à 16:14
22Un grand merci pour cette astuce l’ami !
zeb
9 octobre 2010 à 14:24
23Je cale….
mon besoin est assez simple , j’aimerai avoir une photo panoramique sur laquelle j’ai des area et sur lesquelles je puisse visionner une petite séquence vidéo
j’arrive à tout faire mais séparément
si quelqu’un à 5 min à dépenser pour moi pour m’aider, j’y connais pas grand chose
dans mon head, j’ai ajouté les javascripts mais quand je met ca tout ensemble, plouf… ca marche pas
Extract de mon head :
zeb
9 octobre 2010 à 14:27
24zeb
9 octobre 2010 à 14:30
252ieme tentative pour laisser mon code
Jeune gay
12 février 2011 à 15:11
26Sympa l’astuce je cherchais à rendre compatible ces deux librairies merci
hatem
20 juillet 2011 à 20:49
27bonjour,
je suis pas un bon devmoppeur en jquery generalement j’utilise les morceaux de codes directement. Cette fois j’autrais besoins a touché le code. J’ai un simple lien texte jeveux quand je clic sur ce lien un lightbox qui s’ouvre qui contient un slider avec jquery le slider contient des miniature en bas avec flech pour afficher les images suivant et quand on clic sur un miniature s’affichera sur en taille plus grand toujour dans le lightbox mais en dessus de ces miniature.
j’ai le slider en jquery mais je ne sais pas comment l’integré dans un lightbox.
merci pour ce lui qui a une idée de me dire comment, c’est un peux urgent
merci
Winner
22 août 2011 à 10:43
28@Barbara: pour moi ça n’as pas marché, bien que j’ai fait tous ce qu’est mentionné
Laisser un commentaire
Devenir Fan de Dator.fr
Nuage de tags
Sponsors
Blogoliste
Blogs Amis
Derniers Posts
Derniers Commentaires
Les meilleurs sujets
Propulsé par WordPress