Partage

Chargement de JS en AJAX

Sujet résolu

17 septembre 2017 à 12:37:30

Bonjour,

je possède des pages sous le modèle suivant

<body>
   <div id="container-parent">
      <div id="container">
         <div>Du contenu</div>
         <script>
            Contenu Javascript
         </script>
      </div>
   </div>
</body>

En étant sur une page je peux charger le contenu d'une autre page en javascript grâce à cette fonction :

$("#container-parent").load(href+' #container', function( response, status, xhr ) {
if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        console.log( msg + xhr.status + " " + xhr.statusText );
      }
});

Jusque là tout va bien ma page s'affiche. Par contre quand je regarde le code html, je ne vois plus aucune trace des balises javascripts, ce qui est embêtant.

J'ai cherché sur internet des solutions mais je n'ai pour le moment rien trouvé, ce qui m'amène sur ce forum.

Est-il possible que la function jQuery load filtre le js ? Y a-t-il moyen de passer outre ? ET surtout quand le code js est exécuté du coup ? (J'ai besoin d'attacher des évènements via JS à des ID.

Une solution de contournement qui me vient en tête est de charger tout le js au tout début. Mais pareil j'ai besoin d'initialiser un objet seulement lorsqu'une certaine page est chargé, sinon les évènements ne sont pas bien attaché.

Quelqu'un pourrait m'aiguiller vers quelque chose de fonctionnel ?

Merci d'avance et bon week-end

-
Edité par tonyschmitt 17 septembre 2017 à 12:38:03

Anonyme

17 septembre 2017 à 13:56:53

Bonjour,

En fait ton problème c'est que le code JS tu le mets à l'intérieur du code HTML que tu est en train de modifier ce qui me parait normal qu'il puisse disparaître.

Je te conseille donc de placer ton JS à la fin de ton code, d'ailleurs ce n'est pas une bonne pratique d'insérer du JS de cette manière.

<body>
   <div id="container-parent">
      <div id="container">
         <div>Du contenu</div>
      </div>
   </div>
</body>
<script>
    Contenu Javascript
</script>

zigomario

17 septembre 2017 à 14:51:03

Bonjour,

Un fichier html est lu et analyser par le navigateur de haut en bas.

Donc une balise html de type <script></script> qui aurait pour fonction d'agir sur un autre élément de la page , doit toujours se place après ce dit élément.

Sinon ça revient à demander à JS d'agir sur un élément qui n'existe pas au yeux du navigateur.

D'où pourquoi on met les scripts en bas de page, et on veille à leur ordre d'écriture. ( bootsrap à besoin de jquery, donc on met jquery avant bootstrap)

A partir de ce fait, tu sais que quand tu vas utiliser jquery.load() issu d'un script probablement lié en bas de page, ton navigateur va bien agir sur l'html déja présent en incluant l'html souhaité ( à ce moment le navigateur à une représentation total de la structure de la page, il connait donc toutes les balise id de la page ), par contre, il ne vas pas relire du js qui se situerait au dessus par rapport à celui qu'il applique à l'instant T.

Dans ton cas, il lis un script js lié en bas de page, il ne va donc pas revenir sur du js que tu collerai dynamiquement au dessus via de l'html.

La navigateur lis de haut en bas, et ne reviens pas sur ses pas.

De fait..

Il te faudrait trouver une solution pour que le JS que tu souhaites appliquer à ce contenu HTML ( ajouté dynamiquement via jquery.load) soit lu APRES que ce contenu HTML soit bel et bien présent dans le DOM ( répresentation de ta page pour la navigateur ).

Si tu imagines la lecture du navigateur comme un curseur qui avance ( et qui ne recule pas ), à quel endroit se trouve ton curseur au moment où ce nouvel html est inclue ?

Je ne te donne pas la réponse, car comprendre par soit même cette étape est une clé du js selon moi.

Et si tu trouves, tu sauras où mettre ton code js qui doit agir sur ce nouvel html qui vient d'apparaitre .

( evidemment, si t'as pas compris ou si tu trouves pas , je te donnerai l'info )

-
Edité par zigomario 17 septembre 2017 à 14:51:44

Passe en résolu si c'est le cas, merci !

tonyschmitt

17 septembre 2017 à 17:34:03

Merci pour vos réponses !

zigomario a écrit:

Il te faudrait trouver une solution pour que le JS que tu souhaites appliquer à ce contenu HTML ( ajouté dynamiquement via jquery.load) soit lu APRES que ce contenu HTML soit bel et bien présent dans le DOM ( répresentation de ta page pour la navigateur ).

Si tu imagines la lecture du navigateur comme un curseur qui avance ( et qui ne recule pas ), à quel endroit se trouve ton curseur au moment où ce nouvel html est inclue ?

Je ne te donne pas la réponse, car comprendre par soit même cette étape est une clé du js selon moi.

Et si tu trouves, tu sauras où mettre ton code js qui doit agir sur ce nouvel html qui vient d'apparaitre .

Zigomario, je suis d'accord avec le fait que c'est mieux de comprendre par soit même. De toute façon sinon on ne peut pas avancer. J'ai l'impression que tu essayes de me faire aller sur la voix de placer mon code après celui qui charge l'élément dynamiquement (en js).

En fait j'ai un autre problème qui m'empêche de faire ça : cet élément est chargé seulement à l'appui sur un bouton => donc il peut ne jamais être chargé ou alors être chargé 25 fois par l'utilisateur.

Pour mieux comprendre je fais un site qui doit pouvoir lire un flux audio en continue donc je charge toutes les pages du site en AJAX. Et une des pages (voir plus dans le futur) a besoin qu'on lui applique un objet JS.

Du coup je n'arrive pas trop à voir quand chargé le JS spécifique à cette page.

-
Edité par tonyschmitt 17 septembre 2017 à 17:35:23

zigomario

17 septembre 2017 à 18:14:53

Très bien ,

avec un évènement, ça sera plus simple à comprendre :

$('#buttonX').on('click',function(e){

   $("#container-parent").load(href+' #container', function( response, status, xhr ) {
         if ( status == "error" ) {
            var msg = "Sorry but there was an error: ";
           console.log( msg + xhr.status + " " + xhr.statusText );
         }
   });



})

Reprenons les étapes :

1. Ton fichier.html est lu par ton navigateur.

2. Le navigateur construit une représentation de ce fichier : l'arbre DOM ( une hierarchie ( comme sur ton fichier) de noeud... et toute balise est un noeud )

3. L'un des derniers noeuds est une balise script qui demande de lié le fichier "script.js"

4. Rien de plus..

5. Dans ce fichier "script.js" , tu demandes d'écouter un évenement "click" sur buttonX ... et de lancer la function jquery.load() à ce moment là.

6. Donc quand tu clic sur le "buttonx" ,ton fichier script.js va être lu de haut en bas . La lecture s'arrete sur l'écoute de l'évenement "click buttonX" => rentre dedans => et réalise ce qu'on lui demande => il lance la fonction load() => cette dernière inclue de l'html dans ton fichier =>' A ce moment , et uniquement à ce moment là , le DOM vient de se doter d'un nouvel ensemble de noeud..ceux qui correspondent à ton nouvel html

===> Quand c'est fait, la lecture du script js continuera jusqu'à la fin ( la balise qui ferme l'évènement click ).

Voilà .

Si je te dis que JS n'agis que sur des Noeuds qui existent...tu conclues que ton code js ne pourras se trouver qu'après la création des noeuds.

Et comme, tu as compris que tout ce qui est dans les balises de l'écoute (event click buttonX){...} est lu de haut en bas.. Tu peux en conclure que ton code js devra se trouver pas très loin

Promis je te montre prochain coup si tu trouves pas

Passe en résolu si c'est le cas, merci !

tonyschmitt

17 septembre 2017 à 19:13:12

Je viens d'avoir un éclair de génie en prenant ma douche. Comme quoi on imagine pas le bien que ça peut faire.

Et ton message confirme un peu ma pensée.

A la fin de l'évènement load je peux appeler une fonction qui possède un switch qui permet d'instancier des objets ou des fonctions, en fonction de la page chargé.

Parce que oui c'est le même évènement qui me permet de générer toutes les pages donc je ne peux pas trop faire du spécifique comme tu expliques dans ton dernier post.

La seule question qui me reste est : "Est-ce que c'est propre d'appeler une fonction qui en fonction de la page appelle d'autres fonction pour lier des events au DOM ou instancier des objets ?" Ca risque de me faire une grosse fonction. Mais je ne vois pas mieux pour le moment

Zigomario, vu que tu as l'air de t'y connaître, tu en penses quoi ? Et c'est bien là ou tu voulais me faire aller ?

zigomario

17 septembre 2017 à 20:08:41

OUi, c'est bien à la fin de la fonction load ( ou celle de l'event ) que tu pourras poser un code js qui agira sur le nouvel html.

Concernant la propreté , ou "la bonne pratique", je ne suis pas expert en ce domaine pour me proposer comme compétent.

Perso, pour la propreté : je veille à factoriser/minimum au maximum ( et on pense pas toujours à tout les moyens que php ou js mets à notre dispo .. moi le premier).

Les grosses fonctions, selon moi c'est pas très grave.

Mais tu peux toujours "éclaircir" ton load() en créant tes fonctions à l'extérieur pour les appeler à l'intérieur de ton load.

Exemple :

    var functionUrl1 = function(){
         
        ///ton code pour cette url 1
        //exemple en js pur
           var d = document.getElementById('container'); //récupération du nouveau noeud dont l'id est container
             d.innerHTML = " j'injecte un nouveau texte"; 
        
    }
    
     $("#container-parent").load( href+'#container', function( response, status, xhr ) {
            
            //dans une condition quelquonc, un switch ou if
            (if href ="/....php"){
                functionUrl1();
            }
            
         
         });

Et oui, tes fonctions "extérieurs, doivent être déclaré avant celle qui l'utilise de l'intérieur ( logique )

Et pas forcement dans ton événement click ( sauf si tu veux que ces fonctions se déclarent uniquement lors de l'évènement

Passe en résolu si c'est le cas, merci !

tonyschmitt

17 septembre 2017 à 22:11:02

Oui j'allais appeler des fonctions extérieurs. C'est plus joli et plus simple à modifier.

Merci beaucoup pour ton aide.