[AJAX] Iinterprétation d'HTML ou je ne sais quoi
Salut !
Bon le titre n'est peut-être pas explicite, mais c'est que je n'arrive pas a comprendre ce qui ce passe.
Ce que je souhaite faire, c'est de réalisé une navigation simple (suivant précédent) sur des pages données.
Pour cela j'utilise le PHP et le Javascript. Avant de me lancer dans la réalisation de celui-ci j'ai essayer de tester mon principe qui est le suivant : un formulaire qui contient la page et les boutons "suivant" et "précédent" qui sera modifier l'AJAX pour contenir la bonne ID de la page.
Dans mon test, je remplace l'ID par un chiffre qui me sert de base de travaille pour afficher une série de chiffre.
Voici le code de la page :
Code:
1
2
3
4
5
6
7
8
| <h2>Navigation en PHP<a href="javascript:void 0" onclick="cacher('formNavigPhp')" class="cacher"></a></h2>
<form method="POST" name="ajaxNavigPhp" action="" id="formNavigPhp">
<p id="testPhp" name="testPhp" class="zone">
<?php
require("navigation.php");
?>
</p>
</form> |
Le code de la page navigation.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
| <?php
if (isset($_POST['id']) && !empty($_POST['id'])){
$id = $_POST['id'];
}else{
$id = 1;
}
if (isset($_POST['nav']) && !empty($_POST['nav'])){
if ($_POST['nav']=="up"){
$id = $id + 1;
}else if ($_POST['nav']=="down"){
$id = $id - 1;
}
}
if ($id!=1){
?>
<div><input type="BUTTON" value="précédent" onclick="previous('<?php echo $id; ?>')"/>
<?php
}else{
echo "<div>précédent";
}
if ($id<10){
?>
<input type="BUTTON" value="suivant" onclick="next('<?php echo $id; ?>')"/></div>
<?php
}else{
echo "suivant</div>";
}
for ($i=1;$i<11;$i++){
if (abs($id-$i)<6){
$size = 0.5*(6-abs($id-$i));
}else{
$size = 0.5;
}
echo "<span style='font-size:".$size."em'>[".$i."]</span>\n";
}
?> |
Et le JavaScript :
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
| function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function previous(id){
var data = "nav=down&id=" + id;
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = "Début...";
/*Création de la requete*/
var req = getXhr();
req.onreadystatechange = function(){
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = "Attente server...";
if(req.readyState == 4){
if(req.status == 200){
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = req.responseText;
}else {
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML ="Erreur : code en retour " + req.status + " " + req.statusText;
}
}
};
/* envoie de la requete */
req.open("POST", "navigation.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(data);
}
function next(id){
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = "Début...";
/*Création de la requete*/
var req = getXhr();
req.onreadystatechange = function(){
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = "Attente server...";
if(req.readyState == 4){
if(req.status == 200){
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML = req.responseText;
}else {
/* Saisie d'une valeur dans la balise d'ID "zone" */
document.getElementById("testPhp").innerHTML ="Erreur : code en retour " + req.status + " " + req.statusText;
}
}
};
/* envoie de la requete */
/*var data = ;*/
req.open("POST", "navigation.php", true);
// ne pas oublier ça pour le post
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("nav=up&id=" + id);
} |
Tout ce passe presque bien, sauf que lorsque j'appuie sur suivant (la première fois), il me génère un nouveau contenu au dessus de l'ancien.
En cherchant bien et en utilisant FireBug (heu oui je suis sous firefoxe, j'ai oublié de le dire), je constate qu'il interprète le code comme ce qui suit :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <h2>
</h2>
<form id="formNavigPhp" action="" name="ajaxNavigPhp" method="post">
<p id="testPhp" class="zone" name="testPhp"/>
<div>
précédent
<input type="button" onclick="next('1')" value="suivant"/>
</div>
<span style="font-size: 3em;">[1]</span>
<span style="font-size: 2.5em;">[2]</span>
<span style="font-size: 2em;">[3]</span>
<span style="font-size: 1.5em;">[4]</span>
<span style="font-size: 1em;">[5]</span>
<span style="font-size: 0.5em;">[6]</span>
<span style="font-size: 0.5em;">[7]</span>
<span style="font-size: 0.5em;">[8]</span>
<span style="font-size: 0.5em;">[9]</span>
<span style="font-size: 0.5em;">[10]</span>
</form> |
Ma balise p d'id testPhp ne contient pas les l'informatisons du formulaire de base ce qui explique pourquoi celles-ci restent alors qu'elles devraient être remplacé !
Et là je comprends pas pourquoi ! Quelqu'un serait-il me dire pourquoi cela régit comme ca? Est-ce que j'aurai commis une erreur quelque part ?
