Chargement dynamique fichiers JS et CSS - Solution partielle actuellement

Version imprimable

Voir 40 message(s) de cette discussion en une page

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

Voir 40 message(s) de cette discussion en une page