Comment modifier une partie de ma page sans recharger toute la page ?

Invité · 13/08/2011, 21h26

Bonjour à tous,

Je suis en train de réaliser un petit site perso, découpé en 3 parties : bandeau, menu à gauche, et centre.

J'utilise des balises <div> pour structurer mon site.
J'aimerai qu'en cliquant sur le menu "répertoire", la <div> "menu" envoie l'id "répertoire" à la balise "centre" et que cette dernière affiche le contenu de ma BDD, en fonction de cet id.
Je ne veux pas actualiser toute la page, uniquement ma <div> "centre".

J'arrive, lorsque je clique sur "répertoire" afficher le contenu souhaité, seulement, ça s'affiche sur toute la page, et pas dans ma div "centre"

Voici mon bouton menu "répertoire"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td id="bouton_menu" onmouseover="this.style.background='#BAFF54'" onmouseout="this.style.background=null">
<a href="repertoire.php?id=repertoire" id="texte_menu" name="Répertoire">Ce qu'on joue</a>
</td>

Voici ma page structurante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="bandeau" class="bandeau"></div>
<div id="menu" class="menu"><?php require ("menu.php");?></div>
<div id="contenu" class="contenu"><?php require ("accueil.php");?></div>

Voici accueil.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
if (ISSET($_GET["id"])) {
  $id = @$_GET["id"];
  $rqt="select contenu, titre from articles where categorie=$id";
  $res = @mysql_query($rqt);
  if ($obj=mysql_fetch_object($res)) {
    $titre = $obj->titre;
    $texte = $obj->contenu;
  }	
} else {
  echo "page introuvable";
}
?>
 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <link rel="StyleSheet" type="text/css" href="general.css">
 </head>
 <body>
  <div id="main">
   <?php echo "<h1>".$titre."</h1><br><br>".$texte; ?><br><br>
  </div>
 </body>
</html>

J'espère avoir été claire, n'hésitez pas à me poser des questions si ce n'est pas le cas.
Et merci d'avance pour votre aide.

Cyann

**Vil'Coyote** · 15/08/2011, 00h43

ba si tu souhaites actualiser juste un div en fonction d'une action effectué sur une autre il va te falloir utiliser de l'ajax.

Invité · 18/08/2011, 13h53

Je n'ai pas de compétence en Ajax.
Pourriez-vous m'aider svp ?

Merci par avance.

Cyann

**Vil'Coyote** · 18/08/2011, 19h09

voilà de l'aide :
http://javascript.developpez.com/faq/
http://ajax.developpez.com/cours/

Invité · 18/08/2011, 19h13

Bonjour,

Envoyé par Cyann31

Je suis en train de réaliser un petit site perso, découpé en 3 parties : bandeau, menu à gauche, et centre.

Ok, c'est classique

Je ne veux pas actualiser toute la page, uniquement ma <div> "centre".

Pourquoi ?? Quel intérêt, alors que le "reste" ne comporte qu'un menu et un bandeau ?

Pourquoi ne pas faire comme tout le monde : on change de page.
Ca actualise aussi le bandeau et le menu. Et alors ? où est le problème ?

Si "vraiment" tu veux uniquement changer le contenu du div "centre" :
-

SOIT revenir quelques années en arrière et utiliser des <frame> ...
-

SOIT avec des div display:none/display:block (tous les "contenus possibles" sont déjà sur la page, on affiche/masque le bon avec javascript)
-

SOIT avec AJAX (ajax "ajoute" dynamiquement le contenu dans la div "centre")

Invité · 19/08/2011, 18h55

Alors oui, les frames, je connais, mais non merci.

Après, pour actualiser toute la page, je vois pas comment faire ?
Tu peux me donner une idée de la structure ?

(je vais essayer de creuser ajax quand même, ça pourra pas me faire de mal

)

Invité · 19/08/2011, 19h27

"actualiser toute la page", c'est le fonctionnement "classique" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
   <li><a href="mapage1.php">accès à ma page 1</a></li>
   <li><a href="mapage2.php">accès à ma page 2</a></li>
   <li><a href="mapage3.php">accès à ma page 3</a></li>
</ul>