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
Partager