le script pour execute le conteur.

import Counter from "../class/Counter.js";

let likes = document.querySelector('.likes');
let likescounter = document.querySelector('.likescounter');

const like = new Counter(likes, likescounter, 'toggle');
like.counterStart();

J'ai chargé le script directement dans la page qui sera appelée en ajax.

<script src="../../javascript/Home.js" type="module"></script>

cette page va etre chargé dans un extern externe ici.

  <section id="Home" class="is_visible"></section>

Ce que je veux

Je souhaite utiliser une class Counter que j'ai creer dans une section de la page index de mon site. le soucis est que cette section je la charge en ajax du coup le js ne suis pas. J'ai donc essayer de charger le script disrectement dans la section concerné helas, ca n'a toujours pas fonctionné.

Ce que j'obtiens
Je n'obtient pas d'érreurs dans la console quand le script est chargé directement dans la page ajax. mais si je le charge dans le fichier qui recois cette page, j'obtiens des erreur de variables null.

15 réponses


Hello :)

Alors pour commencer tu aura besoin de NodeJS pour avoir le support des import et require

Ensuite dans ton module (le counter?) il faut l'exporter en rajoutant à la fin

export default like

// Et la où tu veux l'importer tu fais

import like from 'path/like.js'
like.counterStart()

oui j'ai déja nodejs et j''ai exatement fais la meme chose pour l'exporter il fonction tres mais là ou le probleme se pose c'est réussir à utiliser cette class dans une page chargée en ajax. Etant donné que le script serra chargé avant la page , donc les variable llikes et likesconter affiche null dans la console , chose qui est normal. En suite là ou j'ai du mal à comprendre c'est meme losque je charge le script directement dans la page qui dois etre chargé , je n'obtiens pas d'erreur mais le script ne fonctionne. rappelant au passage que je l'ai testé avant et il fonction.

Mmmh okay alors oui la page doit s'afficher avant de lancer le script :/

Tu peux faire un defer pour dire au script d'attendre le chargement de la page?

<script src="../../javascript/Home.js" type="module" defer></script>

ok merci je teste ca tout de suite

voici le constructeur de la class
il ne fonctionne toujours pas j'obtien que la variable container en bas est null. cette variable est sensé etre import de la variable likescounter plus haut mais elle n'existe que si et seulement si la page qui doit etre charger en ajax qui contient la class associé à cette variable soit charger avant le script

 constructor(button, container, type = 'increment'|'decrement'|'toggle', counter = 0)
    {
        this.button = button;
        this.type = type;
        this.counter = counter;
        container.innerText = this.counter;
        this.container = container;

    }

celle là

let likescounter = document.querySelector('.likescounter');

Bonjour, par rapport à mon probleme d'hier j'ai trouvé une solution c'est de charger directement le script L7 - L10 dans la fonction qui se charge de charger le contenu html de la page indexé en ajax L6. le soucis c'est que je doit le faire à la main et j'aimerai savoir si il n'y a pas moyen de le faire dynamiquement.

 async load() {
      const response = await fetch(this.url);
      const data = await response.text();
      return new Promise((resolve, reject) => {
          setTimeout(() => {
               resolve(this.target.innerHTML = data);
               let likes = document.querySelector('.likes');
               let likescounter = document.querySelector('.likescounter');

               const like = new Counter(likes, likescounter, 'toggle');
               like.counterStart();

               reject("Oups ! La page n'a pas pu etre chargé...");

          }, 2000);

Script L7 - L10 / L6 ? tu parles des versions de JS?

Je me demande si le problème ne pourrait pas être pris autrement.

Qu'est-ce que tu essaies de faire au juste (produit final) ?
Que compte le compteur ? Nombre de visites ?
counterStart est censé faire quoi ?

Non je parle ne parle pas des version de js. Je parle des lignes de code

JoolsMcFly
J'ai des pages html que je souhait charge dans une page en ajax, avec un système d'onglets comme le code il est long je ne pas tout mettre. Le soucis c'est que lorsque les pages se charge le script de ces page ne fonctionne pas qu'il est chargé avant la page en elle même du coup j'ai essayé de chargé ce script directement dans ma class et c'est le counterStart que tu vois, c'est une autre class qui compte les likes

ah okay, bon le problème ne vient pas de la classe en elle même mais de l'interaction entre la classe et la page, du coup faudrait le contexte avec tout le html, les class js qui doivent apparaitre, et le fichier JS qui manage les class (encore mieux, si tu as un repo GitHub passes nous le lien x))

Ah et aussi, si il y a une trace dans l'erreur, donnes nous toute la trace (c'est un tracking qui dit par où est passé toute la commande ajax)

voici le lien https://github.com/Nelsallg/Cegaka.com.git la class qui charge les pages est HtmlPageLoader.js elle est dans le dossier class. les pages qui doivent etre chargés sont Dues.php Elections.php Events.php et Home.php ces pages sont chargés dans le fichier Index.php et ces fichiers se situé tous dans le meme dossier php/Index enfin les scripts liés à c'est pages sont dans le dossier Javascript et porte le meme nom que leurs page.

Okay, bon c'est pas du MVC eeet c'est pas une façon de faire très orthodoxe du coup ça va me prendre un peu de temps pour analyser le projet ^^'

C'est vrai j'ai débuté avec symfony mais j'attend de bien maitriser le modele classique avant de continuer vers symfony. Et grave de merci pour ton aide, vraiment merci beaucoup !