[Prototype] Remplacement Corps de Texte instantanéement [Résolu]

[slam]

Bonjours,

Je suis entrain de réalisé un siteweb. j'ai un menu :

( exemple fictif. )
- Page 1
- Page 2
- Page 3
- ...

et un corps la où serai affiché le contenu :

<div id="contenu"></div>

J'aimerai, que en cliquant sur la page 1, sans rechargé la page, le contenu s'affiche et, en ouvrant la page 2, le contenu de la page 1 se remplace par la 2 sans rechargé.

Je suis actuellement étudiant dans la filière mediamaticien ( webmaster, webdesign... ) et cependant nous avons seulement suivi un module Javascript et nous l'avons pas apronfondit pour utilisé la methode Ajax vu que cette technologie était trop récente :/

Donc pourriez m'expliqué la démarche pour réalisé ce que j'ai décrit où m'orienté vers un site qui m'expliquerai cela ^^

Merci !

[Antoine Galmiche]

Tu peux utiliser les propriétés innerHTML, outerHTML, innerText et outerText pour faire du remplacement dynamique de code HTML.
ex :
<div id "MonId"></div>
et dans le code js :
document.getElementById("MonId").innerHTML="<b>Coucou</b>";

-> la page se comporte comme si la balise div était devenue :
<div id "MonId"><b>Coucou</b></div>

Super puissant !
C'est une des commande clef d'Ajax.

[ozdoz]

Les pages à affichés comportent du contenu dynamique (donc besoin de connexion au serveur) ou bien de l'HTML statique ?

Dans le premier cas, tu auras besoin d'Ajax, dans le second, un simple JavaScript qui met à jour ta page suffit.

Plus de précision pourrait aider à mieux t'aider

[slam]

Envoyé par ozdoz

Les pages à affichés comportent du contenu dynamique (donc besoin de connexion au serveur) ou bien de l'HTML statique ?

Dans le premier cas, tu auras besoin d'Ajax, dans le second, un simple JavaScript qui met à jour ta page suffit.

Plus de précision pourrait aider à mieux t'aider

C'est du contenu dymanique ^^ (excusez moi de mon manque de précisions)

merci Antoine pour l'astuce sa pourra me servir surement ^^

[ozdoz]

Dans ce cas, il faut que tu crées un nouvel objet XmLHttpRequest (dans pratiquement tous les tuto du site, tu trouve le code correspondant à utiliser).

Cette objet te permet de faire une requète au serveur. Parmis les paramètres à définir dans cet objet, les principaux sont:
- Le fichier (.php ou .java ou autre) auquel s'applique la requète. Il faut simplement indiquer le chemin du fichier.
- Les paramètres à envoyer: vu que la requète est envoyée à l'aide d'un GET ou POST, elles doivent être encapsulées dans un string: par exemple: param='numeroDeMaPage=2&affichage=defaut".
- La fonction "callback" qui sera appellée dès que la réponse du serveur sera parvenue.

Du côté serveur, tu dois simplement récupérer les paramètres (exemple : $_POST['numeroDePage'] ). Ensuite faire les opérations que tu désires avec ce ou ces paramètres et générer une réponse.

L'intérêt de l'Ajax c'est que tu peux générer des réponses de plusieurs type. Il faut définir dans ton .php un header spécifique. Tu peux ainsi générer une simple string, du xml ou du html qui est directement interpreté par le client (si correctement formaté).

Dans ton cas, tu vas générer du HTML. Tu peux le faire simplement avec des "echo" dans ton fichier serveur, par exemple:

Code :

 echo "<div id = \"mapremièrepage\"><b>Coucou</b></div>" ;

Dans la fonction callback, utilise simplement la méthode .responseText et ensuite tu remplis ton div avec la méthode "innerHTML". Exemple:

Code :

1
2
3
4
function monCallback (req) {
var monCodeHTML = req.responseText;
document.getElementById("contenu").innerHTML=monCodeHTML;
}

Dernier conseil: utilise Prototype, ça simplifie la vie. C'est une librairie qui facilite passablement l'utilisation d'Ajax. Tu peux trouver un descriptif de la librairie ici:
http://www.sergiopereira.com/articles/prototype.js.html

Bon courage. Il y a un mois et demi, j'étais dans le même cas que toi et maintenant je commence peu à peu à prendre mes marques (mais mon code est toujours aussi moche )

[denisC]

http://javascript.developpez.com/faq...totype.updater

[slam]

Merci pour les réponses, je vous remercie tous ^^