This question already has an answer here:
- X-Editable and Bootstrap datatables 1 answer
I have created the following php file to immitate an ajax request:
<?php
$data=[
"key0"=>["item1"=>1,"item2"=>2],
"key1"=>["item1"=>11,"item2"=>21],
"key3"=>["item1"=>101,"item2"=>221],
];
header('Content-Type: application/json');
echo json_encode($data);
And I have created the following html with javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var datatable=null;
var initDatatable=function(){
if(datatable===null){
datatable=$("#t1").DataTable({
createdRow:function(row,data,dataIndex){
var item=data[data.length-1];
var editableItem=document.createElement("a");
$(editableItem).text(item);
var lastChild=$(row).children().last();
lastChild.text("");
lastChild.append(editableItem);
$(editableItem).editable(function(data){
console.log("Hello");
});
}
});
} else {
datatable.clear();
}
}
$(document).ready(function(){
$.ajax({
method:"GET",
data:{},
url:"api.php",
success:function(data){
initDatatable();
Object.keys(data).forEach(function(key,index){
datatable.row.add([key,data[key]['item1'],data[key]['item2']]);
});
datatable.draw(false);
}
})
})
</script>
</head>
<body>
<table id="t1">
<thead>
<tr>
<th>Column 1</th>
<th>Columnt 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
What I am trying to do is when I change a value on the last table of the column to print on the console the word 'Hello'. As seen in:
$(editableItem).editable(function(data){
console.log("Hello");
});
But for some reason I could not make it work and I can't figure out why. Can you help me?
</div>
