Having a collection of HTML, here is an example snippet:
<tr>
<td>Name of Organisation:</td>
<td class="edtext" id="organisation"><?=$aRes[0]['organisation']?></td>
</tr>
At the top of the page, this script is included:
$(function() {
$(".edtext").editable("./editHandler/WRITE.update.php?uaID=<?=$uaID?>", {
event : 'dblclick',
dataType : "json",
placeholder : '',
indicator : 'Saving...',
cssclass : 'editable',
submit : 'Save',
cancel : 'Cancel',
});
});
By double clicking on the 'organisation' table cell, data can be edited and sent to the database successfully.
In the PHP backend, after updating the database, the following code is executed:
header('Content-type: application/json');
(snip database update code - it works fine)
$report = array();
$report['organisation'] = $userInput;
$report['result'] = "✔";
echo json_encode($report);
The response sent back contains:
{"organisation":"Hello World","result":"✔"}
However, the displayed content includes the tick symbol instead of the desired text. It's advised to show the text without quotes and have the result in a span or div with the id="result".
Integrating a jEditable callback option might be the solution, but examples are scarce. Assistance in implementing this efficiently would be greatly appreciated.
Furthermore, the requirement is to make this JavaScript work for multiple text fields without separate entries for each data cell that needs editing capabilities.