Chargement dynamique fichiers JS et CSS - Solution partielle actuellement

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'ai besoin de charger dynamiquement des fichiers CSS et JS. A vrai dire, j'ai déjà une solution mais partielle grâce à l'excellent programme en JS :ccool: rloader. c'est par ici :bravo:.

Mais j'aimerais aller plus loin et envoyer dans rloader une liste des fichiers à charger localisés dans un répertoire et ses sous répertoires associés.
Il me faudrait une fonction qui listerait tous les fichiers d'un répertoire envoyé en paramètre et récursif
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function walkSync (dir, filelist) { var fs = fs || require('fs'), files = fs.readdirSync(dir); filelist = filelist || []; files.forEach(function(file) { if (fs.statSync(dir + '/' + file).isDirectory()) { filelist = walkSync(dir + '/' + file, filelist); } else { filelist.push(file); } }); return filelist; };
Attention le code ci-dessus ne fonctionne pas ! :alerte:

avec son appel au chargement de la page HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var filesList = function walkSync ("js/"); var optRloader = function setFormat(filesList) {/*... traitement pour mettre au format comme ci-dessous [ {src:'fancybox/helpers/jquery.fancybox-thumbs.js'}, {src:'fancybox/helpers/jquery.fancybox-thumbs.css'}, {src:'fancybox/helpers/jquery.fancybox-buttons.js'}, {src:'fancybox/helpers/jquery.fancybox-buttons.css'} ] */ }; $.rloader(optRloader);
Mais j'arrive pas à trouver le moindre post qui me mette sur la voie...enfin c'est plutôt qu'après leur lecture, j'ai vaguement compris que cela n'etait possible qu'en Php. Et c'est là que ça devient flou car rloader est en JS et charge bien des fichiers JS & CSS du server :fou:

Merci par avance de toute aide apportée!

Be seeing you Pièce jointe 202524

02/03/2016, 08h43
SpaceFrog

il y a deux façon d'aborder la chargement de fichiers de façon dynamique.

La première coté client

Jquery peut tout a fait faire un load voire getScript. Mais il n'obtient qu'un seul retour
On peut alors imaginer coté client boucler sur un array de paths pour charger plusieurs fichiers avec getScript ou load ou encore intégrer des balises de fichiers externes

L'autre implique que le serveur fasse lui un regroupement pour retourner une concaténation du code soit directement des scripts , soit des balises d'inclusion de fichiers externes. Il suffit de pointer sur un seul fichier de traitement php en lui passant en paramètre les paths afin qui'l fasse un include ou génère des balises html de fichiers externes ...
02/03/2016, 10h15
informer

1 pièce(s) jointe(s)

Bonjour SpaceFrog,

Merci pour tes retours et déjà je comprends le principe avec $.getScript (fichierAvecChemin) qui est basé sur un appel AJAX, une alternative à $.rloader(optRloader) que je peux gérer à ma main :ccool:

Par contre c'est là où ca coince, c'est que $.getScript (optFicChemin) attend optFicChemin. Or c'est justement optFicChemin que je veux rendre générique et automatique passant en paramètre un répertoire avec son chemin et ensuite charger automatiquement tous les fichiers de ce répertoire et des sous répertoires .

Donc si je te suis, côté client avec JS, il faut appeler via AJAX un script PHP qui renverrais un tableau de fichiers avec leur chemin et ensuite boucler sur le tableau pour appeler $.getScript (fichierAvecChemin) autant de fois qu'il existe d'items dans le tableau.:wow:

Par contre la solution server pur me parait beaucoup plus lourde alors je préfère me concentrer sur la solution client JS.

Be seeing you Pièce jointe 202577
02/03/2016, 10h42
SpaceFrog

Il te suffirait de passer en paramètre un identifiant de répertoire ...

et du coup ton fichier de traitement php ferais un include de tous les fichiers contenus dans ce répertoire.
02/03/2016, 10h56
informer

SpaceFrog,

Tu m'ouvres des horizons et en même temps j'ai toujours l'impression de me balader au bord de la tamise.

En appelant dans un fichier PHPH => include 'js/file.js', il pourra être appelé côté client?

Je me pose des question sur l'appel AJAX, c'est asynchrone et ça pose pas des problèmes. Par exemple des appels à des fonctions JS chargées côté serveur lors du chargement de la page ?
02/03/2016, 10h59
SpaceFrog

un seul appel de script coté client ...

c'est php qui concatène le code que tu veux retourner ...
par exemple avec un include dans un boucle sur les fichiers du répertoire passés en paramètre

SpaceFrog,

Désolé mais je suis un peu perdu. Considérons que je veuille faire le chargement des fichiers JS et CSS par exemple coté server, c'est à dire appeler un ficher PHP qui fasse les "include", on aurait alors un truc de ce genre:

Au chargement de la page
Code:

1 2 3 4 5 6 7 8 $(document).on("pagecreate", "#index", function(event) { var oSerialData = {}; oSerialData.path = "folder1/forlder2/"; $.ajax({url: "ownInclude.php", data: oSerialData, type: JSON, error: function(error){ alert(error); }}); }
Et côté server la fonction php ici non récursive
Code:

1 2 3 4 5 6 7 <?php function ownInclude() { $Path= urldecode($_POST["path"]); $dir = dir($Path) while (filePath = $dir->read() ){ include $filePath} } ?>
Mais j'en reviens à ma question sur AJAX qui est asynchrone. Je ne risque pas d'avoir des appels depuis la partie cliente, à des fichiers avant qu'ils ne soient chargés par ownInclude(), donc côté server ?

02/03/2016, 13h15
SpaceFrog

je ne vois pas où tu intègres dans ton code ? tu fais un alert d'erreur ?
02/03/2016, 13h55
informer

Bon c'est ici que je bug surement. Pour moi, ça se faisait dans while (filePath = $dir->read() ){ include $filePath}

Mais j'ai apparemment pas compris l'histoire de l'include dans PHP. La méthode INCLUDE ne charge pas les fichiers JS et CSS ????
02/03/2016, 14h04
SpaceFrog

Non cette partie là est bonne ...
tu ramènes bien sur ta page php les codes ...

Mais lors du retour d'ajax sur ta page coté client tu ne fais rien ?

$.ajax n'est pas un getScript ... il n'intègre pas automatiquement le code reçu en retour ...
02/03/2016, 14h11
informer

Entre la partie server, client, DOM, PHP, MySQL, HTML, JQurey & mobile, CSS etc je peux pas dire que c'est tout à fait au point et c'est pour ça que certaines questions peuvent paraitre un peu absurdes :fou:

Donc je reprends le include dans la boucle PHP

Citation:

while (filePath = $dir->read() ){ include $filePath}

ça charge bien les fichiers CSS et JS pour le projet?
02/03/2016, 14h13
SpaceFrog

NON cette partie là se fait coté serveur ... en php
tu prépares le code que tu vas retourner au client ...

regarde dans ta console, onglet xhr tu y verras le retour ...
encore faut-il exploiter le retour reçu ... ce que tu ne fais pas pour le moment

Donc le include ne charge pas les fichiers JS et CSS coté client et ne sont donc pas accessibles.

Il faut donc que je renvoie un tableau des fichiers depuis PHP vers le client. Je rajoute donc return aFilePath dans le PHP

Code:

1
2
3
4
5
6
7
8
9
<?php
 function ownInclude()
{  $aFilePath=[];
    $Path= urldecode($_POST["path"]);
    $dir = dir($Path)
     while (filePath = $dir->read() ){ $aFilePath[] = filePath}
    return aFilePath
}
?>

Et dans AJAX -> success: function(data){upLoadFiles(data) },

Code:

1
2
3
4
5
6
7
8
9
10
$(document).on("pagecreate", "#index", function(event)
{   var oSerialData =  {}; 
    oSerialData.path  = "folder1/forlder2/";
    $.ajax({url: "ownInclude.php", data: oSerialData, type: JSON,
         success: function(data){upLoadFiles(data) },
         error: function(error){alert(error);}
    });
}
 
function upLoadFiles(data){for (var i=0; i<data.length; i++){$.getScript (data[i]);}}

02/03/2016, 15h00
SpaceFrog

Heu non ...
tu n'as pas du regarder dans la console, onglet xhr

ton code php include regroupe les codes des fichiers a insérer sur la page ...

il envoie ensuite ce code sous forme de string dans la réponse xhr ...

si tu faisais un getScript le retour serait immédiatement converti en code et intégré dans la page ...

là tu fais un ajax ...
en fonction de ce que tu reçois en retour il te faudra alos ajouter uen balise script dasn to page lors du retour pui y mettre le code reçu
02/03/2016, 15h28
informer
Bon...je pensais avoir compris...dommage :koi:

Le code est fait à l'arrache mais considérons que la variable data de success: function(data){upLoadFiles(data) } soit un tableau du genre
- data[0] = "folder1/forlder2/file1.js"
- data[1] = "folder1/forlder2/file2.js"
- data[2] = "folder1/forlder2/file3.js"
et que j'appelle upLoadFiles(data) qui fait donc un appel itératif de $.getScript (data[i]), je pensais que j'aurais eu par ce bout de code:

Code:

for (var i=0; i<data.length; i++){$.getScript (data[i]);}}
- $.getScript ("folder1/forlder2/file1.js")
- $.getScript ("folder1/forlder2/file2.js")
- $.getScript ("folder1/forlder2/file3.js")
Et que le tour était joué donc chargement des fichiers JS file1 à 3 mais a priori :no:
02/03/2016, 15h41
SpaceFrog

Quel est ton souci avec cette boucle ?
tu as un message d'erreur ?
tu ne vois pas les fichiers se charger dans la console ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$.when(
    $.getScript( "folder1/forlder2/file1.js" ),
    $.getScript( "folder1/forlder2/file2.js" ),
    $.getScript( "folder1/forlder2/file3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
 
    //ici le code lorsque les fichiers seront chargés ...
 
});

02/03/2016, 15h56
informer

Désole SpaceFrog, je pense que je me suis mal exprimé. Je n'ai pas de problème car je n'ai pas testé le code. En effet, il a été écrit en flux tendu sur le forum. Je voulais juste avoir confirmation de la validité de ma démarche.

D'ailleurs, l'approche est-elle correcte?

Si oui, j'ai une difficulté purement conceptuel sur l'utilisation d'AJAX qui est un processus asynchrone. Chaque appel à $.getScript est asynchrone en plus du premier appel par ajax. Donc ne risquerais-je pas des appels aux fonctions par la page HTML (partie cliente) avant qu'elles ne soient chargés dynamiquement?

Toute cette discussion est de la pure théorie pour comprendre les différentes couches mises en œuvre pour un chargement dynamique.

Merci encore pour ton aide
02/03/2016, 16h03
SpaceFrog

regarde le dernier code que je t'ai proposé ...
02/03/2016, 16h08
informer
Je ne comprends pas ta réponse car tu écris en dur les fichiers à chargés or justement je ne sais pas quels seront les fichiers retournés par l'appel à la fonction PHP?

quand j'écris
- data[0] = "folder1/forlder2/file1.js"
- data[1] = "folder1/forlder2/file2.js"
- data[2] = "folder1/forlder2/file3.js"
C'est ce que je reçois en retour du PHP mais c'est à titre d'exemple car je ne sais absolument pas quels fichiers JS et CSS sont sous folder1/forlder2/

Donc retour à la case départ et notamment sur ma question sur AJAX

Ha oui on peut alors envisager un truc du genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var toLoad = ["folder1/forlder2/file1.js", "folder1/forlder2/file2.js", "folder1/forlder2/file3.js"], loaded = 0;
 
var onLoaded = function() {
    loaded++;
    if (loaded == toLoad.length) {
       // tous les fichiers sont chargés 
       // ici le code a effectué après chargement   
} else {
        console.log( loaded + ' fichiers chargés ...');
    }
}
 
for (var i = 0, len = toLoad.length; i < len; i++) {
    $.getScript(toLoad[i], onLoaded);
}

Mais comment sais-tu les fichiers existant dans "folder1/forlder2/" puisque justement mon problème c'est de récupérer les fichiers du répertoire, répertoire passé en data dans AJAX. Donc je ne sais pas quels fichiers vont être retournés dans xhrData !!!!

Donc var toLoad comment l'initialises-tu?. Encore une fois, je ne sais pas du tout les fichiers existant dans "folder1/forlder2/" et retournés dans xhrData?
Code:

1 2 3 4 5 6 7 8 $(document).on("pagecreate", "#index", function(event) { var oSerialData = {}; oSerialData.path = "/folder1"; $.ajax({url: "ownInclude.php", data: oSerialData, type: JSON, success: function(xhrData){upLoadFiles(xhrData) }, error: function(error){alert(error);} }); }
De plus, en raison de l'asynchronisme d'AJAX, comment être certain que tous les fichiers chargés dynamiquement le seront avant que les fonctions qui les composent ne soient appelées côté client

Merci de ta patience

03/03/2016, 08h19
SpaceFrog
Bon on va décomposer ...
Code:

1 2 var toLoad = "folder1/forlder2"; $.getScript("page_de_concaténation_php.php?d="+toLoad", function() { //callback })
dans ta page de concaténation coté serveur tu concatènes tous les script de tes fichiers js contenu dans le répertoire récupérer en $_GET, soit par des include, ou des echos des contenus des fichiers, dans une boucle ou autre...

dans le callback les scripts concaténés auront été chargés .

SpaceFrog,

Merci encore pour ta patience. La meilleure façon pour moi de comprendre est de reformuler et synthétiser tout ce qui a été écrit. Mais avant, j'ai lu ici

Comme $.getScript est asynchrone, je préfère gérer l'appel AJAX pour paramétrer async à false. Donc sur sur le chargement de la page HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).on("pagecreate", "#index", function(event)
{  var path = "folder1/forlder2";
     $.ajax(
     { async : false,
        url: "page_de_concaténation_php.php",
        data: path
     }).success(function(xhrData) {loadScript(xhrData)});
});
 
function loadScript(toLoad)
{    for (var i = 0, len = toLoad.length; i < len; i++)
    {   $.ajax(
        {  url: toLoad[i],
           dataType: "script",
           cache: true // ==> Je ne sais pas pourquoi ???
         });
    }
}

Cette fonction alternative ne serait-elle pas suffisante?

Code:

1
2
3
4
5
6
7
function loadScript(toLoad)
{    for (var i = 0, len = toLoad.length; i < len; i++)
    {  var myScript = document.createElement('script');
        myScript.src = toLoad[i];
        document.head.appendChild(myScript);
    }
}

Ou celle-ci que j'ai trouvé ici

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
   function loadScript(toLoad, callback){
        var array = [];
 
        toLoad.forEach(function(script){
            array.push($.getScript( script ))
        });
 
        array.push($.Deferred(function( deferred ){
                    $( deferred.resolve );
                }));
 
        $.when.apply($, array).done(function(){
                //===> Pourquoi ???
                if (callback){
                    callback();
                }
            });
    }

Bon enfin coté server, ça ne change pas, page_de_concaténation_php.php serait

Code:

1
2
3
4
5
6
7
8
<?php
  $aFilePath=[];
    $Path= urldecode($_POST["path"]);
    $dir = dir($Path)
    while (filePath = $dir->read() ){ $aFilePath[] = filePath}
    return aFilePath
}
?>

J'ai lu pendant mes pérégrinations postesques (barbarisme ou néologisme au choix) que pour certaines librairies, il fallait respecter un ordre JQuery UI avant les autres par exemple. Est-il possible de le tester?

je ne comprends pas ton obsession de l'assynchrone ???

https://api.jquery.com/jquery.getscript/
Code:

1 2 3 4 5 6 7 $.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) { console.log( data ); // Data returned console.log( textStatus ); // Success console.log( jqxhr.status ); // 200 console.log( "Load was performed." ); });
dans le callback les scripts sont chargés !

03/03/2016, 14h00
informer

Merci beaucoup pour tous ces retours.

Mon obsession sur l'asynchronicité et tu as raison, j'en ai bien une, tiens à ma méconnaissance des comportements web.

Je me demande comment, par exemple au chargement d'une page, est géré l'appel à une fonction qui n'est pas chargée car le chargement dynamiquement du fichier JS dans lequel elle se trouve ne l'est pas encore en raison de l'asynchronicité d'AJAX.

Merci encore pour ton aide
03/03/2016, 14h28
SpaceFrog

Je réitère donc:

Citation:

dans le callback les scripts sont chargés !
03/03/2016, 15h07
informer

Merci pour ton retour et ma dernière demande est un lien pour comprendre la notion de callback qui m'échappe compétement et je pense que c'est à cause de ça que je m'acharne.

Désolé d'être aussi :traine:

Après ton prochain retour, je la discussion passera en résolu !

Encore un très grand merci pour ton aide:king:

Un callback est une fonction lancée après l'éxecution du déclencheur

Code:

1
2
3
4
5
$.getScript( "ajax/test.js", function( ) { // ici c'est le callback
 
alert(" Voilà j'ai fini mon getScript !!, toute instruction lancée ici pourra faire appel a des fonctions chargées par le getScript")
 
});

03/03/2016, 19h12
informer

Ton explication sur le callback est juste lumineuse 8-)

Merci encore pour ton aide précieuse et qui me fait avancer sur la longue pente qui mène aux sommets de la connaissance ... :king:
19/03/2016, 09h50
informer

la solution est ici