Afficher le contenu sans recharger la page

**quaresma** · 24/10/2010, 12h48

Bonjour à toutes et tous,

Je suis en train de faire un site internet.
Comme vous allez pouvoir le constater sur l'image ci-dessous, j'ai un champ au milieu avec les liens et un autre champ à droite avec le contenu correspondant au lien.

J'aimerai savoir s'il est possible de faire en sorte que quand je clique sur un lien, le contenu du champ de droite change mais sans recharger la page ?

Voici l'image pour plus de compréhension :

Merci beaucoup pour votre aide.

**kabkab** · 24/10/2010, 12h53

Bonjour,
Deux solutions s'offrent à toi. Des frames ou mieux du ajax.
Renseignes toi sur ces deux solutions.

**quaresma** · 24/10/2010, 13h15

Je ne veux pas utiliser les iframes.

Sinon, en css et html ce n'est pas réalisable ?

**Atomya Rise** · 24/10/2010, 14h56

Peux tu nous montrer ton code ?

Est ce qu'il y a un langage côté serveur ?

Merci de nous donner les informations nécessaire pour une aide éventuelle

**quaresma** · 24/10/2010, 15h04

Oui il y a un langage côté serveur.

Voici mon code :

HTML

Code :

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
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
	 <script type="text/javascript" src="js/copie_functions.js"></script>
<style type="text/css">
<!--
body {
        margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
<td width="183" valign="top"><?php include("menu/copie_menu.php") ?></td>
<td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
<td width="17" style="background: #000;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

CSS appelé

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#menu{
	width:150px;
//margin-top: -26px;
}
.menu, .sousmenu{
	text-align: right;
}
.menu{
	height:18px;
	width:150px;
	color:#fff;
	padding-bottom: 10px;
	top:0;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
}
.sousmenu{
	height:14px;
	width:170px;
	padding: 0px;
	color:#ffffff;
	text-align: right;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	margin-top: 0;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#666666;
	font-family:Garamond;
	font-size:18px;
	text-decoration:none;
}
.sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
	color:#ffffff;
}

javascript du menu de gauche

Code :

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
26
27
28
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 5; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}

PHP du menu

Code :

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
26
27
<div id="menu">
<?php
require("identification/connexion_sql.php");
// on attaque le php ici
// dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0
$req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");
$rep1 = mysql_query($req1);
while($row1 = mysql_fetch_array($rep1)) {
 
// on affiche le menu de niveau 1
echo "<div class=\"menu\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this)\"><a href=\"#\">".$row1['lib_menu']."</a></div><br>\n";
// ensuite on fait une seconde requete pour chercher les sous menus de ce niveau, s'il y en a on les affiche, sinon on ne fait rien
 
$req2="SELECT id_menu, lib_menu FROM menus WHERE id_parent='".$row1['id_menu']."' ORDER BY ordre_menu"  or die ("impossible d'effectuer la requête");
$rep2=mysql_query($req2);
$nb2=mysql_num_rows($rep2);
if (isset($nb2) && $nb2>0) {
 
echo "<div id=\"sousmenu".$row1['id_menu']."\" style=\"display:none\"><br>\n";
while ($row2=mysql_fetch_array($rep2)) {
echo "<div class=\"sousmenu\"><a href=\"#\">".htmlentities($row2['lib_menu'])."</a></div><br>\n";
}
echo "</div>\n";
}
}
?>
</div>

Résultat visible ici : http://www.la-grange-sardieres.fr/si...sentation2.php

Ce que je vois, c'est juste un proposition, mais faire deux div dans la zone où est écrit "contenu".

Dans la zone de gauche les liens et dans la zone de droite, le contenu qui change à chaque fois que je clic sur un lien.

Mais, je ne sais pas du tout comment faire cela...

Merci beaucoup pour votre aide.

**Atomya Rise** · 24/10/2010, 15h39

heuuu merci, mais pour ton contenu, quel est le code de ton contenu que tu veux rendre plus dynamique ?

(Ton lien ne mène a rien...)

**Atomya Rise** · 24/10/2010, 20h13

En attente de l'information sur la façon dont tu gères ton contenu voici quelques petits détails que tu devrais corriger pour rendre ton code plus lisible, correct et surtout le préparer au rafraîchissement d'une div au lieu de la page.

Tout d'abord, une chose importante, l'imbrication de div à l'intérieur des tables est... comment dirais-je... "moche"
Je te conseille plutôt d'utiliser des DIV afin de mettre en forme ta page.
Il te suffit de régler tes div en position absolute ou relative pour les positionner.

Exemple :

Code html :

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

1
2
3
4
5
6
 
<div id="Page">
<div id="menu">ton menu</div>
<div id="contenu">contenu</div>
<div class="marge"></div>
</div>

Code css :

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
26
27
28
29
30
 
#Page {
	position: absolute; /* position absolute pour définir le top et le left afin de positionner ta div */
	width: 1024px; /* Largeur de ta page */
	left: 0; /* positionnement à gauche, ici 0 car je pense que tu ne veux pas de marge sinon, si tu veux centrer mettre 50% */
	height: 422px; /* Hauteur de ta page */
	top: 50%; /* Trouver le milieu de la page */
	margin-top: -211px; /* Positionner la page au centre (hauteur/2) */
	border: 1px solid red;
}
 
#menu {
	position: relative;
	width: 183px;
	height: 100%;
	border: 1px solid black;
}
 
#contenu {
	position: absolute;
	top: 0;
	left: 200px; /* 183px + 17px = 200px donc largeur de ton menu + largeur de la marge voulu = position de la div contenu */
	width: 807px;
	height: 100%;
	border: 1px solid black;
}
 
.marge {
	width: 17px;
}

Ici j'ai utilisé les valeurs que tu avais données à ton tableau. Bien sûr, j'ai fait une modification très importante. C'est le width de ton tableau qui est trop grand. La valeur maximale doit être de 1024px afin que les utilisateurs ayant de petits écrans ne soit pas obligés de se taper la barre de défilement du bas

Pour ce qui est de ton rafraichissement, il te suffira donc ensuite d'utiliser Javascript ou mieux encore Jquery.

La marche à suivre est :
* Définir une fonction javascript appelée par un OnClick sur le lien
* Dans cette fonction :
- Faire une requête ajax qui appellera un fichier php avec la requête voulue
- récupérer le résultat de la requête ajax pour le placer dans la DIV du contenu à l'aide de son ID.

**quaresma** · 24/10/2010, 23h40

J'ai trouvé un code qui à l'air pas mal.

Voici ce que ça donne : http://www.la-grange-sardieres.fr/site Fab/contenu2.php

code js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function afficheDescURL(toThis)
  {
  if (document.getElementById)
    {
    document.getElementById("textDiv").innerHTML = toThis;
    }
  else if (document.all)
    {
    document.all["textDiv"].innerHTML = toThis;
    }
  }

code HTML

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
     <link rel="stylesheet" href="css/contenu.css" type="text/css" />
	 <script type="text/javascript" src="js/copie_functions.js"></script>
     <script type="text/javascript" src="js/functions_contenu.js"></script>
<style type="text/css">
<!--
body {
        margin-top: 0px;
}
-->
</style>
 
</head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
  <td width="183" valign="top"><?php include("menu/copie_menu.php") ?></td>
  <td width="800" valign="top" style="width: 665px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="47%" valign="top" bgcolor="#FFFFFF" class="titre_lien">
	<?php 
        $titre = $_GET['lib']; 
        print''.$titre.''; ?><br>
      <br><a href="#" onclick="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')">nom_lien</a><br>
      <a href="#" onclick="afficheDescURL(' Contient un autre CV ')">nom_lien2</a></td>
    <td width="2%">&nbsp;</td>
    <td width="51%" bgcolor="#FFFFFF"><div id="textDiv"></div></td>
  </tr>
</table></td>
<td width="17" style="background: #000;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

Par contre, je voulais savoir si avec le code que j'ai, il est possible d'appeler dynamiquement en PHP/SQL des données dans la zone de droite ?

Si oui, de quelle manière ?

Merci beaucoup et bonne soirée

**Atomya Rise** · 25/10/2010, 00h06

Envoyé par quaresma

Par contre, je voulais savoir si avec le code que j'ai, il est possible d'appeler dynamiquement en PHP/SQL des données dans la zone de droite ?

Si oui, de quelle manière ?

Pour ce faire, tu auras besoin d'utiliser ajax !

Voici un bon tutoriel : http://siddh.developpez.com/articles/ajax/

Par contre, je t'avouerais que je ne saurais pas le faire comme ceci, donc je ne peux t'aider d'avantage.
jQuery est nettement plus simple

Une dernière chose, essaye d'utiliser des div, tu verras, tu te simplifiera la vie !

Et quoi qu'il en soit évite les div imbriqué dans tes tables....

Bonne chance à toi !

**quaresma** · 25/10/2010, 00h12

Je ne connais pas du tout jQuery et je préfère ne pas me lancer dans des langages que je ne connais pas. (faute de temps)

Peut-être que quelqu'un d'autre pourra me venir en aide.

Merci quand même et bonne soirée

**Atomya Rise** · 25/10/2010, 01h01

J'ai juste dis qu'avec Jquery ce serais plus simple...

Mais je t'ai donné le lien du tutoriel pour te servir d'ajax, car tu seras obligé de t'en servir pour faire ce que tu souhaites.

Tu as tous les outils en mains pour bien y arriver.
Essaye, et si tu bloque quelque part dans ton ajax, demande

Bien cordialement,

Atomya Rise

**quaresma** · 25/10/2010, 01h08

En fait, si j'ai bien compris tout ca c'est obligatoire pour pouvoir utiliser AJAX ?

Code :

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
function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}

**Atomya Rise** · 25/10/2010, 01h09

Ben ceci EST de l'ajax

**kabkab** · 25/10/2010, 10h47

Bonjour,
Quand on parle de AJAX, ça fait déjà fuir.
Tu as néanmoins des bibliothèques qui si tu te donnais la peine de découvrir te faciliterait "lâchement" la vie.
Regardes ici : http://www.developpez.net/forums/f11...es-frameworks/

**Atomya Rise** · 25/10/2010, 11h12

Envoyé par kabkab

Bonjour,
Quand on parle de AJAX, ça fait déjà fuir.
Tu as néanmoins des bibliothèques qui si tu te donnais la peine de découvrir te faciliterait "lâchement" la vie.
Regardes ici : http://www.developpez.net/forums/f11...es-frameworks/

Entièrement d'accord avec toi ! Comme la bibliothèque jQuery !

Jquery 1.4.3.min.js : http://code.jquery.com/jquery-1.4.3.min.js

Ensuite, avec ceci, tout deviens si facile ...

Exemple d'une requête ajax avec jQuery, là, tu verras la belle différence ^^ :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
function TestjQuery() { 
	$.ajax({
		type: "POST",
		url: "test.php",
		data: { message: 'youpi' },
		success: function(data) {
                      alert("Test réussi");
               }
	});
}

**quaresma** · 25/10/2010, 12h27

Oui, mais j'ai regardé sur google et il parait qu'il y a beaucoup de soucis de compatibilité avec les navigateurs avec AJAX et JQUERY

**Atomya Rise** · 25/10/2010, 14h26

Je ne sais où tu as lu ceci, mais jQuery permet d'écrire un code unique qui fonctionne sur tous les navigateurs supportés par jQuery.

Je sais par expérience que cela fonctionne, et d'ailleurs si tu vas faire un tour sur le chat de DVP tu verras que celui-ci est fait à partir de jQuery tu n'as plus qu'à le tester

**quaresma** · 25/10/2010, 22h59

J'ai fait un test avec de l'ajax et jquery, voici le code que j'ai mis :

Code :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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" lang="fr">
	<head>
		<title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;1 : Le code xhtml</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
	 	<link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
     	<link rel="stylesheet" href="css/contenu.css" type="text/css" />
	 	<script type="text/javascript" src="js/copie_functions.js"></script>
     	<script type="text/javascript" src="js/functions_contenu.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
	</head>
 
	<body>
	<div id="conteneur">
    <div id="entete"></div>
    <div id="conteneur2">
    <div id="cellulegauche"><?php include("menu/copie_menu.php") ?></div>
 
		<div id="contenucel1">
		<div class="titre_lien"><?php 
        $titre = $_GET['lib']; 
        print''.$titre.''; ?></div>
	<?php 
        include ("requetes/requete_lien.php"); 
        ?>
		</div>
        <div id="contenucel2"></div>
        <div id="contenucel3" class="placeholder"></div>
		    <script> 
    $('a').click(function() { 
      loadContent( $(this).attr('href') ); 
      return false; 
    }); 
     
    function loadContent(page){ 
        $.ajax({ 
          url: page, 
          success: function(data) { 
            $('.placeholder').html(data); 
          } 
        }); 
    } 
    </script> 
        </div>
		</div>
	</body>
</html>

Problème, lorsque je clique sur le menu de gauche, il m'ouvre une nouvelle fenêtre dans la même page.

Je ne comprends pas pourquoi.

Voici le résultat : http://www.la-grange-sardieres.fr/si...tation2css.php

Merci par avance pour votre aide.

**Air P-E** · 28/10/2010, 00h53

Problème, lorsque je clique sur le menu de gauche, il m'ouvre une nouvelle fenêtre dans la même page.

Pas trop compris... Je viens de tester ton lien (ça à l'air pas mal le rendu !

) et je n'ai aucune fenêtre qui s'affiche...

Pour l'utilisation d'Ajax, je suis d'accord avec ce qui a était dit, je ne vois pas pourquoi il y aurait des problèmes de compatibilité... En utilisant plusieurs outils à la fois comme jquery, oui peut-être mais sinon...
Cependant même si c'est effectivement plus simple en jquery, je te suggère de le faire en Ajax pure pour voir comment ça fonctionne.
A mon sens, JQuery, c'est pour les utilisateurs expérimentés qui veulent gagner du temps, pour débuter je pense qu'il vaut mieux utiliser Ajax. Après chacun sa vision des choses !

**quaresma** · 28/10/2010, 01h01

Bonsoir,

normal entre-temps j'ai trouvé le problème.

En fait, j'avais affecté la fonction AJAX à tous les liens

Afficher le contenu sans recharger la page

HTML

Discussions similaires

Partager

Partager