I have a table which is populated from the database. Trying to make inline editing function now but the problem is that it is updating only the firs column.
The table has 6 column and no matter which column I update it always change the first column value.
Here is the php part (not finished yet and in testing mode, so it is not sql injection protected)
//include connection file
include('database.php');
//define index of column
$columns = array(
0 => 'step_1',
1 => 'step_2',
2 => 'step_3',
3 => 'step_4',
4 => 'step_5',
5 => 'step_6'
);
$error = true;
$colVal = '';
$colIndex = $rowId = 0;
$msg = array('status' => !$error, 'msg' => 'Failed! updation in mysql');
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 my_table SET ".$columns[$colIndex]." = '".$colVal."' WHERE truth_id='".$rowId."'";
$status = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$msg = array('status' => !$error, 'msg' => 'Success! updation in mysql');
}
}
// send data as json format
echo json_encode($msg);
The JS part
$(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: "config/server.php",
cache:false,
data: data,
dataType: "json",
success: function(response)
{
if(!response.error) {
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html(response.msg);
} else {
$("#msg").removeClass('alert-success');
$("#msg").addClass('alert-danger').html(response.msg);
}
}
});
});
});
And the table
<?php
$query = "SELECT * FROM my_table";
$queryRecords = mysqli_query($conn, $query) or die("error to fetch employees data");
?>
<div id="msg" class="alert"></div>
<table id="truth_and_clarity" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">
<thead>
<tr>
<th>Step 1</th>
<th>Step 2</th>
<th>Step 3</th>
<th>Step 4</th>
<th>Step 5</th>
<th>Step 6</th>
</tr>
</thead>
<tbody id="_editable_table">
<?php foreach($queryRecords as $res) :?>
<tr data-row-id="<?php echo $res['id'];?>">
<td class="editable-col" contenteditable="true" col-index='0' oldVal ="<?php echo $res['step_1'];?>"><?php echo $res['step_1'];?></td>
<td class="editable-col" contenteditable="true" col-index='1' oldVal ="<?php echo $res['step_2'];?>"><?php echo $res['step_2'];?></td>
<td class="editable-col" contenteditable="true" col-index='2' oldVal ="<?php echo $res['step_3'];?>"><?php echo $res['step_3'];?></td>
<td class="editable-col" contenteditable="true" col-index='3' oldVal ="<?php echo $res['step_4'];?>"><?php echo $res['step_4'];?></td>
<td class="editable-col" contenteditable="true" col-index='4' oldVal ="<?php echo $res['step_5'];?>"><?php echo $res['step_5'];?></td>
<td class="editable-col" contenteditable="true" col-index='5' oldVal ="<?php echo $res['step_6'];?>"><?php echo $res['step_6'];?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
No matter which step is updated -> always update step_1. Any guides what is the problem?