Mémo Javascript (Standard/JQuery/AJAX)

Je regroupe ici des notes et des choses que j’ai pu être amenées à faire :

Timeout

Le morceau de code suivant permet de réaliser un changement du style CSS après un timeout en Javascript :

window.setTimeout(function(){ document.getElementById("pageStatusBar").style.display="none" }, 800);

Redirection conditionnelle par IP WAN

Ce morceau de code permet de se rediriger vers une page web ou une autre en fonction de notre IP WAN :

Inclure la page json :

<script type="application/javascript" src="http://jsonip.appspot.com/?callback=getip"></script>

Et la fonction :

function getip(json){
      if(json.ip=="81.x.x.x"||json.ip=="95.x.x.x") // si telle ip alors redirection, sinon google
	  {
		self.location.href="http://srv-application/SitePages/Accueil.aspx";
	  } else {
		self.location.href="http://www.google.fr";
	  }
    }

 Parcourir un tableau

J’ai eu des soucis lors du parcours d’un tableau en javascript, avec la boucle améliorée (enhanced loop). Il est conseillé d’utiliser une boucle standard de type for(var idx=0; idx < x; idx++) :

Mauvaise méthode de parcours d’un tableau :

// a ne PAS faire : j'obtenais dans tmp[1] : undefined, il énumérait simplement mes objets
for(var current in raw_array) {
	var tmp = current.split('/');
	array_final[i] = {  id : tmp[0],
				    key : tmp[1] };
	}
}

Bonne méthode de parcours :

// a faire : je stockais bien l'id et la clé dans mon tabeau array_final
for(var i =0; i < raw_array_length; i++) {
	var tmp = raw_array[i].split('/');
	array_final[i] = {  id : tmp[0],
				    key : tmp[1] };
	}
}

 

 Faire une requête Ajax simplement

Si vous intégrez la librairie jQuery, autant s’en servir un maximum ! Elle possède une méthode simple d’utilisation permettant d’exécuter une requête sur un fichier PHP. Elle peut être utilise pour énormément de choses, comme de la mise à jour dynamique de page web régulière (ex : toutes les 30 secondes des stats sont mis a jour), ou pour charger dynamiquement du contenu que quand c’est nécessaire, afin de faire des requêtes en base optimisées. Cette méthode se présente sous cette forme :

$.ajax({
    	type: "POST",
    	url: "../ajax/lmc.ajax.php",
    	data: { action : "load_template", id : valeur }
    }).done(function( response ) {
    	var array_result = response.split(';');
    	
    	$('#template_label').val(array_result[1]);
    	$('#template_freq').val(array_result[2]);
    	$('#template_keep').val(array_result[3]);
    	$('#template_cond').val(array_result[4]);
    	$('#template_hardw').val(array_result[5]);
    });

Dans ce code,  j’exécute la page ../ajax/lmc.ajax.php en lui envoyant des données de type POST. Ces données sont définies dans le champ data de la manière suivante :

{ nom_de_la_variable : valeur , nom : valeur }

Ensuite, lorsque le serveur renvoie sa réponse avec son code de confirmation 200, la fonction done est appelée avec en argument la réponse du serveur : il ne nous reste plus qu’à la traiter et charger les valeurs désirées dans le code de notre page.

Par défaut, le type de vos données envoyées au serveur est défini de cette manière : 'application/x-www-form-urlencoded; charset=UTF-8'

Toutefois, on peut définir le type que l’on veut en ajoutant dans les paramètres de la méthode un champ contentType : « text/example; charset=ISO-8859-1 ».