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

Version imprimable

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

Citation:

Envoyé par 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

si j'utilise un getScript vers un fichier de traitement php alors j'aurai
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $.getScript( "php/filesFolderList.php", function() { 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: {} } }); } );
Par contre comment passer avec getScript en paramètre optFolder

var optFolder = {};
optFolder.masterFolder = "responsive";
optFolder.path = "fancyBox-fullpack/source";

Comme ceci
Code:

1 2 3 4 $.getScript( "php/filesFolderList.php responsive fancyBox-fullpack/source ", function(){} )
Puisque php/filesFolderList.php attend

$masterFolder = urldecode($_POST['masterFolder']);
$pathFolder = urldecode($_POST['path']);

Si ce n'es pas possible je dois:

Utiliser ajax
dans filesFolderList

utiliser include pour charger les fichiers JS
Supprimer echo

Question
include fonctionne-t-il aussi pour les CSS car ma demande est de pouvoir charger tout type de fichiers

en param get de l'url

Code:

1
2
3
4
 
masterfoler={"masterfolder":"responsive","path":"fancyBox-fullpack/source"};
 
 "php/filesFolderList.php?param="+encodeURIComponent(JSON.stringify(masterfolder))

23/03/2016, 18h51
informer

C'est beau la connaissance... :applo: :bravo:

Dernière question mais sans cette dernière je n'aurais pas fait le tour de la question.

Si j'utilise INCLUDE dans ma fonction PHP pour charger les fichiers CSS et JS, ils sont chargés à quel niveau? Par qui sont-ils visibles et dans quel contexte? Pour le domaine entier, la page HTML courante affichée, toutes les pages HTML ???

Merci pour tes réponses
24/03/2016, 08h13
SpaceFrog

Le besoin de charger les script àprès le load de la page m'echappe toujours mais bon ...

Pour répondre à tes interrogations
Un getScript ne te permettra de charger QUE du js ...
pour les css il faudra procéder avec un $.ajax ou $.post ou $.get et les intégrer à la page en y insérant une balise style pour y mettre le code css reçu en retour de l'ajax.

Les fichiers resultat de l'include seront chargés dans le callback de l'ajax.
Automatiquement pour les js avec le getScript
Par un code append dasn el callback pour le css

Le contexte se limitant bien évidemment à la page ayant fait l'appel ajax.

Merci pour tes réponses qui répondent à toutes mes interrogations.

Citation:

Le besoin de charger les script après le load de la page m’échappe toujours mais bon ...

Bonne question qui s'explique par ma compréhension toute relative du dev internet. Pas plus compliqué que ça hélas :calim2:. Mais pour être plus précis, j'utilise l'application WebBuilder, un Ms-Access pour web et qui génère un fichier JS pour chaque page HTML nommé NomPage.js. J'ai donc pour ma page index.html le fichier index.js avec entre autre le code suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).on("mobileinit", function() { $.mobile.ajaxEnabled = false; }); $(document).on("pagecreate", "#index", function(event) { var ListView1Options = { inset: false }; $("#ListView1").listview(ListView1Options); $("a[data-rel='PhotoGallery1']").attr('rel', 'PhotoGallery1'); $("a[rel^='PhotoGallery1']").fancybox({}); });
Et a priori, si je suis la logique du code généré, je devrais mettre mon code d'appel au chargement sous $(document).on("pagecreate", "#index", function(event)
{ });
Mais encore une fois, ayant une connaissance très lacunaire sur le produit, comme sur tout le reste d'ailleurs :mur:, quand je fais des modifications, il régénère le fichier index.js et écrase mon code ajouté. Il existe peut être une façon d'ajouter directement via l'outil mon code mais encore une fois, ne la connaissant pas, pour contourner ce problème, j'ai créé 2 fichiers JS chargé en dur dans index.html

Le premier ownIndexDomReady.js avec $(document).ready(function() {} qui appelle loadFile
Code:

1 2 3 4 5 6 7 $(document).ready(function() { var optFolder = {}; optFolder.masterFolder = "responsive"; optFolder.path = "fancyBox-fullpack/source"; loadFile(optFolder); }); // ready
Le second filesManager.js dans lequel est déclaré loadFile et qui charge les fichiers JS/CSS puis initialise la streetView List et la FancyBox

/
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 * * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ function formatErrorMessage(jqXHR, exception) { if (jqXHR.status === 0) {return ("Not connected.\nPlease verify your network connection.");} else if (jqXHR.status === 404) {return ("The requested page not found. [404]");} else if (jqXHR.status === 500) {return ("Internal Server Error [500].");} else if (exception === "parsererror") {return ("Requested JSON parse failed.");} else if (exception === "timeout") {return ("Time out error.");} else if (exception === "abort") {return ("Ajax request aborted.");} else { return ("Uncaught Error.\n" + jqXHR.responseText);} }//formatErrorMessage function ajaxOutput(optFolder) { var pathFolderJSon= {}; pathFolderJSon = optFolder; var jqXHResponse = $.ajax ({ //async : true, type: "POST", url: "php/filesFolderList.php", data: pathFolderJSon, dataType: "json" //Le format JSon texte est toujours initialisé }); return jqXHResponse; } function loadFile(pathFolder ) { var jqXHR = ajaxOutput(pathFolder); jqXHR.success(function (jqXHRData) { var filePath =""; var scriptDOM =""; for (i = 0; i < jqXHRData.length; i++) { filePath = jqXHRData[i]["fic"] ; if (filePath.substr(-3) ==="css") { scriptDOM = "<link href='" +filePath + "' rel='stylesheet' type='text/css' media='screen'>"; $('head').append(scriptDOM); } else if (filePath.substr(-2) ==="js") { scriptDOM = "<script type='text/javascript' src='" +filePath + "'><\/script>"; //$('<script />', { type : 'text/javascript', src : filePath}).appendTo('head'); $('head').append(scriptDOM); } } var ListView1Options = { inset: false }; $("#ListView1").listview(ListView1Options); $("a[data-rel='PhotoGallery1']").attr('rel', 'PhotoGallery1'); $("a[rel^='PhotoGallery1']").fancybox({}); $("a[data-rel='PhotoGallery1']").fancybox( { helpers : { buttons: {}, thumbs: {} } }); // fancybox }); jqXHR.error( function (jqXHR, ajaxOptions, thrownError) { var errMsg = formatErrorMessage(jqXHR, thrownError); alert(errMsg); }); }// loadFile
Par ailleurs, il génère aussi une arborescence de répertoires avec tous les fichiers nécessaires au projet et entre celle pour la FancyBox. Mais manque de chance, les fichiers chargés dans l'arborescence sont obsolètes. J'ai donc ajouté les répertoires et sous répertoires téléchargés depuis le site FancyBox et pour être indépendant de la structure des répertoires téléchargée sur le site FancyBox, j'en suis venu à toutes ces questions.

Voilà toute ma triste histoire :triste:

Ultime question
ai-je raison de penser ajouter mon code dans $(document).on("pagecreate", "#index", function(event) avant var ListView1Options si reste dans la logique de l'outil?