Raffraichissement ajax et div

**nicoDolly** · 25/02/2010, 15h17

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 :

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

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 :

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
 
$(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 :

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

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 :

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

<a href="Lien.html" >lien</a>

par

Code :

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

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???

**E.Bzz** · 01/03/2010, 17h47

Bonjour,

Code :

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

<a href="Lien.html" target="_self">lien</a>

ne suffit pas ?

A+

**nicoDolly** · 08/03/2010, 19h03

Dslé mais ça ne fonctionne pas, merci qd même pour ta réponse

**E.Bzz** · 09/03/2010, 09h09

Envoyé par nicoDolly

Dslé mais ça ne fonctionne pas, merci qd même pour ta réponse

Désolé mais c'est insuffisant comme retour si tu veux de l'aide

Quel est le résultat ?

cela m'envoie directement sur une nouvelle page au lieu de rafraichir ma div

Ça ne serait pas plutôt un nouvel appel Ajax qu'il faudrait faire ?

A+

**andry.aime** · 09/03/2010, 10h14

Bonjour,

Envoyé par nicoDolly

cela m'envoie directement sur une nouvelle page au lieu de rafraichir ma div

La fonction n'est affecté à aucun élément.

Code html :

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

<a href="Lien.html" class="menu2">lien</a>

**nicoDolly** · 11/03/2010, 00h02

Dslé mais ça ne fonctionne pas, merci qd même pour ta réponse

Effectivement, ce n'etait pas une réponse vraiment intelligente

En utilisant

Code :

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

<a href="Lien.html" target="_self">lien</a>

le fait de cliquer sur la carte me renvoie toujours sur une nouvelle page au lieu de rafraichir ma div

idem avec

Code :

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

<a href="Lien.html" class="menu2">lien</a>

la div ne se raffraichit pas : une nouvelle page apparait à la place

Ça ne serait pas plutôt un nouvel appel Ajax qu'il faudrait faire ?

Je teste le fichier sur chrome:
- pour affiche correctement la carte dans la div de droite en cliquant sur le lien de la div de gauche, le fichier js est bien executé (afficher les elements)
- quand je veux raffraichir la div à nouveau en cliquant sur le lien de la carte, la fonction js n'est plus exécuté et c'est ce point là que j'ai du mal à comprendre: comment recharger la fonction ajax comme tu dis E.Bzz

normallement, au chargement de la page, le fichier js est chargé une fois pour toute donc je peux l'appeler à n'importe quel moment et autant de fois que je veux et là ce n'est pas le cas.

Ou alors j'ai vraiment rien compris et je dois reprendre les bases

**nicoDolly** · 11/03/2010, 00h32

En fait j'ai p'tet un élément de réponse

dans le cadre d'Ajax, le code JavaScript ne sera pas interprété

trouvé sur ce lien
http://dmouronval.developpez.com/tut...-requete-ajax/

mais bon je lirai ça plus tard car pour l'instant, dodo

**E.Bzz** · 11/03/2010, 09h30

Oui, c'est une piste.
Seulement, il s'agit là de code javascript récupéré et chargé dans la page via Ajax.
Or ton code à toi semble déjà présent dans la page.

Une autre solution c'est que le premier appel génère une erreur JS.
Du coup ton code est planté et l'appel suivant ne peut se faire.
Ton nav te signale bien les erreurs JS ?
Vérifie dans les options.

Ceci dit, comme le dit Andry, es-tu sûr que l'évènement est bien affecté ?
Si tu remplaces tes appels Ajax par des alert('1'); et alert('2'); est-ce que les 2 s'affichent ?

A+

**nicoDolly** · 11/03/2010, 15h37

le code n'a pas l'air de bugger, les "alert" placé a la fin du code js fonctionne bien. De même, si je clique pls fois sur le lien dans la div de gauche , la fonction ajax est bien appelé à chaque fois et raffaichi la div de droite (ce qui ne serait pas possible si le code bugguait)

J'ai du mal à comprendre

es-tu sûr que l'évènement est bien affecté

Normalement oui :
Si je saute la première étape et que j'affiche directement la carte dans la div de droite (sans utiliser le lien de la div de gauche), et que je la raffraichi à nouveau, ça fonctionne (la ca doit vraiment pas être clair mes explications

)

En fait, le code js n'a pas l'air de bugger mais une fois le premier chargement via ajax réalisé, l'utilisation (ou l'appel) de code js semble ne plus fonctionner

Raffraichissement ajax et div

jQuery

Vue hybride

Discussions similaires

Partager

Partager