Planning avec zone modifiable
Bonjour,
J'ai posté initialement ce message sur une autre section, visiblement la mauvaise ; alors je tente dans la rubrique javascript puisque ma solution serait dans ce langage que je ne connais pas.
Hier matin, j'ai eu un message URGENT pour un planning en ligne avec la possibilité pour des membres d'une équipe d'insérer des données et pour cela, j'avais un délai de "4 heures" :D mouahah, ils sont mignons....
Monter le tableau ne m'a pas posé de problème, ni faire la zone d'administration pour l'admin. Mais le truc nouveau pour moi, était qu'une case pouvait être éditable par un membre et qu'une fois son info entrée, cela s'enregistrait dans la BDD.
J'ai essayé tout ce que j'ai pu trouvé sur le web : contenteditable, innerHTML, XMLHttpRequest... sans succès.
J'ai commencé avec des codes trouvés sur le web. Mais à force d'essais... nul.
J'avais trouvé un lien et une proposition intéressante. C'est ce que j'ai tenté en dernier lieu... échec. Je ne connais rien à Javascript et des choses m'échappent ; je ne suis plus certaine non plus de la logique de mon code... je crois que j'ai fait une belle tambouille.
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
70
71
72
73
74
75
76
77
78
79
80
81
82
| <?php
include('connexion_sql.php');
?>
<?php include("haut.php"); ?>
<header>
<h1>PLANNING</h1>
</header>
<section id="centre">
<div id="corps"><a id="ancrecontenu"></a>
<table id="tableau">
<caption>Planning de</caption>
<thead>
<tr>
<th class="cacher" scope="col" rowspan="2">ID_PC</th>
<th scope="col" rowspan="2">Da</th>
<th scope="col" rowspan="2">Po</th>
<th scope="col" colspan="2">H</th>
<th scope="col" rowspan="2">Ve</th>
<th scope="col" rowspan="2">CHE</th>
<th scope="col" rowspan="2">CHA</th>
<th scope="col" colspan="2">S</th>
</tr>
<tr>
<th scope="col" class="nogras">h_d</th>
<th scope="col" class="nogras">h_f</th>
<th scope="col" class="nogras">s_1</th>
<th scope="col" class="nogras">s_2</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<?php
$req = $bdd->query('SELECT id_pc, da, po, h_d, h_f, ve, che, cha, s_1, s_2
FROM planning
ORDER BY date')
or die(print_r($bdd->errorInfo()));
define ('TAB', ' ') ;
while ($donnees = $req->fetch()) {
extract ($donnees);
$id_pc=$donnees["id_pc"];
$date=$donnees["da"];
$poste=$donnees["po"];
$heure_d=$donnees["h_d"];
$heure_f=$donnees["h_f"];
$vehicule=$donnees["ve"];
$chef=$donnees["che"];
$chauffeur=$donnees["cha"];
$secouriste_1=$donnees["s_1"];
$secouriste_2=$donnees["s_2"];
echo PHP_EOL . '<tr>';
echo PHP_EOL . TAB . '<td class="cacher">' .$id_pc. '</td>';
echo PHP_EOL . TAB . '<td scope="row">' .$da. '</td>';
echo PHP_EOL . TAB . '<td class="nowrap">' .stripslashes($po). '</td>';
echo PHP_EOL . TAB . '<td>' .$h_d. '</td>';
echo PHP_EOL . TAB . '<td>' .$h_f. '</td>';
echo PHP_EOL . TAB . '<td>' .$ve. '</td>';
echo PHP_EOL . TAB . '<td>' .stripslashes($che). '</td>';
echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($cha). '</td>';
echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($s_1). '</td>';
echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($s_2). '</td>';
echo PHP_EOL . TAB . "<td><button onclick='modifier(this.parentElement)'>ok</button></td>" ;
echo PHP_EOL . '</tr>';
}
?>
<script type="text/javascript">
<!-- |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function modifier(X) {
array = X.getElementsByTagName('TD');
xhr = new XMLHttpRequest() ;
xhr.open("POST", "maj.php", false) ;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") ;
chaine = 'id_pc=' + array[1].innerHTML
+ '&da=' + array[2].innerHTML
+ '&po=' + array[3].innerHTML
+ '&h_d=' + array[4].innerHTML
+ '&h_f=' + array[5].innerHTML
+ '&ve=' + array[6].innerHTML
+ '&che=' + array[7].innerHTML
+ '&cha=' + array[8].innerHTML
+ '&s_1=' + array[9].innerHTML
+ '&s_2=' + array[10].innerHTML;
xhr.send(chaine);
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| -->
</script>
<?php
extract($_POST) ;
$req2 = $bdd->query ("UPDATE planning
SET da='$da', po='$po', h_d='$h_d', h_f='$h_f', ve='$ve', che='$che', cha='$cha', s_1='$s_1', s_2='$s_2' WHERE id_pc='$id_pc'") or die(print_r($bdd->errorInfo()));
?>
</tbody>
</table>
</div>
</section>
<footer id="copyright"><?php include("copyright.php"); ?></footer>
<?php include("bas.php"); ?> |
Ce matin, j'ai trouvé cela : https://www.webucator.com/tutorial/l...e.cfm#tutorial mais je ne connais pas AJAX .
Il n'y a rien de pire que de chercher à "bidouiller" quand tu ne maîtrises pas certains langages, la perte de temps et d'énergie est énorme :(
Quelqu'un peut/veut-il me dépatouiller svp ? C'est pour une bonne cause :)
Merci
