Disable inline editing if value is present in php - php

Question

Apologies if this question has been asked previously.
I am currently generating a basic table using PHP and have one cell where a user can add a comment.
When the user types a comment into the editable cell it saves it to the database table "TechComment column".
I want the editable cell to "disable editing" after the user entered the comment.
My code below:
Table Code
require_once "../linkd.php";
$sql = "select * from DispatchTech where Technician = ? and convert(date, Inserted) = convert(date,
getdate()) order by Completed ASC, DoneWhen";
$ses = $_SESSION['Username'];
$par = array($ses);
$stmt = sqlsrv_query($conn, $sql, $par);
if($stmt){
$count = 1;
while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
$id = $row['Id'];
$txt = $row['TechComment'];
?>
<tr>
<?PHP
if($row['Completed'] == NULL){
print "<td><button onclick=location.href='complete.php?Id=".$row['Id']."'>Complete</button></td>";
}
elseif($row['Completed'] != NULL){
print '<td><span align="center" style="font-size:15px;">✅</span></td>';
}
if($row['Area'] == NULL){
print "<td><button onclick=location.href='arrive.php?Id=".$row['Id']."'>On Site</button></td>";
}else{
print "<td>";
print date_format(new DateTime($row['Area']), "H:i:s");
print "</td>";
}
?>
<td><?php echo $row['TermID']; ?></td>
<td><?php echo $row['Location']; ?></td>
<td><?php echo $row['DMRef']; ?></td>
<td><?php echo $row['Error']; ?></td>
<td><?php echo $row['Description']; ?></td>
<td><?php echo date_format($row['Inserted'], "H:i:s") ?></td>
<td><div contentEditable='true' class="edit" id='TechComment_<?php echo $id; ?>'><?php echo $txt; ?>
</div> </td>
<td><?php echo $row['Timeframe']; ?></td>
</tr>
<?PHP
$count ++;
}
}
?>
Jquery/Ajax Code:
$(document).ready(function(){
$('.edit').click(function(){
$(this).addClass('editMode');
});
$(".edit").focusout(function(){
$(this).removeClass("editMode");
var id = this.id;
var split_id = id.split("_");
var field_TechComment = split_id[0];
var edit_id = split_id[1];
var value = $(this).text();
$.ajax({
url: 'update.php',
type: 'post',
data: { field:field_TechComment, value:value, id:edit_id },
success:function(response){
console.log('Save successfully');
}
});
});
});
I found this short jquery script that will do the trick but can't get it to work.
$('.edit').editable(function (value, settings) {
return value;
});
Might it be because i'm using ajax?
I am not that familiar with ajax.
Any help will be greatly appreciated.

Answer 1

You can achieve it by setting contentEditable to false in your ajax response, like:
$(".edit").focusout(function(){
$(this).removeClass("editMode");
var id = this.id;
var split_id = id.split("_");
var field_TechComment = split_id[0];
var edit_id = split_id[1];
var value = $(this).text();
$.ajax({
url: 'update.php',
type: 'post',
data: { field:field_TechComment, value:value, id:edit_id },
success:function(response){
console.log('Save successfully');
$('#'+id).prop('contenteditable', false );
}
});
});