Discussion :

[Devilpika]

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 :

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

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 :

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
<?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&eacute;c&eacute;dent" onclick="previous('<?php echo $id; ?>')"/>
<?php   
        }else{
                echo "<div>pr&eacute;c&eacute;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 :

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
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 :

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
<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 ?

[Devilpika]

J'ai fait le teste en supprimant la balise <p> et en fesant référence au contenu de <form> et ca marche parfaitement ...

Mais je ne comprends pas pourquoi cela ne marche pas quand j'essaye de mettre le contenu dans la balise <p> !

[Bovino]

Code :

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

<p id="testPhp" class="zone" name="testPhp"/>

Parceque la balise p n'est pas censée être autofermante, mais du coup, dans ta syntaxe, elle ne possède pas de propriété innerHTML...
Essaye plutôt comme ça :

Code :

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

<p id="testPhp" class="zone" name="testPhp"></p>

[Devilpika]

Salut et merci Bovino de répondre!

Y a peut-être une confusion sur mes explication de mon cas.

Normalement (et c'est le cas quand je regarde le source de la page), j'ai ceci

Code :

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

1
2
3
4
5
6
<p id="testPhp" class="zone" name="testPhp">
   <div>[...]</div>
   <span style="font-size: 3em;">[1]</span>
   [...]
   <span style="font-size: 0.5em;">[10]</span>
</p>

Mais le code se comporte comme ceci (vu grâce à FireBug) :

Code :

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

1
2
3
4
5
<p id="testPhp" class="zone" name="testPhp"/>
<div>[...]</div>
<span style="font-size: 3em;">[1]</span>
[...]
<span style="font-size: 0.5em;">[10]</span>

Ce qui fait que lorsque je clique sur mon lien ça me donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p id="testPhp" class="zone" name="testPhp">
   // code modifié par le javascripte
   <div>[...]</div>
   <span style="font-size: 2.5em;">[1]</span>
   [...]
   <span style="font-size: 0.5em;">[10]</span>
   // code modifié par le javascripte
</p>
<div>[...]</div>
<span style="font-size: 3em;">[1]</span>
[...]
<span style="font-size: 0.5em;">[10]</span>

Au lieux de :

Code :

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

1
2
3
4
5
6
7
8
<p id="testPhp" class="zone" name="testPhp">
   // code modifié par le javascripte
   <div>[...]</div>
   <span style="font-size: 2.5em;">[1]</span>
   [...]
   <span style="font-size: 0.5em;">[10]</span>
   // code modifié par le javascripte
</p>

Est-ce que je suis plus claire ?

Cela pourrait-il venir de l'appel require("navigation.php");?