11496 sujets

JavaScript, DOM et API Web HTML5

Incompatibilité entre Rico/jQuery [Résolu]

Bonjour à tous,

J'ai un petit problème d'incompatibilité apparemment entre deux framework Javascript, à savoir : Rico (basé sur Prototype) et jQuery.

Tout d'abord, on pourrait se questionner sur le but d'une telle associations de frameworks. La réponse est simple, j'utilise Rico pour faire des coins arrondis (Rico.Corner.round(...)) et jQuery pour des effets de couleur progressive (la fonction animate()) ; les possibilités des coins arrondis avec jQuery ne me sont pas suffisantes.

J'arrive donc parfaitement à faire fonctionner ces deux framework...séparément ! En effet, dès que je veux avoir des div avec coins arrondis et des boutons à couleur progressive (au mouseOver et mouseOut en l'occurence), PATATRA ! Rien ne va plus.

Voici les références aux différents sources js dans mon <head> :

 
    <!-- jQuery --> 
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/color.js"></script> 
    <script type="text/javascript" src="js/jquery.corner.js"></script>   
  	<script type="text/javascript" src="js/all.js"></script>
     <!-- **** -->
    
    <!-- RICO -->   
	<script type="text/javascript" src="js/rico/prototype.js"></script>
	<script type="text/javascript" src="js/rico/rico.js"></script> 
    <script type="text/javascript" src="js/rico/ricoStyles.js"></script>   
    <!-- **** -->

Au chargement de la page :

<script type="text/javascript">
             window.onload = function() {
		
		Rico.Corner.round('events', {corners:"bottom", border: '#c7c2a7'});
		Rico.Corner.round('ListOfNews', {corners:"bottom", border: '#c7c2a7'});
		Rico.Corner.round('guestbook');
 
	}
</script>


Dans le fichier all.js se trouve entre autre cette partie de code (pour la couleur progressive) :

$(document).ready(function() {
 
  $("#navigation .primary a").mouseover(function() {
												
	// Change la couleur de la fonte
	$(this).animate({ color: "#ffffff" }, 20)												
	
	// COULEUR progressive div lescat
	$(this).animate({ backgroundColor: "#990000" }, 400)	
 
  });
 
  $("#navigation .primary a").mouseout(function() {
											   
	$(this).animate({ color: "#660000" }, 20)
   
	// COULEUR FIN et DEBUT div lescat
	$(this).animate({ backgroundColor: "#cccc99" }, 400)
	
 
  });
 
 
  $("#navigation .secondary a").mouseover(function() {
	// COULEUR progressive div connexe
	$(this).animate({ backgroundColor: "#cccc99" }, 400)
 
 
  });
 
  $("#navigation .secondary a").mouseout(function() {
	// COULEUR FIN et DEBUT div connexe
	$(this).animate({ backgroundColor: "#d4d0b7" }, 400)
 
  });
 
});


En laissant les sources de cette manière, j'arrive à obtenir des coins arrondis mais pas de couleur progressive pour les boutons (situés dans la div navigation).
En enlevant les références à rico dans le <head>, j'arrive à avoir uniquement la couleur progressive sur les fameux boutons !

Je suis un peu désespéré car l'association Rico et jQuery est le seul moyen que j'ai trouvé pour répondre à mes besoins.


Merci d'avance pour toute l'aide que vous pourrez m'apporter.
Salut Bistou et bienvenue Smiley cligne ,

je suppose qu'il s'agit du "classique" écrasement qui survient quand plusieurs scripts utilisent window.onload
Une solution ici.

A+ Smiley smile
Modifié par Heyoan (14 Apr 2008 - 00:04)
Pas mal cette fonction, merci Heyoan.
Malheureusement je ne pense pas que l'erreur vienne d'ici. J'ai regroupé tout le code qui doit s'exécuter au chargement de la page dans une fonction init() appelée de la manière suivante (cf le lien du post d'Heyoan) :
addLoadEvent(init);


La structure de la fonction init() est la suivante :

function init(){

   // Appel des fonctions Rico

   // Appel des fonctions jQuery

}


Dans ce sens, Rico marche mais pas jQuery et dans le sens contraire rien ne marche. Une fois de plus pour faire marcher jQuery je dois enlever les références à Rico dans le <head>.

Par ailleurs, j'ai fait quelques recherches et je n'ai pas trouvé de problèmes de compatibilité connus entre ces deux framework, faudrait-il encore que quelqu'un ait utilisé ces deux frameworks en même temps... Smiley bawling
Est-ce que ce ne serait pas un pb de double attribution de la fonction $() par hasard ? Par défaut prototype et jquery définisse tout les 2 $() pour leur usage...
Il va falloir que tu utilises le mode compatibilité de jquery avec prototype : cf

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

pour donner par exemple : (cf lien pour d'autres exemples)

<script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();
     
     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').style.display = 'none';
   </script>


de plus : inverser l'ordre de chargement des librairies (prototype avant jquery comme ci-après)


    <!-- RICO -->   
	<script type="text/javascript" src="js/rico/prototype.js"></script>
	<script type="text/javascript" src="js/rico/rico.js"></script> 
    <script type="text/javascript" src="js/rico/ricoStyles.js"></script>   
    <!-- **** -->

!-- jQuery --> 
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/color.js"></script> 
    <script type="text/javascript" src="js/jquery.corner.js"></script>   
   <script type="text/javascript" src="js/all.js"></script>
     <!-- **** -->


et touche finale modifier ton code pour remplacer les $() des fonctions jquery par $j(), si tu as opté pour $j(), et le tour devrait être joué.

Testé et approuvé pour prototype+jquery+jqmodal.
Youhou !! Ca marche a priori. Merci beaucoup PiR2 pour ton aide !

Par contre j'ai une erreur js qui pète maintenant. Elle se situe au niveau de la ligne 3936 de la version 1.6 de prototype :
element.dispatchEvent is not a function
Après quelques recherches, je suis tombé sur cet article :

Il ne s'agit pas de la même version de jQuery dans l'article. Pour la dernière version (1.2.4a) il faut mettre en commentaire UNIQUEMENT la ligne 27 :
	
// Map the jQuery namespace to the '$' one
// window.$ = jQuery;


Comme ça plus d'erreur et l'association jQuery/Rico (basé sur Prototype) marche !

Merci à tous pour votre aide.
Modifié par Bistou (14 Apr 2008 - 16:53)
Modérateur
Salut Bistou, Smiley smile

Pour indiquer la résolution de ton sujet, il faut éditer ton premier post et rajouter la mention [Résolu] à ton titre. C'est expliqué dans les règles du forum... si des fois tu n'as pas encore eu le temps de les lire...... Smiley cligne

Au passage, chacune de ces bibliothèques te permettent de réaliser tes deux composants. Seule contrainte : Mettre les mains dans le cambouis et tenter d'en maîtriser au moins une.

Actuellement, tu prends 2 risques, en multipliant les bibliothèques :

- Avoir un conflit... et ça, tu y as eu droit...
- Augmenter de façon significative le poids de tes pages et donc ralentir fortement l'affichage de tes pages chez le visiteur... particulièrement chez celui qui ne dispose pas d'un bon débit.

A titre de rappel :

- Bonnes pratiques concernant le poids des pages
Salut koala64,


En effet, je n'avais pas encore eu le temps de lire les dites règles mais j'ai rectifié le tir Smiley cligne
koala64 a écrit :
Au passage, chacune de ces bibliothèques te permettent de réaliser tes deux composants. Seule contrainte : Mettre les mains dans le cambouis et tenter d'en maîtriser au moins une.

Je suis bien conscient que chacun de ces frameworks peut réaliser les bases des fonctionnalités dont j'ai besoin mais j'ai besoin d'éléments assez complexes et le choix d'une telle association ne s'est pas fait par hasard. Comme je le disais au début du topic :
Bistou a écrit :
l'association Rico et jQuery est le seul moyen que j'ai trouvé pour répondre à mes besoins

Quant au temps de chargement assez long pour des utilisateurs bas débit :
1) Le chargement de mes pages est très satisfaisant et leur poids moyen aussi (~10Ko)
2) Pour ceux qui auraient vraiment un trop bas débit ne leur permettant pas d'avoir une navigation fluide ; je ne m'en occupe pas, ce n'est pas le public visé.

Le couplage de ces deux frameworks m'a donc permis de faire baisser d'une manière conséquente la taille de mes pages (~ de moitié) et je pense que le ratio augmentation du temps d'éxécution/diminution de la taille moyenne des pages est inférieur à 1 et donc bénéfique pour cette application web en phase de développement.

Il y a peut-être un framework quelquepart sur la toile qui pourrait répondre à mes besoins mais je ne vais certainement pas le chercher pendant des jours (voire des semaines) par simple excès de purisme.

Merci quand même pour ces conseils avisés koala64 Smiley smile
Modérateur
Bistou a écrit :
Je suis bien conscient que chacun de ces frameworks peut réaliser les bases des fonctionnalités dont j'ai besoin mais j'ai besoin d'éléments assez complexes et le choix d'une telle association ne s'est pas fait par hasard.
Javascript seul permet de faire ce que tu souhaites mais il faut tout développer... C'est bien souvent une tâche ardue dès lors qu'on souhaite inclure des animations...

Les différentes bibliothèques, quant à elles, s'appuient sur JS et offrent la possibilité de se faciliter la tache en permettant de diminuer de manière significative le travail de compatibilité et l'écriture du bout de script que tu ajoutes... voire en proposant quelques "plugins".

a écrit :
1) Le chargement de mes pages est très satisfaisant et leur poids moyen aussi (~10Ko)
...
Le couplage de ces deux frameworks m'a donc permis de faire baisser d'une manière conséquente la taille de mes pages (~ de moitié) et je pense que le ratio augmentation du temps d'éxécution/diminution de la taille moyenne des pages est inférieur à 1 et donc bénéfique pour cette application web en phase de développement.
Là, tu oublies clairement tes bibliothèques... parce que même surcompressées, elles dépassent allègrement ces 10ko à elles seules... Une page simple, sans script mais avec une css et quelques images atteint vite ces 10ko.

a écrit :
2) Pour ceux qui auraient vraiment un trop bas débit ne leur permettant pas d'avoir une navigation fluide ; je ne m'en occupe pas, ce n'est pas le public visé.
ok.

a écrit :
Il y a peut-être un framework quelquepart sur la toile qui pourrait répondre à mes besoins mais je ne vais certainement pas le chercher pendant des jours (voire des semaines) par simple excès de purisme.
dac. Je peux comprendre ce besoin de ne pas passer 107 ans sur chaque appli...
C'est juste parce qu'ajouter un framework tel que Rico se fait dans une page orientée application disposant de très nombreuses fonctionnalités. En revanche, si ça ne sert qu'à faire des coins arrondis, c'est totalement disproportionné. Smiley cligne

Quand tu dis :
a écrit :
les possibilités des coins arrondis avec jQuery ne me sont pas suffisantes.
jQuery suffit mais peut-être faut-il redévelopper cette partie pour l'adapter à tes besoins, ce qui demande une certaine maîtrise de JS et des fonctions de cette bibliothèque; ça demande du temps, il est vrai.

Si tout cela est pour un site perso, rares seront ceux qui t'en voudront mais si c'est pour une grosse structure qui accueille + de 3000 visiteurs/jours, le client va peut-être râler quand il va voir l'état de sa bande passante. Smiley lol
Modifié par koala64 (14 Apr 2008 - 19:40)
"koala64" a écrit :
Là, tu oublies clairement tes bibliothèques... parce que même surcompressées, elles dépassent allègrement ces 10ko à elles seules... Une page simple, sans script mais avec une css et quelques images atteint vite ces 10ko.

Je suis formel sur le taille de mes pages. Je ne référence pas toute la bibliothèque et je garde uniquement les fichiers dont j'ai besoin.

"koala" a écrit :

En revanche, si ça ne sert qu'à faire des coins arrondis, c'est totalement disproportionné.

Bien sûr que non...Cela me paraît évident. Pour simplement des coins arrondis je ne me serai pas servi de javascript et encore moins d'un framework... Smiley bawling

J'utilise en fait la plupart des fonctionnalités connues de Rico (quelques unes modifiées) et quelques fonctionnalités propres à jQuery.
C'est assez lassant de devoir se justifier à chaque post sur l'utilisation de tel ou tel framework et sur le pourquoi du comment. J'ai clairement dit et répété que l'utilisation de ces DEUX frameworks était inévitable pour moi ; sauf si bien sûr je désirais réinventer la poudre comme tu as l'air de vouloir le faire (en tout cas pousser les autres à le faire).

Il y a plusieurs sortes de développeurs, tu as ta catégorie, j'ai la mienne. Je ne vois pas pourquoi perdre du temps à refaire ce qui a déjà été fait, cela n'omet pas le fait que lorsque l'on s'appuie sur un framework on doit savoir le maîtriser !

Bref, on pourrait débattre des heures là-dessus en avancant chacun nos arguments de purisme - pour toi - et d'efficacité - pour moi -.

Je suis venu ici dans le but d'avoir des avis et si possible des réponses à mes questions sur l'incompatibilité entre ces deux frameworks. Mon expérience sur une telle association étant assez faible.
J'ai été ravi de mesurer la réactivité au combien importante de la communauté présente sur ce forum ainsi que la précision des réponses apportées.
Maintenant c'est sûr que si l'on se fait tirer la jambe par un modérateur pendant des heures pour des broutilles (après la résolution du problème)...cela est nettement moins alléchant.

Le pire dans tout ça c'est que je suis d'accord avec toi à 90% si l'on parle d'un projet générique mais dans mon cas tes reproches sont inadaptés, hormi bien sûr mon oubli du tag [Résolu].

Bonne fin de journée.
Utiliser deux librairies en même temps est une grosse abhération.
De plus utiliser des librairies aussi lourdes pour un site web c'est stupide. J'ose espérer pour toi que c'est un intranet. Car si j'étais ton client, je t'aurai demandé de tout refaire.
Ensuite les coins arrondis, il y a plusieurs méthodes pour les faires. Et autant les faire en HTML/CSS, et au mieux générer les éléments HTML qui jouerons les coins via du JS. Mais il n'y a franchement pas besoin d'utiliser une lib.

Rico et Jquery sont devenues avec le temps des monstres et aussi des bouses au niveau du poids. Certe, elles permettent de développer plus vite. Mais à mon avis, avec 1 cerveau, de la patience, et des compétences, on arrive à tout faire, avec moins de 30ko de JS (compressés via un packer comme YUI compressor) sur un site web et en utilisant mootools.

Et accessoirement comme le disait koala64, tu te trompes fortement sur le poids de tes pages. regarde via l'outil "Net" de firebug et tu verras le poids de ta page. Mais même compressés + modgzippés, jquery + rico ca fait plus de 50 ko
Modérateur
hum... Smiley sweatdrop bon, je précise quand même que mes remarques ne sont pas là pour me moquer ou faire de la critique gratuite mais plus pour mettre certains problèmes en avant afin d'en discuter, et ce, dans le but de (t' / m')améliorer.

Il n'y a pas d'incompatibilité entre exploiter pleinement les possibilités d'une bibliothèque et coder de manière efficace... Ce n'est d'ailleurs pas efficace qu'il faut employer comme terme mais plutôt rapide. J'y suis contraint tous les jours et il est clair que tout dépend des priorités... Si, si, je t'assure : moi aussi je fais de nombreuses impasses même si ça ne m'enchante guère. Je ne passe pas mon temps à tout refaire.

Aussi, si certaines solutions existent et sont parfaitement adaptées, il n'y a pas de raison de les redévelopper mais ça ne dispense pas de faire attention à ne pas tomber dans l'excès inverse, à savoir se contenter de n'employer que de l'existant... (je ne dis pas que c'est forcément ton cas)

Les problèmatiques que j'expose et que tu te traites comme des "broutilles" sont le lot de toutes applications un tant soit peu riches.

Bref, ce n'est pas toi, bistou, que je critique dans tout ça mais plus une tendance actuelle; n'y voit vraiment aucune attaque personnelle. Smiley cligne
Modifié par koala64 (15 Apr 2008 - 15:43)
"Gatsu35" a écrit :
abhération

C'est plutôt le fait d'écrire aberration de cette manière qui paraît aberrant.

"Gatsu35" a écrit :
De plus utiliser des librairies aussi lourdes pour un site web c'est stupide.

C'est vrai que d'habitude ces bibliothèques (et non pas librairies), s'utilisent pour jouer au golf...

"Gatsu35" a écrit :
Car si j'étais ton client, je t'aurai demandé de tout refaire

Pour quel prétexte ? "Anh t'utilises 2 bibliothèques et la maîtresse elle a dit que c'était pas bien, FAUT TOUT REFAIRE...".
Je n'ai aucun problème de ralentissement sur cette application web. Je me répète une fois de plus, je n'utilise pas tous les fichiers
des bibliothèques et j'ai simplifié et compressé chaque fichier que j'utilise.

"Gatsu35" a écrit :
Mais il n'y a franchement pas besoin d'utiliser une lib. [...] avec un cerveau [...] on arrive à tout faire

Tu n'as pas l'air d'arriver à lire l'ensemble d'un topic. Par contre tu arrives très bien à flammer !
C'est exactement ce que j'ai écrit plus haut, si tu avais pris la peine de tout lire gros malin.
Je me réexplique sur ce point puisque vous n'avez pas l'air de comprendre :
Pour la partie des coins arrondis, cela m'a permis de gagner beaucoup de poids en image (j'utilisais simplement des images et du CSS avant). Certes j'ai perdu du temps d'éxécution mais comme je l'ai expliqué précédemment, le ratio me convient. Donc où est le problème ?

"Gatsu35" a écrit :
tu te trompes fortement sur le poids de tes pages. regarde via l'outil "Net" de firebug et tu verras le poids de ta page.

Bien vu ce coups-ci ! Je n'aurai pas utiliser le terme "fortement" car j'ai quelques pages à 80-100Ko mais la plupart sont à 10-20 car je n'utilise ces bibliothèques que sur quelques pages.
Je pensais par erreur, qu'IE et Opera comptait les références dans le poids des pages.

"koala64" a écrit :
je précise quand même que mes remarques ne sont pas là pour me moquer ou faire de la critique gratuite mais plus pour mettre certains problèmes en avant afin d'en discuter

C'est très bien, mais je pense qu'il y a des façons plus diplomatiques et courtoises de proposer des améliorations.
En gros rien qu'avec quelques lignes de code vous vous êtes fait une idée complète de mon appli, malheureusement totalement fausse.
Je pense qu'il faut avoir une connaissance globale de la chose avant de critiquer tel ou tel point.

"koala64" a écrit :
Ce n'est d'ailleurs pas efficace qu'il faut employer comme terme mais plutôt rapide

L'efficacité et surtout la rentabilité prenne en compte la rapidité de mise en oeuvre dépendante de la charge allouée à chaque personne et à chaque tâche. De surcroît, n'altérant pas la performance de l'application dans sa globalité je maintiens que ma méthode est plus efficace mais je conçois que ce soit discutable (seulement avec toutes les billes en main).

Maintenant je pense que notre discussion sort du cadre de ce forum et surtout de ce topic, qui, je le rappelle une fois de plus, avait pour unique but de demander de l'aide sur un point précis.
Je pense donc qu'il serait plus judicieux de continuer cette conversation en privé.

Sympa comme accueil en tout cas... je ne me souviens pas d'en avoir eu un aussi virulent ailleurs !

Bonne journée.
Bonjour,
Bistou a écrit :
Maintenant je pense que notre discussion sort du cadre de ce forum et surtout de ce topic, qui, je le rappelle une fois de plus, avait pour unique but de demander de l'aide sur un point précis.
Je pense donc qu'il serait plus judicieux de continuer cette conversation en privé.

Tout à fait. Je ferme donc le sujet.
Sujet clos
Aller à