Erreur à l'appel de $('head').append(filePath) pour fichier JS

Version imprimable

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

Bonjour à tous,

Voilà j'ai l'erreur suivante

Citation:

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

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

Code:

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

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

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

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:

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

j'ai dans le DOM

Citation:

<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

Citation:

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

17/03/2016, 11h11
SpaceFrog

Fais plutot un getScript pour le fichier js ...
17/03/2016, 17h42
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
17/03/2016, 19h07
informer

Citation:

Envoyé par SpaceFrog

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
18/03/2016, 08h10
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 ...
19/03/2016, 09h45
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
21/03/2016, 08h25
SpaceFrog

Bien évidemment que si tu charges les autres fichiers dans le callback ...
22/03/2016, 10h14
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

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:

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

22/03/2016, 13h27
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:

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

Si j'ai 3 fichiers
Code:

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
22/03/2016, 13h44
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
22/03/2016, 14h03
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
22/03/2016, 14h36
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 ...
22/03/2016, 15h35
informer

Quand tu fais un

Citation:

include coté server (PHP)

les fichiers JS sont visible coté client ?
22/03/2016, 15h51
SpaceFrog

:koi: 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 ...

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:

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:

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: {}
			}
		});
	});
}

23/03/2016, 08h17
SpaceFrog

j'aurais personnellement décomposé

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

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
23/03/2016, 12h45
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 ???:calim2:
23/03/2016, 13h05
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

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