11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Exécution code JS

Pages :
Bonjour,
J'ai un script qui s’exécute, 9 fois sur 10.
Avec Greg Lumière ont a testé, sur les navigateurs principaux et ça fonctionne. Pourquoi, dans certain cas, le fichier JS, ne s'exécute pas ?
Problème du navigateur client ? Anti-virus ? Bref, le script, sert à mettre un n° de téléphone en forme, dans un formulaire d'envoi.
Bref, il y a t'il un moyen de forcer l'exécution de ce fameux fichier .js
Si le Javascript est neutralisé, le client ne peut pas arriver a la page du script.
Là, avec Greg, on sèche !!! Smiley fache
Modifié par Tintin75 (02 Feb 2018 - 16:29)
Hello Smiley smile

Si le Javascript est neutralisé.... <- t'as la réponse dans la question Smiley lol

Soit tu forces tes internautes a avoir le JS actif, soit tu fais en sorte que le js ne soit pas obligatoire pour naviguer Smiley smile

Chez tous ceux pour qui j'ai bossé et pour qui je bosse la solution c'est JS OBLIGATOIRE !!
avec la balise noscript pour informer le client qu'il faut que le JS soit actif pour utiliser le site Smiley smile

C'est un choix...
Merci de tes lumières. Chez moi, c'est JS OBLIGATOIRE !

On va revoir notre copie.

Bonne journée. Smiley cligne 
'use-strict';

document.addEventListener('DOMContentLoaded', function() {
    let phoneFields = document.querySelectorAll('[type="tel"]');
    let phoneFieldsLength = phoneFields.length;
    if (phoneFieldsLength <= 0) {
        return;
    }
    for (let i = 0; i < phoneFieldsLength; ++i) phoneFields[i].addEventListener('keyup', function () {
        let phoneNumber = phoneFields[i].value;
        if (phoneNumber.substr(0, 2) === '00') {
            phoneNumber = phoneNumber.substr(0, 2).replace('00', '+');
        }
        phoneNumber = phoneNumber.replace(/[-./ ,()]/g, '');
        if (phoneNumber.substr(0, 1) === '+') {
            if (phoneNumber >= 4) {
                phoneNumber = phoneNumber.split(/^(.{4})(.+)/);
                if (typeof phoneNumber[1] !== 'undefined') {
                    phoneNumber[1] = phoneNumber[1].replace(/^(.{3})(.{1})/, "$1.$2.");
                }
                if (typeof phoneNumber[1] !== 'undefined') {
                    phoneNumber[2] = phoneNumber[2].replace(/(.{2})(?=.)/g, "$1.");
                }
                phoneNumber = phoneNumber.join('');
            }
        } else {
            /** Numéro national **/
            phoneNumber = phoneNumber.replace(/(.{2})(?=.)/g, "$1.");
        }
        phoneFields[i].value = phoneNumber;
    }, false);
}, false);
Notre cher Tintin n'étant pas très explicite je me permet j’apporte mon grain de sel.

Comme il l'a dit, le visiteur qui a désactivé JS ne peut (selon lui) accéder à la page qui appelle le script en question.
Modifié par Greg_Lumiere (10 Feb 2018 - 16:23)
J'ai en tête deux pistes mais ne suis pas sûr de moi.

* il s'agit d'un problème de propagation de l'évènement.

* le script est dans un fichier séparé dont l'appel se fait en déféré en bas de page.

Selon-vous, l'un, l'autre ou ces deux options peuvent-elles être la cause des maux de tête de Tintin ?
Peut-il y avoir autre chose qui en soit la cause ?
Par acquis de conscience j'ai vérifié, sans JS la page concerné est inaccessible donc le soucis ne vient pas de son éventuelle désactivation par l'utilisateur.
si le script est en bas de page il y a peut être en effet un problème de déféré...
Le script se lance trop tôt et ne trouve pas d'éléments a écouter.
y a du jquery ???
si oui pourquoi ne pas le coller dans le $(function{}) ??? qui attend du coup que le dom soit totalement chargé Smiley cligne
@Pchlj:

Le site importe effectivement la bibliothèque JQuery. Le pourquoi je ne l'utilise pas est que j'ai déjà bien du mal en JS alors en JQuery c'est encore plus galère de m'en dépatouiller.

Le fait de placer l'écoute sur 'DOMContentLoaded' n'est-il pas censé éviter le problème que tu décris par rapport au déferrement ? Si non, pourquoi ?
Modérateur
Greg_Lumiere a écrit :
Le fait de placer l'écoute sur 'DOMContentLoaded' n'est-il pas censé éviter le problème que tu décris par rapport au déferrement ? Si non, pourquoi ?


Si le script est en bas de page, autant ne rien mettre, ce sera plus sûr.
Ou exécuter le script si DOMContentLoaded a été lancé avant de déclarer l'écouteur.

Par contre il y a une fonction définie dans une boucle for, le script ne fonctionnera pas avec plus d'un champ téléphone
kustolovic a écrit :

Ou exécuter le script si DOMContentLoaded a été lancé avant de déclarer l'écouteur.
Tous les mots sont connus mais je n'en vois pas le sens. DOMContentLoaded étant inhérent au navigateur je ne peux le "lancer".

Si l'écoute était placée sur l'évènement 'load' en lieu et place ne me garantirait-il pas le bon fonctionnement du script ? On serait sûr qu'il trouve les objets dans le DOM, non ?

kustolovic a écrit :
Par contre il y a une fonction définie dans une boucle for, le script ne fonctionnera pas avec plus d'un champ téléphone
Parles-tu de ceci ?
phoneFields[i].addEventListener('keyup', function() {...}, false);

J'ai testé avec deux champs sur Codepen et le résultat est positif.
Pourquoi n'est-ce pas censé fonctionner, j'utilise bien l'élément numéro i de phoneFields ?
Modérateur
L'évènement DOMContentLoaded est lancé par le navigateur lorsque le dom est chargé (mais pas forcément les ressources externes comme le javascript).

Comme le fichier javascript est certainement dans votre cache, l'exécution du fichier et celui de l'évènement est probablement quasi-simultanée, ce qui fait que parfois c'est exécuté, parfois non.

Si le script est en fin de fichier, le plus simple est de ne pas écouter l'évènement, car le dom sera déjà chargé (Il suffit de retirer la première et la dernière ligne du script mentionné plus haut)

a écrit :

Pourquoi n'est-ce pas censé fonctionner, j'utilise bien l'élément numéro i de phoneFields ?

Oh tu utilises let et non var dans la boucle. Alors ça devrait fonctionner au temps pour moi
Meilleure solution
Super, merci pour ces explications qui clarifient la situation.

En effet je n'avais pas pensé au cache du navigateur.

Nous allons, comme tu le suggère Kustolovic, tester sans l'écoute sur DOMContentLoaded et produirais un retour la semaine prochaine sur la résolution (ou non) du problème.
J'ai modifié le code, reste à voir ce que ça donne en prod. Smiley cligne

Merci au dieu du code pour l'aide technique Smiley smile
Modifié par Tintin75 (01 Feb 2018 - 16:11)
A première vue, on a retirer la première ligne et on a toujours le même problème !!! Bref, c'est un cas rotor de chez rotor ...

La ligne d'appel se trouve position 419 :
<script src="../Js/Phone.js" defer></script>

Je ne sais pas si ça une explication, qu'elles soient en fin de programme au lieu d'être en tête ?

Smiley decu
Modifié par Tintin75 (01 Feb 2018 - 20:49)
on a moyen de tester cela quelque part ?

Si j'ai bien compris le problème : de temps en temps, le fichier.JS N'est pas chargé ?
C'est ça, le fichier s'exécute entre 8 et 9 fois sur 10.
Modifié par Tintin75 (02 Feb 2018 - 16:08)
Tintin75 a écrit :
on a jamais réussit à re-produire l'erreur.


Du coup, comment tu sais ? Smiley smile


Sur codepen cela marchera a 100%, ce qu'il faut c'est voir en prod véritablement.
Modifié par JENCAL (02 Feb 2018 - 09:47)
Pages :
Sujet clos
Aller à