I have implemented inline editing using jQuery Datatables. Currently, I am trying to display a green checkmark when a record gets updated.
Below is the ajax call that populates the table:
$.ajax({
url: 'api/massEditorSummary.php',
type: 'POST',
data: data,
dataType: 'html',
success: function(data, textStatus, jqXHR)
{
var jsonObject = $.parseJSON(data);
var table = $('#example1').DataTable({
"data": jsonObject,
"columns": [
{ "data": "partner_name" },
{ "data": "service" },
{
"data": "forecast",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
$(nTd).html("<input type='text' class='form-control editForecast'
id='editForecast' data-uid='"+oData.UID+"' data-editforecast='"+oData.forecast+"'
value='"+oData.forecast+"' style='width:75px; height:30px;' />
<span id='testID' style='display: none;'><i class='fa fa-check' id='updatedIcon' aria-hidden='true'
style='color:green;'> </i></span>");
}
}
],
"stateSave": true,
"autoWidth": false
});
},
error: function(jqHHR, textStatus, errorThrown)
{
// handle errors here
}
});
In the "forecast" data column, there is a hidden span element with an ID of testID containing a font-awesome check icon.
Now, I want to show this checkmark upon a successful update triggered by the BLUR event:
$('#example1').on('blur', 'tr > td > .editForecast', function(e)
e.preventDefault();
var uid = $(this).attr('data-uid');
var forecastcurval = $(this).attr('data-editforecast');
var forecastnewval = $(this).val();
var forecastData = '';
$.post('api/inlineEditProcess.php', {uid:uid, forecastcurval:forecastcurval, forecastnewval:forecastnewval}, function(data)
{
forecastData = data;
callForecastFunction(forecastData);
});
function callForecastFunction(forecastData)
{
if(forecastData == "Success")
{
$(this).css('display', 'inline-block'); // show the checkmark
}
else
{
// handle failure case
}
}
});
If the data returned from the processing script is 'success', the checkmark will be displayed in the callForecastFunction function.