Boucler avec Jquery $.each() sur un tableau d’objets Json

Introduction:

J’en avait marre de faire des boucles For en JS, alors je commence à utiliser $.each().

C’est pour boucler sur un tableau d’objets JSON . (Rappel : Un tableau [] contient des objets {} Json)

Exemple

La méthode JS suivante récupère son tableau d’objets Json de  listingCoursTotal.php, puis, dans sa fonction de rappel(callback) affiche chaque photo :


function listingCours(){
    $.ajax({
        type: "POST",
        url: "listingCoursTotal.php",
        dataType: "json",
        success: function (data) {
            $( "#vlc" ).dialog( "open" );//Ouvre la fenêtre
            $.each(data, function(i, item) {//Jquery $.each est l'équivalent d'une boucle foreach
                // Dans la ligne suivante, je demande d'afficher l'image de chaque objets{} du tableau d'objets json data, c'est une  boucle, et dans cette boucle, je peut récupérer toutes les données.
                $("#vlc_content").append('<img src="images/'+data[i].photo+'" title="'+data[i].photo+'" class="photographie">');
                });
        }
    });
};

On voit passer le tableau d’objets Json dans Firebug, il peut être énorme, mais c’est très rapide et performant:

each1

Le fichier listingCoursTotal.php qui génère ce fichier Json est celui-ci :

<?php
  
include('connexionSql.php');
connexionSql();
  
$lectureSql="select cours.idcours,cours.idsalle,cours.idliste,cours.datedebut,cours.datefin,cours.photo,cours.nom,cours.heure,salle.nom,professeur.nom,cours.jour,cours.idfrequence,cours.nbetudiantmax,cours.nbetudiantmin,cours.remarque,cours.adresse,cours.idcategcours,cours.idprofesseur,cours.idbatiment,cours.idorganisation,cours.idniveaurequis,cours.notedecours from cours left join salle on cours.idsalle=salle.idsalle left join professeur on cours.idprofesseur=professeur.idprofesseur ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
 
while ($col=mysql_fetch_array($lecture)){
    $tabCours[]=array(
        "idcours"        =>$col[0],
        "idsalle"        =>$col[1],
        "idliste"        =>$col[2],
        "datedebut"      =>$col[3],
        "datefin"        =>$col[4],
        "photo"          =>$col[5],
        "nom"            =>$col[6],
        "heure"          =>$col[7],
        "salle"          =>$col[8],
        "professeur"     =>$col[9],
        "jour"           =>$col[10],
        "idfrequence"    =>$col[11],
        "nbetudiantmax"  =>$col[12],
        "nbetudiantmin"  =>$col[13],
        "remarque"       =>$col[14],
        "adresse"        =>$col[15],
        "idcategcours"   =>$col[16],
        "idprofesseur"   =>$col[17],
        "idbatiment"     =>$col[18],
        "idorganisation" =>$col[19],
        "idniveaurequis" =>$col[20],
        "notedecours"    =>$col[21]
        );
};

print_r(json_encode($tabCours)); // Affiche le tab au format Json pour que Jquery le récupère
exit();	 

Et voici le résultat dans Supercours, sans rechargement de page :

each2

Conclusion

Bien sur, dans la boucle, on ne charge pas que des photos, on peut charger des tas d’autres variables, et les insérer dans un $.load en html.

Encore une fois, à comparer avec Angular.js ng-repeat la semaine prochaine.

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

Uploader une photo avec Html5 et jquery

Introduction:

Je  conserve ici des modèles de codes JQUERY qui reviennent souvent dans les programmes.

Sommaire:

1. Uploader une Photo dynamiquement avec Jquery et HTML5 et Php sans rechargement de page.

Détail:

1. Uploader une Photo avec Jquery et HTML5

(Note : l’indentation n’est pas reprise par WordPress, tant pis, pas le temps de la refaire.)

 

Etape 1 : Créer le Button d’upload de fichier HTML avec un id.Dans ce cas,  je lui ai mis l’id photo.


Modifier la Photo :
 
<input class="right" type="file" value="" name="photo"    id="photo"  onchange=""/>

Etape 2 : Intégrer cette function Javascript JQUERY qui permet de contrôler la taille et le nom de la photo, et de récupérer ces variables. Dans cet example, la photo est uploadée sur le serveur dès que l’on clique sur le bouton “Browse », à l’aide de la fonction Ajax de Jquery :


$("#photo").change(function(){
	// Récupération des données de la photo après clic sur UPLOAD
		var file = this.files[0];
		var name = file.name;
		var size = file.size;
		var type = file.type;
 
	//Validation JS (Bien dautres choses sont possibles...)
		alert("Taille du fichier : "+file.size+" Octets");
 
	// Renommage.
		var data = new FormData();
		jQuery.each($("#photo")[0].files, function(i, file) {
			data.append('file-'+i, file);
		});
 
	// Envoi de la photo sur le serveur avec Jquery Ajax
		$.ajax({
			url: 'upload.php',  //Le fichier qui va traiter les données de la photo et l'uploader(envoi)
			type: 'POST',		// Format d'envoi
			data: data,			L'objet data a été défini juste au dessus.
			//Options to tell jQuery not to process data or worry about content-type. Permet de ne pas se soucier du format.
			cache: false,
			contentType: false,
			processData: false
		});
 
	 // Exemple de mise à jour de la photo en live, sans rechargement de page, avec jquery.
		$("#imagejo").empty(); // Facultatif
		$("#imagejo").append('<img src="images/'+name+'" title="" height=100px width=100px style="border-radius: 10px" >'); // Facultattif, permet de remplacer l'image par l'image uploadée sur le serveur dans la div imagejo	 
});
 

ETAPE 3 : Ce fichier PHP est celui qui gère la photo qui arrive sur le serveur par le biais de la fonction AJAX de JQUERY, il peut effectuer des contrôles supplémentaires de sécurité.

 


<?php
 
// Dans les versions de PHP antiéreures à 4.1.0, la variable $HTTP_POST_FILES
// doit être utilisée à la place de la variable $_FILES.
 
	$allowed_filetypes = array('.jpg','.gif','.bmp','.png');
	$max_filesize = 1000000;
	$filename = $_FILES['file-0']['name']; // Get the name of the file (including file extension).
	 
// Get l'extension du nom de fichier.
	$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);
	 
// Check si le format de fichier est autorisé, sinon DIE et informer l'utilisateur.
	if(!in_array($ext,$allowed_filetypes))
	die('Message');

// Choix du répertoire de destination	
	$uploaddir = 'images/';
	$uploadfile = $uploaddir . basename($_FILES['file-0']['name']);
	
echo '<pre>';
 
	if (move_uploaded_file($_FILES['file-0']['tmp_name'], $uploadfile)) {
		echo "Le fichier est valide, et a été téléchargé avec succès. Voici plus d'informations :\n";
		chmod("images/".$filename."", 0775);  //ok marche
	}
 
	else {
		echo "Attaque potentielle par téléchargement de fichiers. Voici plus d'informations :\n";
	}
 
echo 'Voici quelques informations de débogage :';
 
print_r($_FILES);
 
echo '</pre>';
 
?>