Script JS ne fonctionne pas dans un module

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Script JS ne fonctionne pas dans un module

    Bonjour,
    Je teste une signature tactile pour un de mes projets.
    Le script fonctionne très bien tant que je suis en PHP "simple" mais dès que je mets ce script dans le fichier default.php du module que je développe, la zone de signature tactile ne fonctionne plus. (elle n'est même plus affichée)

    Voici deux exemples :Quelqu'un aurait-il une idée de ce qui se passe ?

    Cordialement.

    Eric

    Voici mon script :
    Code:
    <script>
    $(document).ready(function() {
            var canvasDiv = document.getElementById('canvasDiv');    
    // -----------------------
    // Fonctions Event :
    // -----------------------
    
    // Fonction fin de mouvement :
    function moveEnd() {
        painting = false;
        started = false;
    }
    
    //  Fonction début de mouvement :
    function moveStart(e, mobile) {
        painting = true;
    
        // Coordonnées de la souris :
        if (mobile) {
            // Event mobile :
            var ev = e.originalEvent;
            e.preventDefault();
    
            // Set Coordonnées du doigt :
            cursorX = (ev.pageX - obj.offsetLeft); // 10 = décalage du curseur
            cursorY = (ev.pageY - obj.offsetTop);
        }
        else {
            // Set Coordonnées de la souris :
            cursorX = (e.pageX - this.offsetLeft);
            cursorY = (e.pageY - this.offsetTop);
        }
    }
    // Fonction de mouvement :
    function move(e, mobile, obj) {
        // Si je suis en train de dessiner (click souris enfoncé) :
        if (painting) {
            if (mobile) {
                // Event mobile :
                var ev = e.originalEvent;
                e.preventDefault();
    
                // Set Coordonnées du doigt :
                // cursorX = (ev.pageX - obj.offsetLeft); // 10 = décalage du curseur
                // cursorY = (ev.pageY - obj.offsetTop);
                cursorX = (ev.targetTouches[0].pageX - obj.offsetLeft); // 10 = décalage du curseur
                cursorY = (ev.targetTouches[0].pageY - obj.offsetTop);
            }
            else {
                // Set Coordonnées de la souris :
                cursorX = (e.pageX - obj.offsetLeft); // 10 = décalage du curseur
                cursorY = (e.pageY - obj.offsetTop);
            }
    
            // Dessine une ligne :
            drawLine();
        }
    }
    
    // -----------------------
    // Init du paint, c'est ici qu'on défini tout :
    // -----------------------
    
    // Variables :
    var color = "#000"; // Couleur du pinceau
    var width_brush = 2; // Largeur du pinceau
    var painting = false; // Suis-je en train de dessiner ?
    var started = false; // Ai-je commencé à dessiner ?
    var canvas, context, cursorX, cursorY; // Variables concernant le canvas définies plus tard
    
    $(document).ready(function() {
    
        // -----------------------
        // Ajout du canvas :
        // -----------------------
    
        //var largeur_canvas = $(window).width() - 50; //20
        //var hauteur_canvas = $(window).height() - 300; //180
        var largeur_canvas = "200px";
        var hauteur_canvas = "150px";
    
        $("body").prepend('<canvas id="canvas" width="' + largeur_canvas + '" height="' + hauteur_canvas + '"></canvas>');
    
    
        // -----------------------
        // Définition des variables :
        // -----------------------
    
        // Canvas :
        canvas = $("#canvas");
        context = canvas[0].getContext('2d');
    
        // Trait arrondi :
        context.lineJoin = 'round';
        context.lineCap = 'round';
    
    });
    
    // -----------------------
    // Evenements Mobile
    // -----------------------
    
    $(document).ready(function() {
    
        // Doigt enfoncé sur le canvas, je dessine :
        canvas.bind('touchstart', function(e) {
            moveStart(e, true);
        });
    
        // Relachement du doigt sur tout le document, j'arrête de dessiner :
        $(this).bind('touchend', function() {
            moveEnd();
        });
    
        // Mouvement du doigt sur le canvas :
        canvas.bind('touchmove', function(e) {
            move(e, true, this);
        });
    });
    
    // -----------------------
    // Evenements Souris
    // -----------------------
    
    $(document).ready(function() {
    
        // Click souris enfoncé sur le canvas, je dessine :
        canvas.mousedown(function(e) {
            moveStart(e, false);
        });
    
        // Relachement du Click sur tout le document, j'arrête de dessiner :
        $(this).mouseup(function() {
            moveEnd();
        });
    
        // Mouvement de la souris sur le canvas :
        canvas.mousemove(function(e) {
            move(e, false, this);
        });
    });
    
    // ----------------------------------
    // Paint :
    // ----------------------------------
    
    $(document).ready(function() {
        // Pour chaque carré de couleur :
        $("#couleurs a").each(function() {
            // Je lui attribut une couleur de fond :
            $(this).css("background", $(this).attr("data-couleur"));
    
            // Et au click :
            $(this).click(function() {
                // Je change la couleur du pinceau :
                color = $(this).attr("data-couleur");
    
                // Et les classes CSS :
                $("#couleurs a").removeAttr("class", "");
                $(this).attr("class", "actif");
    
                return false;
            });
        });
    
        // Largeur du pinceau :
        $("#largeurs_pinceau input").change(function() {
            if (!isNaN($(this).val())) {
                width_brush = $(this).val();
                $("#output").html($(this).val() + " pixels");
            }
        });
    });
    
    
    // -----------------------
    // Fonctions de dessin :
    // -----------------------
    
    // Fonction qui dessine une ligne :
    function drawLine() {
        // Si c'est le début, j'initialise
        if (!started) {
            // Je place mon curseur pour la première fois :
            context.beginPath();
            context.moveTo(cursorX, cursorY);
            started = true;
        }
        // Sinon je dessine
        else {
            context.lineTo(cursorX, cursorY);
            context.strokeStyle = color;
            context.lineWidth = width_brush;
            context.stroke();
        }
    }
    
    // Clear du Canvas :
    function clear_canvas() {
        context.clearRect(0,0, canvas.width(), canvas.height());
    }
    
    })    
    
    </script>
    Dernière édition par Agrepe à 21/05/2019, 13h44

  • #2
    Est-ce qu'en activant le rapport d'erreur à "Développement" on a une info sur les erreurs ?
    Tous les services pour les sites Joomla! : sécurité, nettoyage de sites piratés, hébergement, SEO, applications Fabrik, migration, compatibilité mobiles, accessibilité, ...
    Administrateur certifié Joomla! 3
    https://www.betterweb.fr/services

    Commentaire


    • #3
      Bonjour Eric,

      Qu'est-ce que tu entends par "dès que je mets ce script dans le fichier default.php" ? s'agit-il d'un fichier externe que tu appelles par $document->addScript(...) ?

      Il s'agit d'un script jquery, est-ce que ton module/template a bien chargé jquery ? un petit JHtml::_('jquery.framework',true); peut résoudre ce problème.

      Et, comme suggéré par jfque, as-tu regardé du côté des erreurs dans la console de ton explorateur ?

      Pascal
      Les JoomlaDays Paris 2019, c'était du 8 au 9 mars... J'y étais et vous ?

      If anything can go wrong, it will...
      If I can help, I will ..https://conseilgouz.com

      Commentaire


      • #4
        Autre point : tu obtiens un bel écran blanc, donc certainement une erreur 500. Passe en mode développement pour avoir plus d'informations sur le plantage https://kb.joomla.fr/procedures/debu...-developpement

        Pascal
        Les JoomlaDays Paris 2019, c'était du 8 au 9 mars... J'y étais et vous ?

        If anything can go wrong, it will...
        If I can help, I will ..https://conseilgouz.com

        Commentaire


        • #5
          Bonjour,
          Merci pour votre aide.
          Le fichier default.php est le fichier du dossier tmpl du module que je développe.

          Je vais passer en mode développement pour voir si je trouve quelque chose.

          Bien cordialement.

          Eric

          Commentaire


          • #6
            J'ai activé le mode développeur, je n'ai pas d'erreur signalée.

            Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture_esemargement.JPG 
Affichages : 37 
Taille : 47,5 Ko 
ID : 2000906

            Mon php de début de fichier : (j'ai ajouté la ligne JHtml::_('jquery.framework',true)

            Code PHP:
            <?php
            // No direct access
            defined('_JEXEC') or die;
            JHtml::_('jquery.framework');
            JHtml::_('jquery.framework',true);
            $document JFactory::getDocument();
            $document->addStyleSheet("/modules/mod_esemargement/esemargement.css");
            $date JFactory::getDate()->format('d m Y - a');

            ?>
            Mais cela n'a rien changé

            Je pose cela sur un site que je suis en train de développer, j'ai installer le module en accès admin, je peux communiquer l'URL et un accès admin (en message privé) si vous voulez voir.

            Cordialement.

            Eric
            Fichiers joints
            Dernière édition par Agrepe à 21/05/2019, 16h31

            Commentaire


            • #7
              Tu avais déjà une ligne jquery.frmaework dans ton fichier, donc, l'ajout d'un 2éme n'est pas nécessaire. Le true signifie que tu es en charge mode "no conflict" et que l'on utilise jQuery au lieu de $ (https://docs.joomla.org/J3.x:Javascript_Frameworks).

              Où fais-tu le chargement de ton script ?

              Pascal
              Les JoomlaDays Paris 2019, c'était du 8 au 9 mars... J'y étais et vous ?

              If anything can go wrong, it will...
              If I can help, I will ..https://conseilgouz.com

              Commentaire


              • #8
                Je fais cela:

                Code PHP:
                <?php
                // No direct access
                defined('_JEXEC') or die;
                JHtml::_('jquery.framework');
                $document JFactory::getDocument();
                $document->addStyleSheet("/modules/mod_esemargement/esemargement.css");
                $date JFactory::getDate()->format('d m Y - a');

                ?>

                <script type="text/javascript">
                $(document).ready(function() {
                        var canvasDiv = document.getElementById('canvasDiv');    
                // -----------------------
                // Fonctions Event :
                // -----------------------

                // Fonction fin de mouvement :
                function moveEnd() {
                    painting = false;
                    started = false;
                ....
                }

                Commentaire


                • #9
                  Si tu n'as aucun affichage et qu'il n'y a pas d'erreur, c'est que ton module n'est pas appelé ou chargé.

                  L'as-tu mis dans une position ? où est défini le canvas ? qu'as-tu dans le fichier principal de ton module, le fichier mod_<nom du module>.php qui appelle le fichier du répertoire tmpl ?

                  En résumé, tu as du php et du javascript, mais cela manque un peu de html pour définir ta zone d'affichage.

                  Pascal
                  Les JoomlaDays Paris 2019, c'était du 8 au 9 mars... J'y étais et vous ?

                  If anything can go wrong, it will...
                  If I can help, I will ..https://conseilgouz.com

                  Commentaire


                  • #10
                    Bonjour Pascal,
                    Merci pour ton aide.
                    Le module est bien appelé, tout le reste de son contenu est bien affiché
                    Il n'y a que le canvas qui ne s'affiche pas.

                    Ce module (esemargement) n'est accessible que pour les admin, je t'envoie l'url et un accès admin en message privé, tu v.erras mieux.

                    J'utilise le même script dans un autre cas de figure (qui n'est pas du Joomla) et il fonctionne correctement.

                    Cordialement.
                    Eric

                    Commentaire


                    • #11
                      Bonjour Éric

                      Une fois de plus je suis surpris par la manière dont tu codes... parce que nous n'avons pas les mêmes "façons" toi et moi (ceci n'est pas un jugement de valeur mais une incompréhension de ma part).

                      Dans ton post #8, tu fournis un code. Je suppose que c'est un fichier php mais tu y mixes allègrement du PHP et du javascript et même du HTML puisque la balise <script> est une balise HTML. Trois langages dans le même fichier ==> perso, je ne fais jamais cela d'où ma remarque ci-dessus.

                      Je dirais que ton code ne peut pas fonctionner, cela me semble impossible.

                      Ce que tu mets entre tes balises <script>...</script> c'est du javascript ==> pourquoi ne l'isoles-tu pas dans un fichier "script.js" que tu charges dans ta page ? Joomla mets à disposition une instruction pour charger un fichier .js non ? (=je n'ai plus fait ça depuis tant d'années)

                      Ton code PHP est nécessaire pour, juste, les premières lignes de ton fichier.

                      Dans le meilleur des mondes; sépare un maximum les choses (php => dans un fichier php; js => dans un fichier ..., html => dans un fichier html), fais des fichiers les plus simples que possible, même si ce n'est que pour dix lignes, etc.

                      Bonne journée.

                      Christophe (cavo789)
                      Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)
                      Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes
                      Mes logiciels OpenSource : https://www.avonture.be

                      Commentaire


                      • #12
                        Salut,
                        +1 avec Christophe

                        J'ai fait du rangement, ici:
                        https://codepen.io/ghazalp/pen/KLQqWv

                        Ensuite, dans tmpl/default.php de ton module:

                        Code:
                        defined('_JEXEC') or die;
                        JHtml::_('stylesheet', 'myassets/canvas.css', array('version' => 'auto', 'relative' => true));
                        JHtml::_('script', 'myassets/canvas.js', array('version' => 'auto', 'relative' => true));
                        Tu auras créé un répertoire nommé /myassets/ dans /media/
                        puis 2 répertoires dans /myassets/
                        1 css
                        1 js

                        et bien sùr, renommé le fichier css en canvas.css
                        le fichier js en en canvas.js
                        ou ce que tu veux

                        ET
                        placé ces fichiers dans
                        media/myassets/css
                        media/myassets/js

                        Et voilà.
                        manu93fr likes this.
                        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


                        • #13
                          Bonjour,

                          Eric m'a passé son module en MP et je l'ai "remis aux normes" telles qu'évoquées par Christophe et comme tu viens de le faire.

                          L'un des problèmes du script est qu'il fait un prepend sur "body", autrement dit il ajoute une zone de saisie de signature tout en haut du site, sans tenir compte de la position du module. Ensuite, il a fallu adapter un peu le script pour qu'il s'y retrouve par rapport à une zone qui n'est pas à un endroit fixe et faire en sorte que cela fonctionne aussi sur téléphone.

                          En résumé, comme tout script trouvé sur internet, il y a quelques adaptations à prévoir.

                          J'attends qu'Eric me confirme que les modifications sont correctes.

                          Pascal
                          cavo789 likes this.
                          Les JoomlaDays Paris 2019, c'était du 8 au 9 mars... J'y étais et vous ?

                          If anything can go wrong, it will...
                          If I can help, I will ..https://conseilgouz.com

                          Commentaire


                          • #14
                            Envoyé par pmleconte Voir le message
                            Bonjour,

                            Eric m'a passé son module en MP et je l'ai "remis aux normes" telles qu'évoquées par Christophe et comme tu viens de le faire.

                            L'un des problèmes du script est qu'il fait un prepend sur "body", autrement dit il ajoute une zone de saisie de signature tout en haut du site, sans tenir compte de la position du module. Ensuite, il a fallu adapter un peu le script pour qu'il s'y retrouve par rapport à une zone qui n'est pas à un endroit fixe et faire en sorte que cela fonctionne aussi sur téléphone.

                            En résumé, comme tout script trouvé sur internet, il y a quelques adaptations à prévoir.

                            J'attends qu'Eric me confirme que les modifications sont correctes.

                            Pascal
                            Superbe. Bravo Pascal et Ghazal. You rocks
                            Christophe (cavo789)
                            Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)
                            Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes
                            Mes logiciels OpenSource : https://www.avonture.be

                            Commentaire


                            • #15
                              Bonjour,
                              Toutes mes excuses pour ce retard, mais je travaille à des horaires pas possible depuis que j'ai déménagé.

                              MERCI beaucoup c'est NICKEL.

                              C'est vraiment génial d'être entouré de personnes comme vous. (Fabienne, Christophe, Pascal, Loïc ...)

                              Cordialement.

                              Eric
                              Dernière édition par Agrepe à 04/06/2019, 15h03

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X