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>

**danielhagnoul** · 13/01/2010, 18h01

Bonjour.

Il suffit de modifier test1 et test2 comme suit :

Code :

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

1
2
3
// Fichier test1.html :
<a class="class1" href="test2.html">test niveau 2</a>
<script src="jquery.fccoop13.test.js"></script>

Code :

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

1
2
3
// Fichier test2.html
<a class="class1" href="#">test niveau 3</a>
<script src="jquery.fccoop13.test.js"></script>

live() : il ne s'applique pas ici.

**kesmo** · 14/01/2010, 09h06

fallait lui laisser du temps pour qu'il comprenne son code, il aurait trouvé tout seul ^^

**toufou** · 14/01/2010, 12h45

Ca marche!!!
Ok, je sais pour vous deux, ça semble logique, perso, a le fait, merci!!

La soluce est pourtant plutôt simple à mettre en oeuvre mais je ne comprends pas le fonctionnement....

Je ne vois pas pourquoi il faut rappeler le script à chaque fois?
Ma compréhension du système, c'est que lorsque je lance test.html, le moteur de jquery se lance, mon script aussi. Et je pensais que t'en qu'on restait dans test.html, les scripts étaient accessibles par les éléments de la page.
Et là ou je dois me planter, c'est que je pensais aussi, que le code html de test1.html mis dans une div de test.html revenait au même que du code de test.html, mais visiblement, ce n'est pas le cas....et là je comprends pas du tout! pourquoi ce n'est pas le cas?

J'espère que mon interrogation est compréhensible...

Sinon, merci pour le coup de main,
TouFou.

ps: j'ouvre un autre post avec une question plus complexe d'ici quelques minutes

**toufou** · 27/01/2010, 12h47

Me revoilà avec un gros souci!

Je sais, j'ai pourtant dis: "ca marche!!", j'aurai du rajouter sous google chrome 4.0.266.0....

Je viens de tester sous firefox 3.5.7, et là cela ne fonctionne pas.... une idée?

edit: Je viens de tester avec opera 10.00.1413, cela fonctionne, et sous ie 6 cela ne fonctionne pas.

A chaque fois, qand je dis que cela ne fonctionne pas, c'est les effet javascript/jquery qui ne se lance pas, les liens sont ouvert sans effets...

Bonne journée,
TouFou

**danielhagnoul** · 27/01/2010, 23h41

Bonsoir.

L'erreur : « $ is not defined », signifie simplement que le framework jQuery n'est pas disponible à l'adresse indiquée dans votre code.

Il faut sans doute l'inclure dans tous les fichiers HTML de votre exemple.

execution depuis un lien modifié

jQuery

Discussions similaires

Partager

Partager