Edition d'un tableau en ligne avec PHP, MYSQL et jQuery Ajax
Bonjour à tous,
Je suis en train de réaliser un système de contrôle en ligne de mon tableau html5. J'aimerais quand je clique dans une cellule de mon tableau que je puisse modifier le contenu et l'enregistrer dynamiquement dans la base de données.
Quand je clique sur la cellule j'arrive à avoir le focus sur celle-ci et modifier son contenu mais mon problème est que la modification n'est pas enregistrée en base de données. quand j'actualise ma page il ne se passe rien et je n'ai pas d'erreur. Ci-dessous le code :
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
|
// connexion à la db
require_once('db.php');
$sql = 'SELECT info_id, info_titre, info_contenu FROM infos';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$row = $req->fetch();
// Fichier : ajax_request.php
//define index of column
$columns = array(
0 =>'info_titre',
1 => 'info_contenu'
);
$error = true;
$colVal = '';
$colIndex = $rowId = 0;
$msg = array('status'=>!$error, 'msg'=>'Echec lors de l\'enregistrement !');
if(isset($_POST)){
if(isset($_POST['val']) && !empty($_POST['val']) && $error) {
$colVal = $_POST['val'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['index']) && $_POST['index'] >= 0 && $error) {
$colIndex = $_POST['index'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['id']) && $_POST['id'] > 0 && $error) {
$rowId = $_POST['id'];
$error = false;
} else {
$error = true;
}
if(!$error) {
$sql = "UPDATE infos SET ".$columns[$colIndex]." = '".$colVal."' WHERE info_id='".$rowId."'";
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$msg = array('status'=>!$error, 'msg'=>'Saisie enregistrée avec success !');
}
}
// send data as json format
echo json_encode($msg); |
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<!-- tableau html5 -->
<div id="msg"></div>
<table border="1" width="700px">
<tr data-row-id="<?=$row['info_id'];?>">
<td class="editable-col" contenteditable="true" col-index='0' oldVal="<?=$row['info_titre'];?>" ><?=$row['info_titre'];?></td>
</tr>
<tr data-row-id="<?=$row['info_id'];?>">
<td class="editable-col" contenteditable="true" col-index='1' oldVal="<?=$row['info_contenu'];?>" ><?=$row['info_contenu'];?></td>
</tr>
</table> |
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
|
$(document).ready(function(){
$('td.editable-col').on('focusout', function() {
data = {};
data['val'] = $(this).text();
data['id'] = $(this).parent('tr').attr('data-row-id');
data['index'] = $(this).attr('col-index');
if($(this).attr('oldVal') === data['val'])
return false;
$.ajax({
type: "POST",
url: "ajax_request.php",
cache:false,
data: data,
dataType: "json",
success: function(response)
{
if(response.status) {
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html(response.msg);
} else {
$("#msg").removeClass('alert-success');
$("#msg").addClass('alert-danger').html(response.msg);
}
}
});
});
}); |
Merci par avance !
