Rafraichir un div

Sujet résolu

14 février 2011 à 17:14:50

Bonjour,

mon problème est que j'aimerais rafraichir un div contenant du PHP et j'ai vu que cela se faisait surtout en javascript. Est-ce que quelqu'un pourrait m'aider.

Merci à vous !

Aerhus

14 février 2011 à 17:34:19

Si tu veux "rafraîchir" du code PHP, il va falloir passer par une page externe grâce à l'ajax notamment (le code PHP ne s'exécute que sur le serveur). Donc pour rafraîchir ton code PHP du div, il va falloir récupérer le contenu d'une autre page contenant le code php en question (avec l'ajax) puis ajouter ce contenu à ton div. Exemple :

<input type="button" onclick="refreshDiv(addContentDiv);" value="Rafraîchir mon div" /><br />

<div id="monDiv"></div>

<script type="text/javascript">

// C'est ici qu'on lance la requête pour récupérer le résultat du code PHP du div (contenu dans une autre page)
function refreshDiv(callback) {
	var xhr = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};
	
	xhr.open("GET", 'monCodePHPContenuDansLeDiv.php', true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send('');
}

// Ici on récupère le résultat du code php et on l'ajoute au div
function addContentDiv(content) { // content = xhr.responseText = contenu du code php que tu veux rafraîchir (ton autre page)
	document.getElementById("monDiv").innerHTML = content;
}
</script>

Je n'ai pas testé ce code donc il possède peut-être des erreurs, mais l'idée est là. Si tu n'es pas à l'aise avec l'ajax, il existe des cours dessus sur le site du zéro.

x1301

14 février 2011 à 17:44:30

J'ai regardé attentivement le code et je l'ai essayé en l'adaptant à mon site mais je ne vois pas vraiment comment l'adapter correctement

Aerhus

14 février 2011 à 18:28:22

Ohh pardon, j'ai oublié de te donner une chose vitale, crée un fichier "oXHR.js", ajoute le à ta page avec un <script type="text/javascript" src="oXHR.js"></script>, et mets ce code dans ce fichier oXHR :

/* ** cartouche ********************************************************************* */
/* Script complet de gestion d'une requête de type XMLHttpRequest                     */
/* Par Sébastien de la Marck (aka Thunderseb)                                         */
/* ********************************************************************************** */

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

C'est issu du cours de Thunderseb et Nesquik69, ça permet d'adapter la requête aux différents navigateurs en gros. (je te conseille de lire le cours sur lien que je t'ai donné pour bien comprendre, c'est bien expliqué et intéressant

)

Je fais ça tellement machinalement que j'en avais oublié l'utilité pour utiliser l'ajax, désolé...

x1301

14 février 2011 à 18:59:30

Je n'y arrive pas

Aerhus

14 février 2011 à 19:37:15

Bon je viens de faire un essai, et ça fonctionne. Je te donne les fichiers suivants, voici la structure :

|--- page_principale.php ----- c'est là que ton div se trouve et doit être "mis à jour"
|--- codephp.php -------------- c'est le code présent dans ton div normalement, mais on le sépare ici c'est plus simple pour utiliser l'ajax
|--- oXHR.js --------------------- Aide simplement dans l'utilisation de l'ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Exemple chargement dynamique php</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="oXHR.js"></script>
	</head>
	<body>
		<input type="button" onclick="refreshDiv(addContentDiv);" value="Rafraîchir mon div" /><br />

		<div id="monDiv">
			<!-- C'est ICI  que tu as ton code PHP normalement, mais pour notre cas on va mettre ce code dans le fichier codephp.php pour pouvoir le charger et le mettre dans ce div -->
		</div>

		
		<script type="text/javascript">
			// C'est ici qu'on lance la requête pour récupérer le résultat du code PHP du div (contenu dans une autre page)
			function refreshDiv(callback) {
				var xhr = getXMLHttpRequest();
				
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
						callback(xhr.responseText);
					}
				};
				
				xhr.open("GET", 'codephp.php', true);
				xhr.send(null);
			}

			// Ici on récupère le résultat du code php et on l'ajoute au div
			function addContentDiv(content) { // content = xhr.responseText = contenu du code php que tu veux rafraîchir (ton autre page)
				document.getElementById("monDiv").innerHTML = content;
			}
		</script>
	</body>
</html>

<?php
echo 'Rafraichi le ' . date('d/m/y Ã  H\h i\m\i\n s\s');
?>

/* ** cartouche ********************************************************************* */
/* Script complet de gestion d'une requête de type XMLHttpRequest                     */
/* Par Sébastien de la Marck (aka Thunderseb)                                         */
/* ********************************************************************************** */

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

Pour le code php dans codephp.php, j'ai juste affiché la date et l'heure actuelle pour mettre en évidence la mise à jour du div. Mais évidemment, il faut que tu remplaces ce code par le tien.
Tu devrais pouvoir t'en sortir avec ça. :-°

x1301

14 février 2011 à 19:54:21

OK c'est super merci beaucoup Aerhus !!!!