Navigation ajax history.pushState et onpopstate
Bonjour les amis. :D
J'ai un gros problème en ce moment.
J'ai un petit programme de calcul que j'ai fait avec ajax. Ce que je veux, c'est pouvoir utiliser les touches précédent et suivant du navigateur pour soit revenir au calcul que j'ai fait précédemment par exemple. Pour cela j'utilise pushState et onpopstate. Mais je n'arrive pas à le faire.
Voici tout mon code source.
calcul.php
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
| <?php if (isset($_GET['nombre_a'])){echo $_GET['nombre_a'];}?>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Calculs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="calcul.js"></script>
</head>
<body>
<h1>Calcul</h1>
<form id="formulaire_calcul" action="calcul.php" href="calcul.php" method="post">
<fieldset>
<legend>Formulaire de calcul</legend>
<label for="nombre_a">Nombre A : </label>
<input id="nombre_a" type="text" name="nombre_a"<?php if(isset($_GET['nombre_a'])){echo'value="'.$_GET['nombre_a'].'"';}?>/>
<br />
<label for="nombre_b">Nombre B : </label>
<input id="nombre_b" type="text" name="nombre_b" value="5"/>
<br />
<input type="hidden" name="action" value="calculer" />
<input type="submit" value="Calculer !" />
</fieldset>
</form>
<h3>Résultats : </h3>
<div>
<!--label for="resultat_addition">Addition : </label>
<input id="resultat_addition" type="text" readonly="readonly" />
<br />
<label for="resultat_multiplication">Multiplication : </label>
<input id="resultat_multiplication" type="text" readonly="readonly" /-->
<div id="resultat_addition"></div>
<div id="resultat_multiplication"></div>
</div>
</body>
</html> |
controleur .php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?PHP
if(isset($_REQUEST['action'])) {
switch($_REQUEST['action']) {
case 'calculer' :
$nombre_a = trim($_REQUEST['nombre_a']);
$nombre_b = trim($_REQUEST['nombre_b']);
$resultat_addition = $nombre_a + $nombre_b;
$resultat_multiplication = $nombre_a * $nombre_b;
$resultat = array('resultat_addition' => $resultat_addition,
'resultat_multiplication' => $resultat_multiplication);
print(json_encode($resultat));
break;
}
}
?> |
calcul.js
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
|
$(document).ready(function() {
$("form#formulaire_calcul").submit(function() {
var lien = 'calcul.php?nombre_a='+$("input#nombre_a").val()+'?nombre_b='+$("input#nombre_b").val();
$.getJSON("controleur.php",
{"action" : "calculer",
"nombre_a" : $("input#nombre_a").val(),
"nombre_b" : $("input#nombre_b").val()
/*url : 'calcul.php'*/},
function(data) {
// $("input#resultat_addition").val(data['resultat_addition']);
// $("input#resultat_multiplication").val(data['resultat_multiplication']);
history.pushState('', ' | AJAX Accessible', lien);
document.title = ' | AJAX Accessible';
$("#resultat_addition").html('<span class="info"><b>'+data['resultat_addition']+'</b></span><br /><br />');
$("#resultat_multiplication").html(data['resultat_multiplication']);
}
);
window.onpopstate = function(event) {
var lien = 'calcul.php?nombre_a='+$("input#nombre_a").val()+'?nombre_b='+$("input#nombre_b").val();
$.getJSON("controleur.php",
{"action" : "calculer",
"nombre_a" : $("input#nombre_a").val(),
"nombre_b" : $("input#nombre_b").val(),
url : 'calcul.php'+'?nombre_a='+$("input#nombre_a").val()},
function(data) {
history.pushState('', ' | AJAX Accessible', lien);
$("#resultat_addition").html('<span class="info"><b>'+data['resultat_addition']+'</b></span><br /><br />');
$("#resultat_multiplication").html(data['resultat_multiplication']);
}
);
};
return false;
});
}); |
J'espere que j'ai été assez clair. Sinon je suis ouvert à toutes vos questions .
Merci beaucoup. :) Je vous attend. :D
