Ubuntu-fr

Nimois

Recharger une partie (uniquement) d'une page web

Bonjour,

j'ai une page web composée de plusieurs divisions <div>

je souhaite a partir d'un lien d'une des divison , mettre a jours une autre division sans recharger toute la page , je sais qu'il existe une solution en ajax , mais je sais pas laquelle , merci d'avance de bien vouloir m'aider.

Cordialement

---

http://www.afrikhiphop.com

Keldath

Re : Recharger une partie (uniquement) d'une page web

Code JavaScript :

//Fonction qui récupère l'élément possédant l'ID passe en paramètre
function $(id) {return document.getElementById(id);}

//Écran de chargement
var load_screen = '<div style="">Chargement...<br /><img src="../images/loader.gif" alt="loader" /></div>';

//Fonction pour créer un objet XMLHttpRequest
function createObjectAJAX() {
	var xhr_object = null;
	if(window.XMLHttpRequest) //Pour Firefox
		{xhr_object = new XMLHttpRequest();}
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) 
		{
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	// XMLHttpRequest non supporte par le navigateur
	else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;}
	return xhr_object;
}

//Fonction pour changer le contenu d'un conteneur précis
// prmScript = nom du script PHP sur le serveur qui renverra le contenu à afficher
// prmTarget = l'ID de ton Div conteneur
function loadDiv(prmScript,prmTarget) {

	//Creation de l'objet XMLHttpRequest
	xhr_object = createObjectAJAX();
	
	//On envoie la requete
	xhr_object.onreadystatechange=function() {
		var response=null;
		var ready=xhr_object.readyState;
		
		if(ready == 4 ) response=xhr_object.responseText;
		else response=load_screen; // Ecran de chargement dans le conteneur
		
		$(prmTarget).innerHTML=response;
	};
	xhr_object.open("POST", "scripts/"+prmScript+".php", true);
	xhr_object.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
	
	xhr_object.send(send);
	
	//Une fois la reponse recue, on l'injecte dans l'element souhaite
	if(xhr_object.readyState == 4 && xhr_object.status == 200)
	$(prmTarget).innerHTML=xhr_object.responseText;
}

En vrac... même s'il y a des manières plus pros sûrement (avec l'utilisation de Framework AJAX et d'XML). J'essaie d'apprendre tout ça aussi
Pense à changer quelques trucs, comme le chemin d'accès de tes scripts PHP dans loadDiv(), l'image de chargement etc...
Après il ne te reste plus qu'à faire appelle à ta fonction loadDiv lorsque tu cliques sur un lien ou un élément à l'aide du onclick="loadDiv("nom_script","id_div_cible");"

Dernière modification par Keldath (Le 08/05/2008, à 10:19)

Nimois

Re : Recharger une partie (uniquement) d'une page web

merci beaucoup, j'essaye ca de suite :cool:

---

http://www.afrikhiphop.com

Keldath

Re : Recharger une partie (uniquement) d'une page web

Tout fonctionne comme tu le souhaites ?

Nimois

Re : Recharger une partie (uniquement) d'une page web

a vrai dire je sais pas trop comment utiliser le script dans ma page.
voici a quoi ressemble a peu pres a ma page

echo '<div id="result">//ici il ya l'aafichage de plusieurs ligne avec une boucle
.........
<td>...........<a href=application.php?val=';echo $zik->getId();echo ">Lire</a> / <a href=";echo $zik->getAdresse();<br>
</div>

echo '<div id="player">
//dans cette div , j'ai une fonction player qui prend en paramettre getId() de la premiere division';
player($id);echo'
</div>';


j'ai essayé de bidouillé ton script mais j'arrive pas a l'adpater a ma page

---

http://www.afrikhiphop.com

Nimois

Re : Recharger une partie (uniquement) d'une page web

Keldath , nan ca marche pas trop

---

http://www.afrikhiphop.com

Nimois

Re : Recharger une partie (uniquement) d'une page web

Keldath help please

---

http://www.afrikhiphop.com

Keldath

Re : Recharger une partie (uniquement) d'une page web

Yep, désolé du retard

En fait, tu cherches à tout faire en même temps avec le même script, alors tu n'y arriveras pas. Si je saisis bien, ton DIV result contient une liste de musiques et tu aimerai écouter chacune d'entre elles dans le DIV player quand tu cliques sur une ?

Il faut bien discerner les étapes qu'il se passe :

-Le navigateur demande un document HTML

-Le serveur Web crée le document HTML demandé dynamiquement avec PHP : ta page qui aura ton DIV result remplis avec les "liens" de tes musiques, et ton DIV player lui sera vide (il doit se remplir seulement quand on clique sur une musique, c'est ça ?)

-Le serveur Web envoie le document HTML au navigateur

-Le navigateur a désormais une page comme celle-ci qui s'affichera :

<html>
	blablabla
	<div id="result">
		les "liens" de tes musiques, ou plutôt des boutons avec une fonction
		JavaScript ( la fameuse loadDiv(); ) qui ne rechargera que le contenu du DIV player.
		Je détaillerai plus tard.
	</div>
	<div id="player"></div>
	blablabla
</html>

À partir de là, tu ne dois plus attaquer directement le serveur Web (par des liens classiques <a>, ou par l'envoie d'un formulaire, etc) sinon l'intégrité de ta page sera rechargée, et tu perdras l'intérêt de la technique AJAX.

Ce que doit afficher ton DIV player, c'est un autre script qui en aura le rôle (appelons le load_player.php). Ce script sera attaqué par la fonction JavaScript loadDiv(); (qu'il faudra modifier un petit peu pour qu'elle réponde à tes besoins : générer le contenu du DIV player en fonction de l'ID de la musique sélectionnée).

Je continuerai plus tard, je n'ai pas trop le temps ce matin

Dernière modification par Keldath (Le 16/05/2008, à 09:46)