Comment modifier une partie de ma page sans recharger toute la page ? [Résolu]

Cyann31 · 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.

Cyann31 · 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/

jreaux62 · 18/08/2011, 19h13

Bonjour,

Citation:

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

Citation:

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")

Cyann31 · 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

)

jreaux62 · 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>

Cyann31 · 20/08/2011, 13h28

Ca veut dire que dans chaque page, dans chaque fichier html (ou php), j'ai toute ma page à chaque fois, toutes mes balises div ?

jreaux62 · 20/08/2011, 14h06

Bonjour,
je t'invite à lire ceci.

Cyann31 · 22/08/2011, 21h58

Merci beaucoup, j'ai opté pour le rafraichissement de la page
On verra plus tard pour Ajax, ça à l'air un poil plus corsé !

20/08/2011, 14h06	#9
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, je t'invite à lire ceci. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

15/08/2011, 00h43	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 305 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 305 Points : 4 485 Points : 4 485	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.
	00

18/08/2011, 13h53	#3
Cyann31 Invité de passage Inscription : juin 2008 Messages : 18 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : juin 2008 Messages : 18 Points : 4 Points : 4	Je n'ai pas de compétence en Ajax. Pourriez-vous m'aider svp ? Merci par avance. Cyann
	00

18/08/2011, 19h09	#4
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 305 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 305 Points : 4 485 Points : 4 485	voilà de l'aide : http://javascript.developpez.com/faq/ http://ajax.developpez.com/cours/
	00

19/08/2011, 18h55	#6
Cyann31 Invité de passage Inscription : juin 2008 Messages : 18 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : juin 2008 Messages : 18 Points : 4 Points : 4	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 )
	00

20/08/2011, 13h28	#8
Cyann31 Invité de passage Inscription : juin 2008 Messages : 18 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : juin 2008 Messages : 18 Points : 4 Points : 4	Ca veut dire que dans chaque page, dans chaque fichier html (ou php), j'ai toute ma page à chaque fois, toutes mes balises div ?
	00

22/08/2011, 21h58	#10
Cyann31 Invité de passage Inscription : juin 2008 Messages : 18 Détails du profil Informations personnelles : Âge : 25 Informations forums : Inscription : juin 2008 Messages : 18 Points : 4 Points : 4	Merci beaucoup, j'ai opté pour le rafraichissement de la page On verra plus tard pour Ajax, ça à l'air un poil plus corsé !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email