[RÉGLÉ] Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

[josse34]

Bonjour!

Je rencontre un souci avec Jquery concernant Joomla3 sous template Gantry.avec Highcharts/Highstocks et SlideshowCK

Le slideshowCK est sur la page principale et les graphs dans l'onglet "Pourquoi contrôler".

J'ai exposé mon souci sur le forum Highcharts et sur Joomlack mais ils se renvoient la balle, peut être avec raison.

Je dois faire une erreur car en toute logique, le Jquery est deja chargé par Joomla par /media/jui/js/jquery.min.js sous version jQuery v1.10.2 et SlideshowCK se prend normalement dessus.
A contrario, Highcharts ne se prend pas dessus et n'affiche pas les graphs. Je dois donc ajouter ce fichier en script jQuery v1.8.2 pour que cela fonctionne mais dans ce cas, SlideshowCK ne fonctionne plus!

Pourriez vous jeter un œil sur mon site et me dire si vous détectez des soucis Jquery et sinon comment faire pour faire fonctionner Highcharts et SlideshowCK sur la même page, et donc certainement de modifier ce fichier jQuery v1.8.2 et/ou de dire à Highcharts de se prendre sur le Jquery de Joomla.

Merci d'avance, bonne journée et bonne année!
Bye

[sbahjaoui]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

C'est quoi l'adresse URL de votre site?


Envoyé de mon iPad à l'aide de Forum Joomla.fr

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

C'est quoi l'adresse URL de votre site?r

C'est dans un lien de mon premier post, mais c'est https://www.astracontrol.com
Merci!

[sbahjaoui]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Il faut charger en premier la bibliothèque mootools et après biblio jquery.
Sur votre site il y a des conflits même tu as charger jquery.noconflict car modal.js manipulé par mootools et non pas jquery il doit charger en haut avec tous les js de mootools puis tous les js de jquery


Envoyé de mon iPad à l'aide de Forum Joomla.fr

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Bonsoir et merci.
J'ai Joomla3, il indiquent que dans cette version Mootools est dépréciée, j'ai tout de même installé le plugin System - Mootools Enabler/Disabler. Par ailleurs, je ne décide pas quoi charger ni dans quel ordre sous Joomla.
J'ai donc activé mootools et mootools-more, j'obtiens désormais :
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/tabs-state.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/tabs/js/script.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/libraries/gantry/js/browser-engines.js" type="text/javascript"></script>
<script src="/templates/gantry/js/rokmediaqueries.js" type="text/javascript"></script>
<script src="/modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js" type="text/javascript"></script>
<script src="/modules/mod_roknavmenu/themes/default/js/responsive.js" type="text/javascript"></script>
<script src="/media/system/js/modal.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/jquery.mobile.customized.min.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/camera.min.js" type="text/javascript"></script>

et bien plus loin juste avant mes graphiques, j'ai mis à jour mes fichiers selon http://code.highcharts.com/ et réduit au minimum :
<script src="CHARTS/js/jquery.min.js"></script>
<script src="CHARTS/js/highcharts.js"></script>

Et bien rien ne change, si je laisse <script src="CHARTS/js/jquery.min.js"></script>, les graphiques apparaissent mais pas SlideshowCK, si je supprime <script src="CHARTS/js/jquery.min.js"></script>, les graphiques disparaissent et SlideshowCK revient.

C'est quand même dingue, le script jquery pour Highcharts https://www.astracontrol.com/CHARTS/js/highcharts.js est la copie conforme du jquery de Joomla https://www.astracontrol.com/media/jui/js/jquery.min.js .
Comment obliger ce foutu Highchart à utiliser le Jquery de Joomla?!

[klin34970]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Si les deux js sont conforme supprime le highchart et laisse joomla. Ensuite dans le code source l'extension appel highcharts.js modifie le pars celui de joomla.

Désolé sur phone impossible à voir les codes sources.


Sent from my iPhone using Forum Joomla.fr mobile app

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Si les deux js sont conforme supprime le highchart et laisse joomla. Ensuite dans le code source l'extension appel highcharts.js modifie le pars celui de joomla.

Désolé sur phone impossible à voir les codes sources.


Sent from my iPhone using Forum Joomla.fr mobile app

Bonjour et merci.
C'est très intéressant mais je ne sais absolument pas comment faire pour appeler highcharts dans le jquery de Joomla!
Merci

[ghazal]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Salut,
à moins que j'ai mal lu, tu n'expliques pas comment tu as installé highcharts ?
En dur dans le template ?
Version Highcharts-3.0.9 ?

Ce que je vois sur Firebug, c'est une erreur au niveau du script jquery.easing.js

Essaie d'encapsuler le code de ce script dans :

$(document).ready(function() {
/le code jquery.easing
});

Voire même :

(function($){
$(document).ready(function() {
// code ici


});
})(jQuery);

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Bonjour.
Vraiment navré mais quelque chose m'échappe, je ne gère absolument pas (et je ne sais pas le faire si cela peut effectivement se faire) le code source, c'est joomla qui s'occupe de tout.

SlideshowCK est bien un plugin Joomla, normalement tout fonctionne bien avec lui, mais pour Highcharts, c'est une autre histoire, ce n'est pas un plugin, module ou composant, c'est simplement une librairie JS, donc pour générer un graphique, il suffit d'appeler quelques script comme highcharts.js + son propre script, l'installation est décrite ici : http://www.highcharts.com/docs/getti...d/installation (seules l'option 1 fonctionne mais en générant cette erreur) avec les fichiers suivants : http://code.highcharts.com/

Quant à jquery.easing.js, je ne sais pas d'ou il sort et comment l'encapsuler, j'ai essayé de faire cela sur mon script Highcharts mais rien ne change.

A NOTER que le forum Highcharts m'indique que ma liste d'appel des scripts doit être de la sorte :

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/tabs-state.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/tabs/js/script.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/libraries/gantry/js/browser-engines.js" type="text/javascript"></script>
<script src="/templates/gantry/js/rokmediaqueries.js" type="text/javascript"></script>
<script src="/modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js" type="text/javascript"></script>
<script src="/modules/mod_roknavmenu/themes/default/js/responsive.js" type="text/javascript"></script>
<script src="/media/system/js/modal.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/jquery.mobile.customized.min.js" type="text/javascript"></script>
<script src="/modules/mod_slideshowck/assets/camera.min.js" type="text/javascript"></script>
<!-- add as last lib highhcarts -->
<script src="CHARTS/js/highcharts.js"></script>

Ensuite à savoir que ma page d'acceuil est un module dans lequel j'appelle des articles avec adjonction de code via Sourcerer. Si je désactive l'option "plugin de contenu" de ce module, SlideshowCK fonctionne et mon script devient en texte clair.

Désolé si je suis un peu dur de la feuille mais je ne pige pas tout sur ces modifs!

Merci
Bye

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Bon ca deviens trop difficile et confus, j'ai donc crées plusieurs exemples dédiées :

https://www.astracontrol.com/TEST1 = ONLY SLIDESHOWCK = CK WORKING

https://www.astracontrol.com/TEST2 = ONLY HIGHCHARTS With in HEAD CHARTS/js/jquery.min.js and CHARTS/js/highcharts.js = HC WORKING

https://www.astracontrol.com/TEST3 = ONLY HIGHCHARTS With in HEAD CHARTS/js/highcharts.js = NOT WORKING

https://www.astracontrol.com/TEST4 = ONLY HIGHCHARTS With in HEAD CHARTS/js/adapters/standalone-framework.js = NOT WORKING

https://www.astracontrol.com/TEST5 = ONLY HIGHCHARTS With in HEAD CHARTS/js/adapters/mootools-yui-compressed.js and CHARTS/js/adapters/mootools-adapter.js and CHARTS/js/highcharts.js = NOT WORKING

https://www.astracontrol.com/TEST6 = ONLY HIGHCHARTS With in HEAD CHARTS/js/adapters/prototype.js and CHARTS/js/adapters/prototype-adapter.js and CHARTS/js/highcharts.js = NOT WORKING

https://www.astracontrol.com/TEST7 = HIGHCHARTS + SLIDESHOWCK With in HEAD CHARTS/js/jquery.min.js and CHARTS/js/highcharts.js = BOTH NOT WORKING

https://www.astracontrol.com/TEST8 = HIGHCHARTS + SLIDESHOWCK With in HEAD CHARTS/js/highcharts.js = ONLY CK WORKING

A savoir que les liens externes vers des scripts ne fonctionnent pas, d'ou mes copies sur mon serveur. Si jamais ces scripts appellent à leur tour des applets, cela ne peux apparemment pas fonctionner.

Avec tout cela, on devrait avoir de quoi tester et résoudre mon souci!!!

Grand merci!

Bye

[josse34]

Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Bonsoir.
Bon souci résolu, il faut simplement remplacer les '$' du script Highcharts en 'jQuery' parce que

The main problem is you're using both jQuery and MooTools, since you run jQuery.noConflict you can no longer use '$' to target jQuery. So something like $('#CAUSES') doesn't work. Replace all the '$' with 'jQuery' so you get jQuery('#CAUSES').highcharts({});

J'espere que ca servira à d'autres car même la team Highcharts était à la masse!

Merci pour votre participation et bonne conitnuation.

Bye