GetJSON need PHP ?

Bonjour à tous et toutes, Je cherche une solution pour utiliser getJSON (ou getScript au pire) sur un site. Ma question est toute simple, est-il nécessaire d'avoir obligatoirement un langage serveur comme PHP ? Merci. (j'ai bien sur regardé sur le net et pour le moment je ne vois que ça mais je tiens à être sur)

Hello, Sur http://www.json.org/ tu peux lire que :

a écrit :
JSON is a text format that is completely language independent

Ton getJSON pourra, a priori, travailler avec n'importe quel autre langage qui générera du json

Hello En effet getJSON est une fonction Jquery.. il te faut donc au minimum jQuery... en dehors de ça pas grand chose d'autre.. getJson va lire un fichier qui contient un array de type JSON le json tu peux le faire à la main... sinon avec php, asp, des fonctions xml, le récupérer d'une api... bref pas OBLIGATOIREMENT besoin de PHP

Ok alors oui j'ai bien sur jQuery et j'ai déjà un objet JSON dans un fichier et qui est bien valide. Comme j'ai essayé mon getJSON et que soit il ne trouve pas le fichier soit (apparemment) il le trouve mais ne rentre pas dans la fonction success, je voulais être sur. Je fais tourner un serveur connect, est-ce que c'est ok ? (ça devrait vu qu'il est REST donc prends les requêtes GET). Ou alors j'écris mal mon code JS ? Le voici :

$.getJSON('js/vendor/galleria/img-datas.min.js', function (data, status, xhr) {
		console.log('success : ' + status + ' ' + xhr);
		dataGalleria = data;
		console.log(data);
	});

Dans ce cas, je n'ai pas d'erreur 404, donc je pense qu'il trouve bien le fichier mais je n'ai aucun log qui s'affiche contrairement à mes console.log qui sont bien présent. EDIT : je viens d'ajouter une fonction qui est appelé si un erreur arrive et elle est enclenché. Donc j'ai bien un problème mais je ne sais toujours pas lequel. Comment doit-être mon JSON ? Je pose la question parce que au départ j'avais un truc comme var maVar = [{ JSON }]; J'ai supprimé la partie maVar = mais toujours la même chose. Le JSON, lui, comme dis plus haut est bien valide (je l'ai passé au JSONlint). Merci
Modifié par MagicCarpet (29 Jan 2015 - 18:15)

Où veux-tu en venir avec ton lien ? Dois-je regarder quelque chose en particulier ?
Parce qu'il fait 3 km de long et je n'utilise ni node (directement) ni mongo-db.

J'ai montré tout ça à un collègue et il a pas pu m'aider. Apparemment il a le même problème.

En gros, si j'ai une fonction qui prendre l'erreur, il entre dedans, par contre il n'entre jamais dans la fonction success. Si je fais un getScript, ça fonctionne mais pas le getJSON. A oui, dans le getJSON, il entre comme je l'ai dis dans la fonction qui prends en charge l'erreur et il me retourne un objet.

Dans cet objet, j'ai bien un code 200 et dans responseText j'ai bien le contenu de mon fichier.

Bref, je n'y comprends rien.

Merci pour votre aide.

Pour mon fichier, j'ai essayé ceci :

var dataGalleria = [{ JSON }]
[{ JSON }]
{ JSON }

Rien à faire.

D'abord, j'aimerai comprendre une chose, pourquoi tu utilises getJSON alors que tu sembles appeler un fichier local non dynamique, ce dernier, à en croire ce que tu dis, contient directement ton JSON.

Si tel est le cas, tu peux garder ton fichier à charger directement (via <script ...>), la variable contenu dans ce fichier sera accessible sur tes fichiers JS qui seront chargés ensuite.

<script src="js/vendor/galleria/img-datas.min.js" ... >
<script src="js/app.js" ... >

// img-datas.min.js

var monJson = [{...},{...}];

// app.js

var monJson = monJson || [];

$.each(monJson, function(val, index) {
   // ...
});

Sinon je n'aime pas utilisé les raccourcies. getJSON n'est ni plus ni moins que l'appel à $.ajax avec le dataType: json (cf doc d'ailleurs)

$.ajax({
  dataType: "json",
  url: "fichiercontenantjson.ext",
  data: {}
})
.done(function(data) {
  console.log(data);
});

Modifié par kenor (30 Jan 2015 - 21:00)

Alors pour tout te dire, initialement, j'avais une balise script qui appelé mes données au format JSON. Ca marche très bien, sauf que depuis que j'utilise jslint, j'ai le même problème qu'avec Galleria, c'est à dire qu'il m'indique qu'il ne connait pas cette variable, ce que je comprends, là aussi, tout à fait.

Les données sont effectivement statique mais elles servent à alimenter Galleria pour lui indiquer le chemin des images ainsi que les descriptions de chaque image.

Alors si tu me dis que la balise script suffit et que ça convient très bien mais que tu me donnes aussi une astuce comme tu l'as fais avec Galleria, alors ça sera parfait

J'ai pas trouvé, j'ai essayé plusieurs mais que dalle.

Je t'ai fournis les 2 méthodes.

Ils ont des avantages et inconvénients tous les deux.

La première méthode a le soucis d'avoir une variable qui est global pour pouvoir y accéder (comme pour Galleria), chose qu'on préfère éviter, mais ce n'est pas en soit gênant si c'est vraiment nécessaire.

La seconde fait un appel ajax d'office alors qu'à priori ce n'est pas nécessaire.

Donc je serais toi, si c'est statique, je le laisse statique (et donc appel via fichier externe, je précise qu'en prod, il faudra combiner et minifier l'ensemble).

et donc cf code précédent :

(function() {
  var maVarJson = maVarJson || [];

  // code utilisant maVarJson
})();

kenor a écrit :

...
Donc je serais toi, si c'est statique, je le laisse statique (et donc appel via fichier externe, je précise qu'en prod, il faudra combiner et minifier l'ensemble).

et donc cf code précédent :

(function() {
  var maVarJson = maVarJson || [];

  // code utilisant maVarJson
})();

Je ne suis pas sur de te suivre. En gros, je laisse ma balise script qui appel donc mon fichier JS contenant le JSON. Ce fichier ainsi que le script Galleria sont minifier! Ok. Par contre, je ne fais pas de concaténation pour le moment mais ça doit être possible.

Par contre, là où je ne te suis plus, c'est sur ton code. Le truc c'est que j'ai déjà ceci :

(function() {
		var Galleria = Galleria || {};
		if (Galleria.length === 0) {return;} // code Galleria )();

Les données données JSON doivent être utilisé dans le code ci dessus, alors je dois imbriquer les functions ou je n'ai pas compris ?

(function() {

})();

Ce code permet d'isoler ton code pour éviter tout soucis avec les variables globales. Tu devrais l'utiliser systématiquement et tu regarderas que tous les plugins que tu trouves pour jQuery par exemple, sont englobé de la sorte, sauf qu'ils intègrent généralement en paramètre jquery, comme ceci :

(function($) {

})(jQuery);

Donc dans ton cas :

(function() {
  var Galleria = Galleria || {},
        monJson = monJson || [];
  
  if (Galleria.length === 0) {return;} 

  // ton code utilisant Galleria et ton Json présent dans le fichier img-data
  
})();

Bon alors je vais essayé d'être précis parce que ça ne fonctionne pas.

Alors quand je compile mon site, le JSlint passe sans problème. Par contre la console de mon navigateur me renvois cette erreur :

[Error] TypeError: undefined is not a function (evaluating 'c.loadTheme("js/vendor/galleria/galleria.classic.min.js")')
	(fonction anonyme) (galleria.conf.min.js, line 1)
	(fonction anonyme) (galleria.conf.min.js, line 1)
	j (jquery.min.js, line 2)
	fireWith (jquery.min.js, line 2)
	ready (jquery.min.js, line 2)
	I (jquery.min.js, line 2)

c.loadTheme : c représente bien Galleria, c'est uglify qui renomme les variables.

Du coup, j'ai cherché un petit peu, si je vire la fonction qui entoure mon code, ça ne change rien.

Si je supprime ces deux déclarations :

var Galleria = Galleria || {};
		var dataGalleria = dataGalleria || [];

J'ai des erreurs avec le JSlint mais pas d'erreur sous mon navigateur (mais Galleria ne marche pas).

Si, en plus de ces deux déclarations, j'enlève le test suivant :

if (Galleria.length === 0) {return;}

J'ai toujours les erreurs de lint mais Galleria fonctionne (et donc sans erreurs dans le terminal). On peut dire qu'il ne retourne rien, du coup, voilà pourquoi Galleria ne fonctionne pas et qu'il n'arrive pas à loader le thème... Mais dans ce cas j'ai toujours les erreurs de lint.

Je met le code ici (complet), j'ai peut-être fait une connerie :

'use strict';

$(document).ready(function () {

	(function() {
		var Galleria = Galleria || {};
		var dataGalleria = dataGalleria || [];

		if (Galleria.length === 0) {return;}
		
		// Galleria settings :
		var indexGalleria = 0;
		var valueForAutoPlay = 3000;

		//var isTouchDevice = 'ontouchstart' in document.documentElement;

		/*if (isTouchDevice === false) {
			$('.show-for-touch').css('display', 'none');
		}*/

		function delay(ms){
			var end = new Date().getTime() + ms;
			while ( end > new Date().getTime() ) {}
		}

		function adjustSizeHeightGalleria() {
			var windowWidth = $(window).width();
			var windowHeight = $(window).height();
			var returnThisFunction = false;

			if (windowWidth > 960) {
				returnThisFunction = windowHeight / 1.8;
			}
			else {
				returnThisFunction = windowWidth / 1.8;
			}

			return returnThisFunction;
		}

		$(window).resize(function() {
			Galleria.configure({
				height: adjustSizeHeightGalleria()
			});
		});

		Galleria.loadTheme('js/vendor/galleria/galleria.classic.min.js');
		Galleria.configure({
			height: adjustSizeHeightGalleria(),
			transition: 'pulse',
			transitionSpeed: 800,
			imagePanSmoothness: 32,
			autoplay: valueForAutoPlay,
			show: indexGalleria
		});

		Galleria.run('.galleria', {
			dataSource: dataGalleria,
			extend: function() {
				// init var
				var buttons = $('.buttons');
				var fapause = $('.fa-pause');
				var gallery = this;
				var gtc = $('.galleria-thumbnails-container');
				var txtrigt = $('.text-right');
				
				// Keyboard config
				gallery.attachKeyboard({
				    left: gallery.prev,
				    right: gallery.next,
				    up: gallery.prev,
				    down: gallery.next,
					backspace: gallery.prev,
					space: function() {
						gallery.playToggle();
					},
					return: function() {
						gallery.playToggle();
					}
				});
				
				// Bind actions
				gallery.bind('image', function(e) {
					indexGalleria = e.index;
				});
				gallery.bind('pause', function() {
					buttons.removeClass('hide');
					fapause.css({
						'opacity': '0.4',
						'cursor': 'auto'
					});
					txtrigt.removeClass('col-xs-11').addClass('col-xs-6');
				});
				gallery.bind('play', function() {
					buttons.addClass('hide');
					fapause.css({
						'opacity': '1',
						'cursor': 'pointer'
					});
					txtrigt.removeClass('col-xs-6').addClass('col-xs-11');
					delay(300);
					gallery.next().setPlaytime(valueForAutoPlay);
				});
				gallery.bind('fullscreen_enter', function() {
					if(screen.width < 501) {
						gtc.addClass('hide');
					}
				});
				gallery.bind('fullscreen_exit', function() {
					if(screen.width < 501) {
						gtc.removeClass('hide');
					}
				});
				
				// Action buttons
				$('.fa-backward').click(function() {
					gallery.prev();
				});
				fapause.click(function() {
					gallery.pause();
				});
				$('.fa-play').click(function() {
					gallery.playToggle();
				});
				$('.fa-forward').click(function() {
					gallery.next();
				});
				$('.galleria-info-link').click(function() {
					gallery.pause();
				});
				$('.fa-expand').click(function() {
					gallery.enterFullscreen();
				});
			}
		});
	})();
	
});

Dans tous les cas, merci pour ton aide.

le début n'est pas dans le bon ordre :

(function($) {
  'use strict'; // met le dans une fonction anonyme, sinon tu ne pourras utiliser aucun plugin non strict (ce qui peut arriver)

  $(document).ready(function () {

    // ton code (sans la fonction anonyme, déjà présente précédemment)

et tu fermes

  });
})(jQuery); // ça permet au passage d'éviter les conflits de l'utilisation du dollars

fait un console log de Galleria, ce n'est pas normal qu'il soit vide.
Modifié par kenor (31 Jan 2015 - 17:59)

Toujours pareil, j'ai le message d'erreur dans la console, Galleria ne marche pas (pas d'images) et j'ai un console log qui affiche la var Galleria qui est un objet mais quand je le "déplie", j'ai __proto__ et rien d'autre.

Voici le code pour vérifier mais je pense avoir fait ce que tu me dis. A oui, pour 'use script' je pensais qu'il fallait que ce ne soit uniquement qu'au début d'un fichier, merci pour les infos.

EDIT : pas de message d'erreur de JSlint.

(function($) {
	'use strict';

	$(document).ready(function () {
		var Galleria = Galleria || {};
		var dataGalleria = dataGalleria || [];

		if (Galleria.length === 0) {return;}

		console.log('Galleria : ', Galleria);

		// Galleria settings :
		var indexGalleria = 0;
		var valueForAutoPlay = 3000;

		//var isTouchDevice = 'ontouchstart' in document.documentElement;

		/*if (isTouchDevice === false) {
			$('.show-for-touch').css('display', 'none');
		}*/

		function delay(ms){
			var end = new Date().getTime() + ms;
			while ( end > new Date().getTime() ) {}
		}

		function adjustSizeHeightGalleria() {
			var windowWidth = $(window).width();
			var windowHeight = $(window).height();
			var returnThisFunction = false;

			if (windowWidth > 960) {
				returnThisFunction = windowHeight / 1.8;
			}
			else {
				returnThisFunction = windowWidth / 1.8;
			}

			return returnThisFunction;
		}

		$(window).resize(function() {
			Galleria.configure({
				height: adjustSizeHeightGalleria()
			});
		});

		Galleria.loadTheme('js/vendor/galleria/galleria.classic.min.js');
		Galleria.configure({
			height: adjustSizeHeightGalleria(),
			transition: 'pulse',
			transitionSpeed: 800,
			imagePanSmoothness: 32,
			autoplay: valueForAutoPlay,
			show: indexGalleria
		});

		Galleria.run('.galleria', {
			dataSource: dataGalleria,
			extend: function() {
				// init var
				var buttons = $('.buttons');
				var fapause = $('.fa-pause');
				var gallery = this;
				var gtc = $('.galleria-thumbnails-container');
				var txtrigt = $('.text-right');
				
				// Keyboard config
				gallery.attachKeyboard({
				    left: gallery.prev,
				    right: gallery.next,
				    up: gallery.prev,
				    down: gallery.next,
					backspace: gallery.prev,
					space: function() {
						gallery.playToggle();
					},
					return: function() {
						gallery.playToggle();
					}
				});
				
				// Bind actions
				gallery.bind('image', function(e) {
					indexGalleria = e.index;
				});
				gallery.bind('pause', function() {
					buttons.removeClass('hide');
					fapause.css({
						'opacity': '0.4',
						'cursor': 'auto'
					});
					txtrigt.removeClass('col-xs-11').addClass('col-xs-6');
				});
				gallery.bind('play', function() {
					buttons.addClass('hide');
					fapause.css({
						'opacity': '1',
						'cursor': 'pointer'
					});
					txtrigt.removeClass('col-xs-6').addClass('col-xs-11');
					delay(300);
					gallery.next().setPlaytime(valueForAutoPlay);
				});
				gallery.bind('fullscreen_enter', function() {
					if(screen.width < 501) {
						gtc.addClass('hide');
					}
				});
				gallery.bind('fullscreen_exit', function() {
					if(screen.width < 501) {
						gtc.removeClass('hide');
					}
				});
				
				// Action buttons
				$('.fa-backward').click(function() {
					gallery.prev();
				});
				fapause.click(function() {
					gallery.pause();
				});
				$('.fa-play').click(function() {
					gallery.playToggle();
				});
				$('.fa-forward').click(function() {
					gallery.next();
				});
				$('.galleria-info-link').click(function() {
					gallery.pause();
				});
				$('.fa-expand').click(function() {
					gallery.enterFullscreen();
				});
			}
		});
	});
})(jQuery);

Modifié par MagicCarpet (31 Jan 2015 - 20:47)

Le "use strict" tu peux le mettre au niveau global, mais ça sous entend que tout le code JS sera strict.
Supposons que tu combines tous les fichiers JS pour la prod, si un seul des scripts inclus n'est pas strict, tu auras des erreurs dans la console. Donc il est préférable de le mettre au niveau des fonctions que tu développes toi-même (fonction nommé ou anonyme d'ailleurs) pour éviter toute erreur difficile à débugguer.

Pour en revenir à ton soucis, faute de ma part :

var Galleria = Galleria || null;
if (Galleria === null) { return; }

Pour info, tu peux remplacer

$(document).ready(function() { // que je trouve long à écrire ...

par

$(function() { // plus court, fait exactement la même chose

idem, penses à combiner tes var :

var maVar = '....', // virgule
      maVar2 = {}, // virgule
      maVar3 = []; // point virgule 

Modifié par kenor (31 Jan 2015 - 21:21)

Alors j'ai une question :

Pourquoi faut-il combiner les variables ? (pour des questions de performances ? Je viens de regarder, apparemment si je laisse comme je l'ai fais dans mon code précédent, Uglify modifie comme tu me l'indique).

Sinon, et là je ne comprends pas, je n'ai pas d'erreur JSlint, ni d'erreur dans ma console mais par contre Galleria est null et donc ça ne fonctionne pas

Voici le début de mon code (je pense que c'est pas la peine que je mette la suite, je n'ai rien changé) :

(et pour le moment je n'ai pas pris en compte ton raccourci)

(function($) {
	'use strict';

	$(document).ready(function () {
		var Galleria = Galleria || null;
		var dataGalleria = dataGalleria || [];

		console.log('Galleria : ', Galleria);

		if (Galleria === null) { return; }

		// Galleria settings :
		var indexGalleria = 0;
		var valueForAutoPlay = 3000;

// La suite du code ...

EDIT : enfin oui remarque c'est normal que je n'ai pas d'erreur vu le return ...
Modifié par MagicCarpet (31 Jan 2015 - 21:32)

essai :

(function($, Galleria) {


})(jQuery, Galleria);

PS: on est d'accord que Galleria existe belle et bien ?

(un console.log en première ligne t'affiches bien ce qu'il faut ?)
Modifié par kenor (31 Jan 2015 - 22:02)

Et non, ce n'est pas spécialement pour la perf, c'est pour éviter les erreurs.

En théorie, tu es sensé, dans une fonction, déclaré TOUTES les variables en début de fonction (même vide), et ne plus en avoir ensuite.

Ceci afin d'éviter que tu déclares une variable dans une condition par exemple, et que tu te serves de cette variable en dehors de cette condition (et donc que cette variable ne soit pas déclaré)

http://jslinterrors.com/combine-this-with-the-previous-var-statement
Modifié par kenor (31 Jan 2015 - 22:08)

Ok, je vois pour les var, merci.

Alors j'ai cette erreur maintenant avec JSlint :

Running "jshint:all" (jshint) task

   app/_javascript/galleria/galleria.conf.js
    138 |})(jQuery, Galleria);
                    ^ 'Galleria' is not defined.
      1 |(function($, Galleria) {
                      ^ 'Galleria' is defined but never used.

Tu me demandes si je suis sur que Galleria existe, c'est à dire ? Avant de faire ces changements ça fonctionné, donc je dirais que oui. De plus dans le HTML avant le </body> j'ai mes balises de scripts et donc j'ai jQuery, ensuite un fichier qui regroupe tous mes scripts, puis galleria, le thème de Galleria, puis le dataGalleria et enfin, ce script.

On est d'accord que le début doit ressembler à ceci :

(function($, Galleria) {
	'use strict';

	$(document).ready(function () {
		var Galleria = Galleria || null;
		var dataGalleria = dataGalleria || [];

		console.log('Galleria : ', Galleria);

		if (Galleria === null) { return; }

et finir comme ça :

})(jQuery, Galleria);

Modifié par MagicCarpet (31 Jan 2015 - 22:16)

Une question que je me pose ...

Tu disais un peu plus haut que Galleria avait été remplacé par "c" si mes souvenirs sont bons.

Est-ce que ça signifie que "minifié", cette variable "Galleria" n'existe plus ? Et donc fatalement que si tu essais d'y accéder sur un script séparé, cette variable n'existant pas, elle renvoi une erreur sur ton script actuel ?