Ne pas rafraichir après le click

**Antoniom** · 26/11/2017, 18h50

Bonsoir tout le monde,

J'ai ceci, qui en cliquant sur les liens "lettre", fait une requête sql et affiche les résultats dans une table.
Ça fonctionne très bien.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
$lettres = $_GET['recherche_par_lettre'];
$tous = $_GET['recherche_tous'];
$n = 1;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
 
<body>
<div class="test"></div>
<?php foreach(range('A','Z') as $l) { ?>
	<a href="?recherche_par_lettre=<?php echo $l ?>" class="lettre"><?php echo $l ?></a>
<?php } ?>
	<a href="?recherche_tous" class="tous">Tous</a>
<table>
	<thead>
		<tr>
			<th class="num-table">N°</th>
			<th>Artiste / Groupe</th>
			<th>Titre</th>
			<th>Genre</th>
			<th class="centre-texte-table">Difficulté</th>
			<th class="centre-texte-table">Download</th>
		</tr>
	</thead>
	<tbody>
		<?php
		if(isset($lettres)) {
			$sql = "SELECT * FROM bt_tablatures WHERE nom LIKE  '" . mysql_real_escape_string($lettres) . "%'";
		   	$resultatLettre = mysql_query($sql);
			if ($resultatLettre === FALSE) {
		   	    echo "La requête SELECT a échoué.";
		   	}
			$rows = mysql_num_rows($resultatLettre);
			if(!$rows) {
				echo '<p class="alerte alerte-erreur">Désolé, aucune tablature pour la lettre "'.$lettres.'"</p>';
			}
			else {
				if($rows == 1) {
					echo '<p  class="alerte alerte-juste">1 Tablature pour la lettre "'.$lettres.'"</p>';
				}
				if($rows > 1) {
					echo '<p  class="alerte alerte-juste">'.$rows.' Tablatures pour la lettre "'.$lettres.'"</p>';
				}
				echo '<tr>';
				while ($lettres = mysql_fetch_array($resultatLettre)) {
					echo '<tr>
						<td class="num-table">'.$n++.'</td>
						<td>'.$lettres['nom']. '</td>
						<td>'.$lettres['titre'].'</td>
						<td>'.$lettres['genre'].'</td>
						<td class="centre-texte-table"><i class="icones icones-etoile-'.$lettres['difficulte'].'"></i></td>
						<td class="centre-texte-table">
							<a href="tablatures/'.$lettres['nom'].' - '.$lettres['titre'].'.gpx">
								<i class="icones icones-download"></i>
							</a>
						</td>
					</tr>';
				}
			}
			mysql_close();
		}
		if(isset($tous)) {
			$sql = "SELECT * FROM bt_tablatures";
		   	$resultatTous = mysql_query($sql);
			if ($resultatTous === FALSE) {
		   	    echo "La requête SELECT a échoué.";
		   	}
			$rows = mysql_num_rows($resultatTous);
			echo '<p  class="alerte alerte-juste">'.$rows.' Tablatures</p>';
			echo '<tr>';
			while ($tous = mysql_fetch_array($resultatTous)) {
				echo '<tr>
					<td class="num-table">'.$n++.'</td>
					<td>'.$tous['nom']. '</td>
					<td>'.$tous['titre'].'</td>
					<td>'.$tous['genre'].'</td>
					<td class="centre-texte-table"><i class="icones icones-etoile-'.$tous['difficulte'].'"></i></td>
					<td class="centre-texte-table">
						<a href="tablatures/'.$tous['nom'].' - '.$tous['titre'].'.gpx">
							<i class="icones icones-download"></i>
						</a>
					</td>
				</tr>';
			}
			mysql_close();
		}
		?>
	</tbody>
</table>
 
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.lettre').on('click', function() {
 
		//return false;
	});
});
</script>
 
</body>
</html>

Cependant, je souhaite qu'il ne rafraichisse pas la page lors du clic. Qu'il fasse le traitement sans rafraichir.
J'ai lu deux trois trucs par ci par là avec en JQuery un e.preventDefault() et un return false mais rien à faire.

D'abord, est-ce possible ?

Si oui, une belle âme me viendrait en aide svp.

Par avance, un énorme merci et d'avance, de très bonnes fêtes à tous !

**sabotage** · 26/11/2017, 19h01

C'est possible mais ce n'est pas seulement une commande Javascript.
Il faut utiliser Ajax.

**Antoniom** · 26/11/2017, 19h54

Ok.. bon je ne maitrise pas du tout Ajax mais merci déjà pour cette avancée, je vais fouiner !

**Antoniom** · 27/11/2017, 10h52

Hello le web,

J'ai finalement trouvé une solution avec cette source :

Donc j'ai englobé tout mon binz dans une div #hopla, ajouté la class .ext aux liens, puis collé ce petit bout de jQuery

Code :

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

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
  $(".ext").on('click',function(event) {
    var url = $(this).prop('href');
    $("#hopla").load(url);
    event.preventDefault();
  });
});