[AJAX] ouvrir un lien dans un div

Version imprimable

11/04/2010, 22h00
kelyly

[AJAX] ouvrir un lien dans un div

Est-il possible d'ouvrir un lien dans un div ?
Je m'explique ... J'ai une barre avec un menu déroulant (div id="navbar") et j'ai un div en dessous où y'a la page d'accueil mais j'aimerai que quand on clique sur les liens du menu déroulant les autres div restent tels quels et que le lien s'ouvre simplement dans le div d'en-dessous. Comme l'attribut target avec l'HTML. C'est possible ?

(j'avais posté ce message dans "CSS" et on m'a répondu que c'était possible avec AJAX mais je comprend rien :( )
12/04/2010, 10h18
snowpy

hum vi c'est possible si j'ai compris tu veux charger une page dans un div http://www.developpez.net/forums/d90...x/refresh-div/

je t'invite à lire le code que j'ai posté la. A l'origine moi je veux refresh que mon div et la j'ai refresh la page (ma page entière se recharge dans le div), te suffit de modifier l'url et d'enlever le refresh (fonction rafraichir).
12/04/2010, 13h23
Bovino

Attention, tu ne peux pas insérer une page HTML complète dans une div !
Tu peux avec AJAX, actualiser le contenu d'une div avec du code HTML généré par le serveur, mais pas une page complète (par exemple, les balises html, head, title, body etc. doivent être uniques dans la page).
Pour ce que tu veux faire, contente-toi d'une iframe par exemple...
12/04/2010, 14h46
snowpy

je pensais que c'était plutot un contenu "qu'il" qu'elle voulait et pas une page avec les balises

edit : erreur rectifiée milles excuses mademoiselle ^^

"elle" pas "il" :) lol

en fait ce que je cherche c'est par exemple comme sur ce site : http://www.eva-online.net
quand on clique sur les liens ils s'ouvrent seulement dans un des div et la page autour ne change pas.

- - -

Moi mon code pour l'instant c'est ça (bon ça sert peut être à rien que je le mette mais c'est pour que vous y voyez plus clair)

J'aimerai que quand on clique par exemple sur "maquillage" la page s'ouvre dans "div = acceuil"

Code:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<head>
<title>Flocon d'été</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="stylescontenu.css" type="text/css">
</head>
 
 
<body>
<div id="contenu">
<div id="banniere"><img src="banniere.JPG" width="800" height="240" /></div> 
<div id="topbar"> Flocon d'été</div>
	<div id="navbar">
 
 
			<style type="text/CSS"> 
#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#FFA500;
}
#menu li a {
display:block;
width:100px;
color:black;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFFF66;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
 
   </style> 
 
 
	<body> 
 
<div id="menu"> 
<link rel="stylesheet" href="bordure.css" type="text/css">
<ul> 
  <li><a href="#"><img src="accueil.gif" alt="Accueil" border="0"></a></li> 
  <li><a href="#">Beauté</a> 
    <ul> 
      <li><a href="page1.html">Maquillage</a></li> 
      <li><a href="#">Cheveux</a></li> 
      <li><a href="#">Corps</a></li> 
	 </ul> 
  </li> 
 <li><a href="#">Art</a> 
    <ul> 
      <li><a href="#">dessin</a></li> 
      <li><a href="#">photos</a></li> 
      <li><a href="#">peinture</a></li> 
	 </ul> 
  </li> 
</ul> 
</div> 
 
<div id="main"> 
<div id="accueil"> Articles </div>
<div id="bas"> Bas </div>
<div class="spacer">
</div>
</div>
</div>
 
	</body>
</body>
</html>

12/04/2010, 21h10
Bovino
Oula...
Il va falloir revoir quelques fondamentaux !
- La balise body doit être unique dans la page, il y en a 2 dans ton code !
- Les styles CSS doivent être intégrés dans le head, ils n'ont rien à faire dans le body.
Ensuite, concernant ta demande, il me semble que le plus judicieux serait de changer

Code:

<div id="accueil"> Articles </div>

par

Code:

<iframe id="accueil" src="ta_page_par_defaut.html"></iframe>

Attention, ce que tu mets entre les balises correspond à ce qui sera affiché si le navigateur n'accepte pas les frames.
Puis dans tes liens, tu peux faire un truc du genre

Code:

<a href="page1.html" onclick="document.getElementById('accueil').src=this.href;return false;">Maquillage</a>
12/04/2010, 21h30
kelyly

Ah oui ... lol je me sens bête :)
Bon en tout cas j'ai mieux compris grâce à toi (j'ai eu seulement un cours de CSS pour l'instant avant on faisait du HTML et j'ai rien compris au cours du prof ...)
Merci beaucoup !!