Discussion :

[cyberfred79]

Bonjour à tous,

Je débute en jquery et j'ai créé une page qui permet de recenser des chansons, des auteurs, etc. et je voudrais que l'on puisse passer de l'un à l'autre via des liens.

Tout fonctionne lors de la recherche initiale, mais lorsque je clique sur un lien de ma page chargée, il vide la div result et je dois recommencer une nouvelle recherche.

Voilà le

Code HTML :

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
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="result">
  <table class="result">
    <tr class="result">
	<th class="result" width="18%">Titre</th>
	<th class="result" width="12%">Manifestation</th>
	<th class="result" width="15%">Auteur</th>
	<th class="result" width="15%">Compositeur</th>
	<th class="result" width="15%">Interprète</th>
	<th class="result" width="15%">Harmonisateur</th>
    </tr>
 
    <tr class="result2">
      <td class="result"><a class="titre" href="?17">Je suis un homme</a></td>
      <td class="result"><a class="event" href="?3">Soirée 2015</a><br></td>
      <td class="result"><a class="name" href="?18"> Zazie</a><br></td>
      <td class="result"><a class="name" href="?100">Jean-Pierre Pilot</a><br><a class="name" href="?159">Philippe Paradis</a><br></td>
      <td class="result"><a class="name" href="?18"> Zazie</a><br></td>
      <td class="result"><a class="name" href="?160">Christelle Servillat</a><br></td>
    </tr>
 
    <tr class="result2">
      <td class="result"><a class="titre" href="?31">Tout l or des hommes</a></td>
      <td class="result"><a class="event" href="?2">Soirée 2016</a><br></td>
      <td class="result"><a class="name" href="?80">Jacques Veneruso</a><br></td>
      <td class="result"><a class="name" href="?80">Jacques Veneruso</a><br></td>
      <td class="result"><a class="name" href="?79">Céline Dion</a><br></td>
      <td class="result"><a class="name" href="?42">Christian Roy</a><br></td>
   </tr>
</table>
</div>

Et voilà mon

Code JavaScript :

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
$(document).ready(function(){
 
	 $('.titre').click(function(){
 
		var song = $(this).attr("href").substring(1, 4);
 
	        $.post('songdetail.php', {song:song}, function(donnees){
			$('.result').html(donnees); 
 
	        });
	        return false;
	});
 
  	$('.name').click(function(){
 
		var person = $(this).attr("href").substring(1, 4);
 
	       $.post('person.php', {person:person}, function(donnees){
			$('.result').html(donnees); 
 
	       });
	      return false;
	});
});

En live c'est là : http://urlz.fr/83So

Un grand merci d'avance pour votre soutien.

[Invité]

Bonjour,

1- pourquoi mets-tu la classe class="result" sur TOUTES les balises ??

2- tu fais appel à un fichier person.php.
Que contient-il ?

Code :

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

$('.result').html(donnees);

Où sont censées s'afficher les données reçues ?

3- Ajax ne fonctionne pas avec des liens <a> (le lien <a> va "rafraichir" la page, ce qui n'est pas le but).
Par contre, tu peux mettre un attribut data-* pour indiquer quel paramètre transmettre.

[cyberfred79]

Merci pour la réponse.

1- pourquoi mets-tu la classe class="result" sur TOUTES les balises ??

Du copier-coller . C'est corrigé

2- tu fais appel à un fichier person.php.
Que contient-il ?

C'est un fichier qui affiche les détails de la personne. Il s'ouvre grâce à la variable $_POST.

Voilà la requête utilisée

Code :

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

$qry1 = "SELECT * FROM personne WHERE id = ".$_POST['person'];

Où sont censées s'afficher les données reçues ?

Tous les liens doivent s'afficher dans la même div. Je remplace simplement le contenu.

3- Ajax ne fonctionne pas avec des liens <a> (le lien <a> va "rafraichir" la page, ce qui n'est pas le but).
Par contre, tu peux mettre un attribut data-* pour indiquer quel paramètre transmettre.

J'ai changé les liens en div avec le paramètre data-id. Ça fonctionne, mais lors du 2ème clic, le onclick semble ne plus fonctionner et je dois rafraîchir la page pour une nouvelle recherche. Est-ce que c'est lié au fait que tout s'affiche dans la même div ?

[Invité]

OK.

C'est lié au fait.... que tu ne montres pas ton code.

Et faire une réponse vague... ne risque pas de t'amener une solution précise.

...C'est un fichier qui affiche les détails de la personne...

Bravo... mais ça ne dit pas quelles données ça renvoie.

...Tous les liens doivent s'afficher dans la même div...

Super... laquelle ?

...J'ai changé les liens en div avec le paramètre data-id...

Génial... on doit deviner ton code ?

...Ça fonctionne, mais lors du 2ème clic, le onclick semble ne plus fonctionner...

Oui, je sais pourquoi... mais j'attends ton code pour confirmation.

[cyberfred79]

OK, alors je vais faire plus précis.

J'ai un fichier index.php qui contient 2 div. 1 avec le formulaire de recherche et 1 avec le résultat de la recherche. Ensuite, toutes les autres pages se chargent dans cette div.

Ça ne passe pas dans une balise code alors j'ai mis les fichiers en pièce jointe.

Encore merci.

[Invité]

On s'est mal compris...
Il y a une marge entre "tout" et "rien"...

1- On a juste besoin de voir le code nécessaire et suffisant.
D'autant que j'ai ouvert tes fichiers : tu ne mets AUCUN commentaire ni explication du code...


2- Bon.
Je t'explique pourquoi ça ne marche pas la 2ème fois.

Il faut que l'évènement soit "accroché" à un élément DEJA présent dans le DOM.

Code :

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

  	$('.name').click(function(){

Si l'élément de classe "name" est ajouté dynamiquement (via JavaScript/Ajax), alors ça ne fonctionnera pas.

Il faut écrire :

Code :

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

  	$('body').on('click', '.name', function(){

Je mets 'body', mais le mieux est d'"accrocher" à l'élément présent le plus proche.