Aujourd’hui on va faire un peu d’Ajax. J’utilisais jusqu’à maintenant du simple code Ajax fait à la main pour recharger une zone d’une page après un évènement, le problème c’était que je ne pouvais pas appliquer des effets de transition par exemple lors dudit rechargement (je m’en fichais un peu à vrai dire). Mais pour un client récent j’ai du modifier un peu mon code (et j’ai bien galérer) pour lui appliquer n’importe quel type d’effet lors de l’affichage des données.

Alors j’ai essayer plusieurs solutions mais en vain, bref ayant déjà utilisé Jquery auparavant je me suis dit tiens pourquoi ne pas changer toute ma méthode Ajax pour utiliser directement et uniquement Jquery.

Après plusieurs essais voila ce que je vous propose

Etape 1

On crée le fichier index.html

dans le “head” on insère la bonne version de Jquery (j’ai pris l’habitude d’aller taper la dernière version hébergé chez google)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

Donc ce qu’on va faire c’est aller chercher une image ou un tableau de donnée lorsqu’on clic sur le lien chercher

Etape 2

Dans le “body” on rajoute  :

<div>;
<a href="#" id="chercher">Chercher</a>
</div>
<div id="zone_de_rechargement">	</div>

la zone a recharger sera la div qui s’intitule “zone_de_rechargement”

Etape 3

et maintenant dans le “head” on rajoute le script Jquery qui nous permettra de faire la recharge des informations :

<script type="text/javascript">
$(document).ready(function() {
//au click sur le lien chercher
$(".chercher").click(function(){
//on recupere la valeur de l'attribut name pour afficher tel ou tel resultat
var req=$(this).attr("name");
//requête ajax, appel du fichier recherche.php
$.ajax({
type: "GET",
url: "recherche.php?type_demande="+req,
dataType : "html",
//affichage de l'erreur en cas de problème
error:function(msg, string){
alert( "Error !: " + string );
},
success:function(data){
//alert(data);
//on met à jour le div zone_de_rechargement avec les données reçus
//on vide la div et on le cache
$("#zone_de_rechargement").empty().hide();
//on affecte les resultats au div
$("#zone_de_rechargement").append(data);
//on affiche les resultats avec la transition
$('#zone_de_rechargement').fadeIn(2000);
}
});
});
})
</script>

Donc pour résumé le code ci dessus, quand on clic sur les liens “afficher XX”, on récupère la valeur de l’attribut name on l’envoi avec la méthode Ajax vers le fichier recherche.php en method GET, c’est important car si vous utilisez le method POST, l’appel est fait 2 fois coté navigateur donc les infos seront plus longues à s’afficher, puis les données sont récupérées et affichées dans le div spécifié.

Voici le contenu du fichier recherche.php :

 

if($_GET['type_demande'] == "tableau") {
//on affiche le tableau de donnée
$tableau_donnee = array("Obi One Kenobi", "Qui Gon Jinn", "Mace Windu", "Yoda", "Dark Vador");
$nb_res = count($tableau_donnee);
for($i=0;$i&lt;$nb_res;$i++) {
echo $tableau_donnee[$i]."&lt;br&gt;";
}
} else {
//on affiche un image
echo "<img src='obi_one_kenobi.png' border='0' />";
}

J’ai utiliser la fonction “.fadeIn”, mais vous pouvez utiliser n’importe quelle autre fonction disponible (fadeOut, show …)

Une petite demo est disponible ici