execution depuis un lien modifié

**toufou** · 12/01/2010, 16h07

Bonjour,
ca fait quelques heures que je cherche à résoudre mon problème en vain!!

Pour info, je débute dans l'utilisation de jquery et ne suis pas une bête en javascript

Donc mon probleme, depuis une page test.html simple, j'ai un lien auquel j'ai affecté une class (class1), celle-ci dans mon code jquery fait que si on clique sur un lien qui possede cette classe, fais disparaitre une div, met un nouveau contenu dans cette div (test1.html) et réaffiche cette div.

Cela fonctionne bien, dans la page html affichée dans ma div, j'ai un nouveau lien, auquel j'ai ajouté la meme class, mais si je clique sur le lien, rien ne se passe!!

ci dessous mes trois fichiers:
test.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
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<head>
<script src="/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/jquery.fccoop13.test.js" type="text/javascript"></script>
</head>
 
<body>
 
<div id="contenu1">
  <a class="class1" href="/test1.html">test niveau 1</a>
</div>
 
</body>
</html>

jquery.fccoop13.test.js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
 
$(".class1").click(function(){
event.preventDefault();
 page=$(this).attr("href");
  $("#contenu1").fadeOut("slow",function(){
    $("#contenu1").load(page,function(){
     $("#contenu1").fadeIn("slow")
    })
  });
});
 
});

et test1.html:

Code :

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

1
2
 
<a class="class1" href="/test1.html">test niveau 2</a>

J'espere avoir été assez clair dans mes explication.
Au pire, vous pouvez faire un copier coller des trois fichiers et essayer.

Merci à ceux qui s'intéresseront à mon problème.

TouFou

**kesmo** · 12/01/2010, 19h20

Pas besoin de copier coller lol

test1.html:

Code :

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

<a class="class1" href="/test1.html">test niveau 2</a>

Tu n'a pas l'impression d'appeler la même page que la page où tu te trouve déjà

?

c'est comme si depuis test.html tu rappelai test.html, c'est normal que rien ne se passe :/

**danielhagnoul** · 12/01/2010, 21h16

Bonsoir.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

**toufou** · 13/01/2010, 11h16

Envoyé par kesmo

Pas besoin de copier coller lol

test1.html:

Code :

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

<a class="class1" href="/test1.html">test niveau 2</a>

Tu n'a pas l'impression d'appeler la même page que la page où tu te trouve déjà

?

c'est comme si depuis test.html tu rappelai test.html, c'est normal que rien ne se passe :/

Bonjour,
Merci d'avoir répondu.
J'ai pris en copte ta remarque, et j'ai essayé de mettre un lien vers une autre page, cela ne change rien, les efefts jquery ne s'affiche pas et suis redirigé vers la nouvelle page plutot que celle-ci soit ouverte dans la div de ma page appelante.

Je vais regarder du coté de live, mais j'ai pas trop compris son interet ni comment ca fonctionne...
Je fais quelques recherches/experimentations, et je vvous tiens au courant.

Merci d'avoir répondu à vous deux.

Bonne jourée,
TouFou

**toufou** · 13/01/2010, 12h34

Envoyé par danielhagnoul

Bonsoir.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

Je viens de tester avec live, cela ne change rien...
Lorsque je suis dans test.html et que je clique sur le lien, j'ai bien un effet de fadeout + fadin avec la page test1.html qui apparait dans le div, et dans la barre d'adresse du naviguateur, c'est toujours test.html.

Ensuite si je clique sur le nouveau lien (donc celui de test1.html), pas d'effet et la page test2.html apparait, ainsi que dans la barre d'adresse, comme si jquery n'etait plus actif du tout. (j'ai remplacé dans test1.html le lien pour aller vers la page test2.html).

Le mieux pour vous rendre compte et que vous essayez.
Voilà un lien pour telecharger les fichers de mon exemple, juste à decompresser et lancer test.html. Ensuite vous cliquez sur le lien et vous verrez l'effet qui ne fonctionnera plus sur le lien suivant qui apparait pourtant dans la meme div...
fccoop13.free.fr/test/test.zip

Dans ce même fichier, j'ai essayer avec live en mettant $(".class1").live("click", function(event){
au lieu de
$(".class1").click(function(event){
et ce n'est pas mieux.

Je sèche...

**kesmo** · 13/01/2010, 16h13

c'est normal.

En gros, dans ta premiere page test.html tu remplace ta div (contenu1):

Code :

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

1
2
3
4
 
<div id="contenu1">
  <a class="class1" href="test1.html">test niveau 1</a>
</div>

par html2:

Code :

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

1
2
 
<a class="class1" href="test2.html">test niveau 2</a>

et après tu donne plus d'instruction a part la class1.

A mon avis il faut que tu te documente sur jquery en général et tu comprendra dans ton exemple comment ta div, définit par un id, appel une autre page lors d'un click sur <a href> définit par une class.

**toufou** · 13/01/2010, 16h17

Normalement je remplace pas ma div, mais son contenu, non?

Normalement, c'est le contenu de la div seulement qui est remplacé par le code html de l'autre page ce qui fais que ma page principale doit passer de :

Code :

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

1
2
3
4
 
<div id="contenu1">
  <a class="class1" href="test1.html">test niveau 1</a>
</div>

à

Code :

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

1
2
3
4
 
<div id="contenu1">
  <a class="class1" href="test1.html">test niveau 2</a>
</div>

execution depuis un lien modifié

jQuery

Vue hybride

Discussions similaires

Partager

Partager