Insertion tableau dans le dom : dédoublement du tableau
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 :roll:
voici en gros ce à quoi ressemble le code :
code avance de cliquer sur le bouton suivant:
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
| <?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:
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:
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
