Discussion :

[Xeuch]

Bonjour,

j'ai une page contenant un tableau rempli automatiquement avec des valeurs ( nombre d'heure de travail pour chaque mois pendant les 12 mois) se trouvant dans ma base de données MySQL .
Cependant en passant vers l'année suivante ( à l'aide d'un bouton suivant) après traitement des nouvelles valeurs et insertion du nouveau tableau dans le DOM avec Ajax et du innerHTML, j'ai toujours le premier tableau, ce qui me faits deux tableaux
voici en gros ce à quoi ressemble le code :

code avance de cliquer sur le bouton suivant:

Code php :

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
<?php
$codeIdentPilote=$_GET['codeIdentPilote']; 
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=basec3p', 'root', '');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
  //DEFINIR L'ID DE LANNEE (POUR TEST, VALEUR A RECUPEREE APRES)
 $annee=date("Y");
 //Differents traitement de recureration  des données à tremplir dans le tableau
 ................
 .............
 ..............
 ?>
 <!--bouton qui me permettent d'incerementer ou de decrementer la date-->
 <input id="precendante" type="button" value="precedante" align="left" onClick="go('precedente')">
<input id="suivante" type="button" value="suivante" align="right" onClick="go('suivante')">
 
<form action="actionEditerFichePilote.php" method="post">
	<fieldset>
		<div id="diveTable">
			<legend>Details fiche <strong><?php echo $prenomPilote; echo " "; echo $nomPilote; ?></strong></legend>
				<table>
					<caption align="center" ><h1><div id="laDate">2013</div><h1></caption>
					<tr>
						<th>Champs</th>
						<th>Janvier</th>
						<th>Fevrier</th>
						<th>Mars</th>
						<th>Avril</th>
						<th>Mai</th>
						<th>Juin</th>
						<th>Juillet</th>
						<th>Aout</th>
						<th>Septembre</th>
						<th>Octobre</th>
						<th>Novembre</th>
						<th>Decembre</th>
					</tr>
					<!--remplissage de la ligne Regime-->
					<tr>
						<td>Regime </td>
						....
					</tr>
					<!--remplissage de la ligne Equipe-->
					<tr>
						<td>Equipe </td>
						....
					</tr>
					<!--Remplissage des ligne domaines -->
					<tr>
						<td>Equipe </td>
						....
					</tr>
				</table>
			</div>
		</fieldset>
	</form>

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
<script type='text/javascript'>
	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;
	}
	/**
	* Méthode qui sera appelée sur le click du bouton
	*/
	function go(param){
		var xhr = getXhr();
		//RECEPTION DES DONNEES
		// On défini ce qu'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				leNouveauTab = xhr.responseText;
				// On se sert de innerHTML pour rajouter les options a la liste
				document.getElementById('diveTable').innerHTML = leNouveauTab;
			}
		}
		//ENVOI DES DONNEES AU SERVEUR
		// Ici on va voir comment faire du post
		xhr.open("POST","ajaxAfficheDetailFichPilote.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// ne pas oublier de poster les arguments
		var anneeEntier=+document.getElementById('laDate').innerHTML;
		alert(param);
		if(param=="suivante"){
			anneeEntier++;
		}
		if(param=="precedente"){
			anneeEntier--;
		}
		alert(anneeEntier);
		//domaine = sel.options[sel.selectedIndex].value;
		xhr.send("anneeEntier="+anneeEntier);
	}
</script>

et enfin voici à peu près à quoi ressemble ma page de traitement Ajax :

Code php :

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['annee'])){
	try
	{
		$bdd = new PDO('mysql:host=localhost;dbname=basec3p', 'root', '');
	}
	catch(Exception $e)
	{
		die('Erreur : '.$e->getMessage());
	}
	//recuperation du nom du manager ( a faire plutard avec les sessions)
	$annee=$_POST['annee'];
	//Traitement de recuperation des donées appropriées correspondant la la nouvelle année
	// remplissage de ma table
?>
<table id="tableToggle">
	<caption align="center" ><div id="laDate"><h1><?php  echo $annee;?><h1></div></caption>
		<tr>
			<!--<th colspan="13">2013</th>-->
			<th>Pilotes</th>
			<th>Janvier</th>
			<th>Fevrier</th>
			<th>Mars</th>
			<th>Avril</th>
			<th>Mai</th>
			<th>Juin</th>
			<th>Juillet</th>
			<th>Aout</th>
			<th>Septembre</th>
			<th>Octobre</th>
			<th>Novembre</th>
			<th>Decembre</th>
		</tr>
		<?php
		//remlissage de mes cellule
		$bdd=NULL; //fermeture de la base
		?>	
	</table>

Merci d'avance de votre aide

[SpaceFrog]

Code :

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

document.getElementById('diveTable').innerHTML = leNouveauTab;

c'est que leNouveauTab comporte deux fois le tableau ...

[Xeuch]

moi je croyais qu'en faisant

Code :

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

1
2
 
document.getElementById('diveTable').innerHTML = leNouveauTab;

je remplace le contenu de la div par

Code :

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

leNouveauTab

ou bien ??

[SpaceFrog]

Encore une fois tu n'as pas lu ma réponse

[Xeuch]

désolé mais cette fois j'ai beau regardé mais je ne trouve pas pourquoi tu dis que le leNouveauTab contiens 2 fois le tableau

merci

[SpaceFrog]

il contient forcément deux fois le nouveau tableau, ou alors tu ne mets pas le innerHTML au bon endroit ...

que te donne un alert(leNouveauTab)

[Xeuch]

merci,

Enfait avec un alert(leNouveauTab) j'ai mon tableau avec les nouvelles valeurs . c'est bizarre.

Cependant je pense que peut être c'est à cause du vieux navigateur Firefox que j'ai car je l'ai testé sous IE9 et ça fonctionne bien.

[SpaceFrog]

c'est quoi comme element dans lequel tu insères le innerHTML ?

[Xeuch]

c'est une div j'ai ça :

Code html :

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

1
2
3
4
5
<div id="diveTable">
	<legend></legend>
	<table>
	</table>
</div>