Manipuler Html avec $.load() et Json

Samedi 28 Février 2015

Introduction :

Voici ma méthode actuelle pour charger une page HTML dans une DIV, puis appliquer des variables dessus.

Cette méthode est celle qui après 8 mois d’expérience, m’apparait comme la plus facile.

A l’avenir, il faudra voir ce que peut faire Angular, car les méthodes de type ng-repeat m’ont l’air bien sympa.

A noter que cette méthode n’est pas tributaire d’un langage de query de donnée en particulier comme PHP ou JAVA ou Node.js.

 

Comment faire ?

Ordonnancement :

Phase 1. Exécuter $.ajax() pour récupérer un fichier JSON de données.

Phase 2. Dans la fonction de rappel de $.ajax(), charger la page HTML dans sa DIV à l’aide de $.load().

Phase 3.Dans la fonction de rappel(callback) de $.load(), appliquer les variables de Json dans le HTML de la phase 1 à l’aide de $.val()

 

Note : Les phases 1 et 2 sont inversibles.

Note 2 : C’est dans la fonction de rappel Ajax que l’on peut activer tout notre Javascript sur la page HTML.

 EXEMPLE

Voici une méthode qui charge un fichier JSON, puis affiche une page HTML, puis affiche des variables provenant du fichier JSON dans le DOM de la page html, dans des champs de type INPUT :

function modificationEtudiant(id){
	$.ajax({
		type: "POST", // Peut être du Get ou du Post
		data:$.param({'id':id}),			// Transmet une variable au fichier PHP, ça permet de préciser le query SQL sur la base de données.
		url: "listingEtudiantUnique.php", //Fichier Php sur lequel on pointe, il contient généralement une requête sql.
		dataType: "json",
		success: function (data) {// Voici la fonction et les instructions exécutée lorsque l'appel AJAX a été correctement effectuée. "data" contient le tableau d'objets JSON généré par le fichier PHP ou par JAVA
	 
			$( "#modifEtudiant" ).dialog( "open" );										// Ouvre la fenêtre de modif de l'utilisateur
			$("#modifEtudiant_content").empty(); 										// Supprime le contenu de la fenêtre
			$("#modifEtudiant_content").load('modificationEtudiant.html',function() { // Charge la page HTML puis injecte les données JSON dans sa fonction de rappel
				$("#tbt1").tabs(); 														// Activation des onglets
				$( "#datenaissance" ).datepicker({dateFormat: "yy-mm-dd"});				// Jquery Ui qui affiche les dates
				$( "#dateentree" ).datepicker({dateFormat: "yy-mm-dd"});
				$( "#datesortie" ).datepicker({dateFormat: "yy-mm-dd"});
				$("#prenom").val(data[0].prenom); 										// Injecte les données JSON dans le HTML
				$("#nom").val(data[0].nom); 											// Injecte la donnée JSON data[0].nom dans le champs input de type HTML ayant l'id "nom"
				$("#age").val(data[0].age);
				$("#pays").val(data[0].pays);
				$("#adresse").val(data[0].adresse);
				$("#paiement").val(data[0].paiement);
				$("#dateentree").val(data[0].dateentree);
				$("#datesortie").val(data[0].datesortie);
				$("#datenaissance").val(data[0].datenaissance);
				$("#imgmod1").attr("width", "500");
				$("#imagejo").append('<img src="images/'+data[0].photo+'" title="'+data[0].photo+'" class="photographie">');// remplace la photo du html initiale par la photo de l'objet json
				$("#retudiant").validationEngine();
			});
		};
	)};



Lorsqu’on exéctue ce code, on voit dans firebug le tableau d’objets JSON contenant les données passer, puis le fichier HTML se lancer :
cl2

 

Finalement, voici le résultat, et la fenêtre qui s’affiche avec les variables provenant de la base SQL directement dans le HTML, et cela sans rechargement de page :

cl

Publicités