Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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

  • #2
    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

    Commentaire


    • #3
      Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

      Envoyé par sbahjaoui Voir le message
      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!

      Commentaire


      • #4
        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

        Commentaire


        • #5
          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?!
          Dernière édition par josse34 à 22/01/2014, 17h59

          Commentaire


          • #6
            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

            Commentaire


            • #7
              Re : Jquery Joomla 3 avec Highcharts/Highstocks et SlideshowCK

              Envoyé par klin34970 Voir le message
              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
              Dernière édition par josse34 à 23/01/2014, 16h00

              Commentaire


              • #8
                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);
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  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 :
                  Code HTML:
                  <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
                  Dernière édition par josse34 à 23/01/2014, 17h09

                  Commentaire


                  • #10
                    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

                    Commentaire


                    • #11
                      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

                      Commentaire

                      Annonce

                      Réduire
                      Aucune annonce pour le moment.

                      Partenaire de l'association

                      Réduire

                      Hébergeur Web PlanetHoster
                      Travaille ...
                      X