Requêtes AJAX et gestion historique
Bonjour,
J'utilise l'Ajax pour filtrer une liste de livres grâce à des select :
Code:
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
|
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Gestion historique AJAX</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#btSubmit').click (function() {
achat = $('#annee_achat option:selected').val();
publication = $('#annee_publication option:selected').val();
data = {
annee_achat: achat,
annee_publication: publication
};
$.ajax({
type: "POST",
url: "data_form.php",
data:data,
dataType: "json",
success: function(res) {
$("#result").html(res.content).hide().fadeIn(500);
}
});
});
});
</script>
</head>
<body>
<div style="margin-bottom: 50px;">
<fieldset style="width: 450px; background-color: #EEEEEE;color:#494E5C;">
<legend><strong>Date achat</strong></legend>
<label>Choisir : </label>
<select name="annee_achat" id="annee_achat">
<option value="">Aucune</option>
<option value="1949">1949</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1971">1971</option>
</select>
</fieldset>
</div>
<div style="margin-bottom: 50px;">
<fieldset style="width: 450px; background-color: #EEEEEE;color:#494E5C;">
<legend><strong>Date publication</strong></legend>
<label>Choisir : </label>
<select name="annee_publication" id="annee_publication">
<option value="">Aucune</option>
<option value="1938">1938</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1953">1953</option>
</select>
</fieldset>
</div>
<br/>
<input type="button" id="btSubmit" value="go" />
<div id="result">
</div>
</body>
</html> |
Je souhaiterais pouvoir implémenter une gestion de l'historique. Par exemple, je filtre mes livres en sélectionnant la date de publication 1938 puis je lance un nouveau filtre par l'année d'achat 1949. En cliquant sur la touche "précédent" du navigateur, je souhaiterais revenir sur la liste des livres avec l'année de publication 1938.
J'ai vu qu'il existait pour cela pushState() and popState(). J'ignore si cela conviendrait à ma problématique. Qu'en pensez-vous ? Merci.
