Discussion :

[informer]

Bonjour à tous,

Voilà j'ai l'erreur suivante

Uncaught TypeError: Cannot read property 'helpers' of undefined (19:07:50:809 | error, javascript)

quand $('head').append(filePath) est appelé comme suit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
jqXHR.success(function (jqXHRData) 
{	var filePath ="";
	for (i = 0; i < jqXHRData.length; i++) 
	{	
		//PAS d'ERREUR  avec  avec jqXHRData[0]["fic"] ="fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.css"
		if (jqXHRData[i]["fic"].substr(-3) ==="css")
		{	 // Sans erreur 
                         filePath = "<link href='" + jqXHRData[i]["fic"] +  "' rel='stylesheet'  type='text/css' media='screen'/>";
			$('head').append(filePath);
		}
 
		//ERREUR  avec  jqXHRData[1]["fic"] = "fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.js" 
               else if (jqXHRData[i]["fic"].substr(-2) ==="js")
		{    filePath = "<script src='" + jqXHRData[i]["fic"] + "'></script>"; //filePath = "<script src='fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.js'></script>"
		     $('head').append(filePath);
		}
	}
}

Cela peut-il provenir de dépendance avec d'autres fichiers JS?

Merci par avance

[informer]

après lecture de forums, je pensais résoudre mon problème en échappant </script> avec <\/script>" mais pas plus de succès

Je n'ai pas d'erreur si je n'appelle pas

Code :

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

1
2
filePath= "<script type='text/javascript' src='" +jqXHRData[i]["fic"]+ "'><\/script>";
$('<script />', { type : 'text/javascript', src :  jqXHRData[i]["fic"]}).appendTo('head'); ou $('head').append(filePath);

Par contre si j'appelle le code ci-dessus sachant que:

1. jqXHRData[0]["fic"] ="<link href="fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="screen"></link>"
2. jqXHRData[1]["fic"] ="<script type="text/javascript" src="fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.js"></script>"

j'ai dans le DOM

<link href="fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="screen"></link>
<script type="text/javascript" src="fancyBox-fullpack/source/helpers/jquery.fancybox-buttons.js"></script>

Mais après le chargement de jqXHRData[1]["fic"] j'ai la fameuse erreur

Uncaught TypeError: Cannot read property 'helpers' of undefined (01:55:49:445 | error, javascript)

[SpaceFrog]

Fais plutot un getScript pour le fichier js ...

[informer]

Merci SpaceFrog mais le problème venait comme je le présentais des dépendances entre fichiers JS.

En effet, il faut charger les fichiers JS dans l'ordre suivant:

1. Fichiers du répertoire 'fancyBox-fullpack/source
2. Fichiers du répertoire 'fancyBox-fullpack/source/helpers

La question était donc comment faire pour lancer se séquençage?

Après m'être mis le cerveau à l'envers puis à l'endroit, bon j'avoue je pratique le yoga, j'ai trouvé une solution qui nécessitait de :

1. Comprendre le comportement de RecursiveIteratorIterator
2. Faire une arborescence qui implicitement indique le lien père / enfant ou appelant/appelé
3. Puis incrémenté / décrémenté la boucle FOR(){} en fonction de son arborescence

Le billet DOM - Chargement dynamique des fichiers JavaScript : Traitement simple des fichiers JS interdépendants tente d'expliquer ma solution.

Merci à tous

Merci

[informer]

Fais plutot un getScript pour le fichier js ...

L'utilisation de la méthode $('head').append(filePath) était un exercice pour comprendre globalement l'ajout d'éléments dans le DOM.

Merci encore pour ton aide

[SpaceFrog]

le getScript aurai permis d'utiliser le callback et ainsi éviter que des scripts soient appelés avant que d'autres aient fini de charger ...

[informer]

Bonjour SpaceFrog,

Mon problème était l'ordre de chargement des fichiers certains devaient l'être avant d'autre et sauf si getScript gère les dépendances par la création d'une pile, je ne pense pas qu'il résolve le problème de l'ordre de chargement.

Merci encore

[SpaceFrog]

Bien évidemment que si tu charges les autres fichiers dans le callback ...

[informer]

Bonjour SpaceFrog,

Un truc m'échappe si j'ai par exemple tous ces fichiers à charger sachant que le 1er pack doit être chargé avant le 2ème, comment fais tu avec getScript car mon problème est de charger des fichiers de répertoires et sous répertoires dont je ne connais pas l'arborescence mais qui doivent être chargés selon un ordre. Et la méthode doit être indépendante du nombres de

• Sous-répertoires pères /fils
• De fichiers

Pour le chargement de FancyBox, j'ai 6 fichiers JS et 3 niveaux de répertoires. Mais je pourrais avoir l'exemple ci-dessous, sachant que ma solution est déjà partiellement implémentée car le nombre de niveaux indique l'ordre de chargement

Pack1 à charger en 1er
folder1/folder11/folder111/js1.js
folder1/folder11/folder112/js1.js
folder1/folder11/folder113/js1.js
folder1/folder12/folder121/js1.js
folder2/folder22/folder222/js1.js
fol3/folder33/folder333/js1.js

Pack2 à charger en 2d
folder1/folder11/js1.js
folder1/folder12/js1.js
folder3/folder31/js1.js
folder4/folder47/js1.js

Pack3 à charger en 3ème
folder1/js1.js
folder2/js1.js
folder3/js1.js
folder4/js1.js

Bien sûr les chemins seraient dans un array nommé type myArray[index]["path"] = "chemin index"

Je te remercie de me donner le bout de code pour le traitement avec getScript

[SpaceFrog]

si tes fichiers sont nommés rationnellement il devrait y avoir un lien entre les fichiers


folder1/folder11/folder111/js1.js
folder1/folder11/js1.js
folder1/js1.js

ce qui donnerait un truc du genre :

Code :

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

1
2
 
$.getScript ( "folder1/folder11/folder111/js1.js", function(){ $.getScript("folder1/folder11/js1.js", function(){ $.getScript("folder1/js1.js", function(){ /* ici le script faisant appel au 3 fichiers js chargés  */})})})

Si cela ne convient pas c'est que tu as un souci de conception à la base et tu devras regouper les fichies js ...
peut être les concaténer coté serveur ...

[informer]

si j'ai bien compris tu imbriques les appels a fonction autant de fois qu'il y a de fichiers

Si j'ai 2 fichiers

Code :

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

$.getScript ( "folder1/folder11/folder111/js1.js", function(){ $.getScript("folder1/folder11/js1.js"});

Si j'ai 3 fichiers

Code :

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

1
2
 
$.getScript ( "folder1/folder11/folder111/js1.js", function(){ $.getScript("folder1/folder11/js1.js", function(){ $.getScript("folder1/js1.js", function(){})})})

Mais comment fais-tu sachant qu'on ne connait pas le nombre de fichiers car ma question a pour but le chargement dynamique de l'arborescence chargé sur le site FancyBox donnée en contrainte.

Qu'as tu pensé de ma solution lien ici

[SpaceFrog]

la seule solution que j'e vois c'est de concatener ton js coté serveur

faire un getScript sur une page php qui retournera l'ensemble des scripts ... du coup un seul callback

[informer]

Ça a l'air super mais ça dépasse mes compétences, là. Pourrais-tu me faire une bref code coté PHP et JS, svp?

De plus comment comment gères-tu les interdépendances entre fichiers JS? estScript sait-il gérer ce type de contrainte ou peut-on prendre ma solution?

Merci

[SpaceFrog]

ce n'est pas très complique de faire un include coté php...
le tout c'est que ta requête envoie les fichiers à inclure"
après je ne sasi pas ce qui détermine les dépendances entre tes fichiers ...

[informer]

Quand tu fais un

include coté server (PHP)

les fichiers JS sont visible coté client ?

[SpaceFrog]

vous pouvez répété la question ???

Ce n'est pas mon projet, mais le tien...
c'est a toi de savoir que fichier charger ou non ...

Sinon de façon générique oui le js est visible coté client ...

[informer]

Donc si je te suis, je charge les fichiers JS et CSS pour gérer FancyBox côté server via PHP avec la commande include

Donc Coté server filesFolderList.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
 
//fichier sort.php non documenté car  ne pose pas de problème
require "sort.php";
 
$masterFolder = urldecode($_POST['masterFolder']);
$pathFolder = urldecode($_POST['path']);
 
$docRoot = $_SERVER['DOCUMENT_ROOT'];
 
$pathRoot = (empty($masterFolder)?$docRoot."/": $docRoot."/".$masterFolder."/");
$lenRoot =strlen($pathRoot );
$fullPathFolder=$pathRoot .$pathFolder;
 
if ($docRoot ==="D:/xampp/htdocs"){$fullPathFolder  = json_decode(str_replace("/", "\\",  json_encode($fullPathFolder)));}
 
$objectsFolder = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($fullPathFolder), RecursiveIteratorIterator::SELF_FIRST);
 
foreach ($objectsFolder as $file)
{	if (!$file->isDir())	
	{	if (substr($file,-2 ) ==='js' or substr($file,-3) ==='css')
		{	$fullFile = substr($file,$lenRoot, strlen($file) - $lenRoot+1) ;
			$fullFile = str_replace("\\", "/", $fullFile);
			$filesList[] = array ("fic"=> $fullFile, "level"=>substr_count($fullFile,"/"));		
		}
	}
}
 
 
$keyNameArray= "level";
$filesList1= sortArrayByKeyValue($filesList, $keyNameArray);
 
/*-----------------------------------------------------------------------------------------------------------
chargement des fichiers CSS et JS pour la gestion de la FancyBox
-----------------------------------------------------------------------------------------------------------*/
 
foreach ($filesList1 as $key => $val)) {include ($val);}
 
 
$returnData =  json_encode($filesList1);	
echo  $returnData;

coté client sur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function()
{	var optFolder = {};
	optFolder.masterFolder = "responsive";
	optFolder.path = "fancyBox-fullpack/source";
 
	var jqXHResponse =	$.ajax(
	{	//async : true,
		type: "POST",
		url: "php/filesFolderList.php",
		data: pathFolderJSon,
		dataType: "json" //Le format JSon texte est toujours initialisé
	});	
	jqXHR.success(function (jqXHRData) 
	{	var ListView1Options =   { inset: false };
		$("#ListView1").listview(ListView1Options);
		$("a[data-rel='PhotoGallery1']").attr('rel', 'PhotoGallery1');
 
		/*-----------------------------------------------------------------------------------------------------------
		Si je te comprends bien, je peux initialiser la fancyBox puisque dans 
		filesFolderList.php j'ai fait ==>foreach ($filesList1 as $key => $val)) {include ($val);} 
		-----------------------------------------------------------------------------------------------------------*/
 
		$("a[rel^='PhotoGallery1']").fancybox({});
		$("a[data-rel='PhotoGallery1']").fancybox(
		{	helpers :
			{	 buttons: {},
				thumbs: {}
			}
		});
	});
}

[SpaceFrog]

j'aurais personnellement décomposé

et que là a priori tu colles en même temps à la fin un json

si tu fais un getScript il ne faut récupérer que du script js

si tu fais un ajax et que tu récupères plusieurs turcs il faut ensuite traiter ton retour
sachant aussi que su tu fais un ajax les fichiers js ne comportent pas de balises script et les css pas de balise style

[informer]

SapceFrog,

Je m'y perds un peux alors je reprends tranquillement :

Moi : Question initial pourquoi $('head').append(filePath) envoie un message d'erreur => Réponse car un ordre de chargement doit être respecté
Toi : Mieux d'utiliser gestScript()
Moi : Mais existe plusieurs fichiers à charger
Toi : Porpose d'appeler dans le callback des gestScript() successifs, les fichiers à charger =>
$.getScript ( "folder1/folder11/folder111/js1.js", function(){ $.getScript("folder1/folder11/js1.js", function(){ $.getScript("folder1/js1.js", function(){})})})
Moi : Oui mais ne connais pas le nombre de fichiers à charger
Toi : Evoque l'utilisation de la commande PHP include
Moi : Propose ma solution
Toi : Me reparles de getScript

Moi : Pourquoi parler du getScript alors que tu me dis qu'on peut charger les fichiers JS et CSS via include ???

[SpaceFrog]

Moi: Tu cherches a charge des fichiers JS en ajax ???

Moi: Un seul getScript qui pointe vers un fichier de traitement php qui fera les include dans une boucle

Précise ton besoin ...
si la question est comment charger des scripts js avaec ajax, la réponse est getScript
si la question est et si j'ai plusieurs fichiers à charger, la reponse est des include dans un fichier php visé par le getScript
si la question est quand puis-je utiliser un script qui fait appel à du js chargé par ajax, la réponse est dans le callback de getScript