Raffraichissement ajax et div
Bonjour,
Mon probleme concerne ajax et jquery donc j'espère être dans le bon forum
Voici mon problème:
J'ai deux Div :
- celle de gauche contenant un lien
- celle de droite affichant le contenu du lien
(En fait, Je souhaite en cliquant sur un lien dans la div de gauche(menu) afficher une carte contenant d'autres liens dans la div de droite(contenu). Une fois la carte affiché , si je clique sur un de ces liens, j'aimerai que la div de droite(contenu) se rafraichisse à nouveau et affiche le nouveau contenu )pfiou, pas très clair
La première étape se passe sans problème, j'affiche correctement la carte dans la div de droite: le problème se produit lorsque je clic sur un lien de la carte: cela m'envoie directement sur une nouvelle page au lieu de rafraichir ma div
html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div id="blocPrincipal">
<div id="blocGauche" style="position:relative; float:left; width:100px; height:50px; border:1px solid;">
<div class="sousMenu">
<a href="Lien.html" >lien</a>
</div>
</div>
<div id="blocDroit"style="position:relative; float:left; width:100px; height:30px; border:1px solid;">
</div>
</div>
</body> |
Js
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
|
$(document).ready(function()
{
$(".sousMenu a").click(function()
{
var link=$(this).attr("href");
//alert(link); //affichage du lien pour les tests
$.ajax({ //fonction jquery point ajax
url: link,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}
})
return false;
});
$(".menu2 ").click(function()
{
var link=$(this).attr("href");
//alert(link);
$.ajax({ //fonction jquery point ajax
url: link,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}
})
return false;
});
});
function afficher(data)
{
$("#blocDroit").fadeOut(200,function(){
$("#blocDroit").empty();
$("#blocDroit").append(data);
$("#blocDroit").fadeIn(500);
})
} |
lien 1
Code:
1
2
3
4
5
6
|
<img src="Sans titre" width="64" height="40" border="0" usemap="#map" alt="carte"/>
<map name="map">
<area class="menu2" shape="rect" coords="0,0,31,40" href="Lien1.html" title="lien1" alt="Lien1"/>
<area class="menu2" shape="rect" coords="32,1,63,39" href="Lien.html "title="lien2" alt="Lien"/>
</map> |
Par contre, si je remplace
Code:
<a href="Lien.html" >lien</a>
par
Code:
1
2
3
4
5
6
|
<img src="Sans titre" width="64" height="40" border="0" usemap="#map" alt="carte"/>
<map name="map">
<area class="menu2" shape="rect" coords="0,0,31,40" href="Lien1.html" title="lien1" alt="Lien1"/>
<area class="menu2" shape="rect" coords="32,1,63,39" href="Lien.html "title="lien2" alt="Lien"/>
</map> |
le raffraichissement se fait sans problème
le <a href> a l'air de poser un probleme
Une idée???
