Chargement d'un bloc div en ajax


Télécharger le fichier  * Téléchargé ( 900  fois)








Chargement d'un bloc div en Ajax

Présentation d'un chargement d'une page web dans un bloc div à l'aide d'Ajax.
Sur la gauche vous avez deux liens, ces derniers chargent une page dans un des deux blocs div.
Les deux blocs div ont chacun un id, et se nomment respectivement boite7 et boite8
<div id="boite7"></div>,<div id="boite8"></div> (vous pouvez leurs donner le nom que vous voulez), chacun de ses blocs sont gérées en CSS.

Dans la partie <head> et </head> de votre faite appel au fichier Js que vous devez télécharger plus haut.
<script language="javascript" type="text/javascript" src="jabbax.js" ></script>

Pour les liens ils doivent être de ce type.
<a href="#" onclick="javascript:getPage('chargement_div/page2.html','boite8');">Boite de gauche</a>
Le lien est composé de JavaScript suivi de la fonction relative au fichier Js contenant le code Ajax, avec en paramètre, le nom de la page, et le nom du bloc div dans le quel apparaîtra votre page.

Faite attention à l'encodage de vos pages, tous les caractéres spéciaux doivent être en entité HTML pour une page avec extension HTML.
Si vous charger des pages PHP ayant du texte et qu'il serait trop long à transformer les caractéres spéciaux en entité HTML, vous pouvez ajouter tout en haut de votre page ce code :
<?php header('Content-Type: text/html; charset=ISO-8859-1');?> ou <?php header('Content-Type: text/html; charset=utf-8');?>

Cette technique permet de charger une page dans une autre sans recharger la page entiére.

J'utilise aussi cette technique pour appeler un page contenant un formulaire de mise à jour avec une requêtes PDO et qui renvoi sur la page mère.