Fork me on GitHub






Comment éviter les conflits entre script Jquery
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Salut

Ce post s'adresse à ceux qui comme moi n'y connaissent rien en javascrit - jquery

Si comme moi vous avez un slider dans votre header, qu'il fonctionne avec jquery avec des fonctions commençant par $ et que vous avez besoin d'ajouter un autres script jquery dans vos pages et que celui ci utilise également des fonctions avec $, vous aurez un conflit et 1 des deux script ne fonctionnera pas.

Il faut alors ajouter la fonction .jQuery.noConflict();

J'ai lu des post sur le sujet, mais je n'y suis pas arrivé sans un petit coup de main donc voila comment procéder:

Le script de votre slider,à la base, ressemble à quelque chose comme ça:

<script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery-1.6.4.min.js}>"></script>     <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.pack.js}>"></script>     <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.js}>"></script>     <script type="text/javascript">             $(window).load(function() {             $('#slider').nivoSlider();         });


votre 2eme script utilise également le $:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){       $('.xoopstube_image-wrap img').each(function() {         var imgClass = $(this).attr('class');         $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');         $(this).removeAttr('class');     });   });


Et donc il prend le pas sur le premier script et celui ci ne fonctionne plus.
Il faut donc utiliser la fonction .noClonflict() pour remplacer les $ par autre chose sinon ça marche pas.

Moi j'ai lu lu ceci: il faut ajouter jQuery.noConflict(); au début du script et remplacer les $ par jquery mais ce n'est pas aussi simple que ça, voila comment il faut modifier le script qui ne fonctionne plus:

<script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery-1.6.4.min.js}>"></script>     <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.pack.js}>"></script>     <script type="text/javascript" src="<{xoImgUrl slider/scripts/jquery.nivo.slider.js}>"></script>     <script type="text/javascript">     var $j=jQuery.noConflict();         $j(window).load(function() {             $j('#slider').nivoSlider();         });       </script>


Et le problème est résolu.

Voilou j'espère que ça aidera quelqu'un

Posté le : 09/06/2014 15:03
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Solution déjà donnée sur ce forum plusieurs fois ainsi que dans le dernier module en téléchargement mais merci, tu as bien complété et résumé

Posté le : 09/06/2014 15:58

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
le problème vient du fait que vous chargez plusieurs versions de jQuery, c'est vrai que tous modules n'ont pas la possibilité de désactiver leur jQuery (d'autant que souvent, ce sont d'anciennes versions).
Il faut encore mettre la main dans le cambouis et faire le ménage dedans (et en profiter pour faire lire tout les scripts JS à la fin de la page)

Posté le : 09/06/2014 16:22
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Ah désolé je savais pas qu'il y avait la solution la bas, mais par contre c'est bien ce que j'ai fait et qui n'a pas fonctionné à savoir cette méthode:

<script type="text/javascript"
jQuery.noConflict();                        
jQuery(document).ready(function() {  
jQuery('#coin').coinslider(0);                 });  
</script>


Alors que la solution que je donne marche bien

Posté le : 09/06/2014 17:05
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
jQuery.noConflict();

la ligne ci-dessus est, dans ce cas une solution pour contourner le problème, mais ceci dit, vous rallongez sérieusement le temps de chargement de la page, vu que vous chargez plusieurs versions différentes de jQuery,ici on entre dans le domaine du référencement et du SEO. Un temps de chargement trop long (tout comme les erreurs HTML, CSS et JS) est plutôt mal vu par Google
Un petit "affichage du code source" avec votre navigateur, devrait vous permettre de voir plus clair.

Posté le : 09/06/2014 17:18
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
Rofl oula oui exact il relis le script autant de fois qu'il y a d'images affiché, donc il faut que je place le script ailleurs, c'est bien ça?(ou plutôt l'appel de la librairie)?

C'est logique puisque j'ai mis le script dans le fichier html du module qui est rappelé en boucle.

Merci j'avais pas fait gaffe

Posté le : 09/06/2014 17:30
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Citation :

Rofl oula oui exact il relis le script autant de fois qu'il y a d'images affiché, donc il faut que je place le script ailleurs, c'est bien ça?(ou plutôt l'appel de la librairie)?


effectivement, tu peut mettre ton script a la fin de ton code, du moment que tu suis ces conseils que je donne sur un autre post

Posté le : 09/06/2014 17:39
Partager Twitter Partagez cette article sur GG+
Re: Comment éviter les conflits entre script Jquery
Régulier
Inscrit: 10/09/2007 11:51
Messages: 476
C'est clair que la différence est flagrante au niveau du chargement.

Encore merci pour tes conseils

Posté le : 09/06/2014 18:26
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

47 Personne(s) en ligne (37 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 47 | Plus ...