Discussion :

[informer]

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 rloader. c'est par ici .

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !


avec son appel au chargement de la page HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci par avance de toute aide apportée!

Be seeing you

[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 ...

[informer]

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

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.


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

[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.

[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 ?

[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

[informer]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SpaceFrog]

je ne vois pas où tu intègres dans ton code ? tu fais un alert d'erreur ?

[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 ????

[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 ...

[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

Donc je reprends le include dans la boucle PHP

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

ça charge bien les fichiers CSS et JS pour le projet?

[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

[informer]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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]);}}

[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

[informer]

Bon...je pensais avoir compris...dommage

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...
 
});

[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

[SpaceFrog]

regarde le dernier code que je t'ai proposé ...

[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