I've created the following code snippet:
function acceptButtonClick(th) {
var id = $(th).attr('data-id');
$(th).parent().parent().find('div.Declined').attr('class', "Approved");
$(th).parent().parent().find('div.Requested').attr('class', "Approved");
$.ajax({
type: "POST",
url: "/TableRequest/AcceptRequest",
data: { 'id': id },
success: function (msg) {
}
});
$(th).hide();
$(th).parent().find('button.decline-button').show();
$(th).parent().parent().find('span.decline-img').hide();
$(th).parent().parent().find('span.accept-img').show();
$(th).parent().parent().find('span.requested-img').hide();
}
function declineButtonClick(th) {
tempId = $(th).attr('data-id');
$('#dialog').attr('data-id', tempId);
$("#dialog").modal('show');
}
$(document).ready(function () {
$('#requestTable').dataTable({
"bServerSide": true,
"sAjaxSource": "TableRequest/GetDataTable",
"bProcessing": true,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td', nRow).find('button').attr('data-id', aData.ID);
$('td', nRow).find('button.accept-button').click(function () {
acceptButtonClick(this);
});
$('td', nRow).find('button.decline-button').click(function () {
declineButtonClick(this);
});
if ($('td:eq(1)', nRow).find('div').attr('class') == "Approved") {
$('td', nRow).find('button.accept-button').hide();
$('td', nRow).find('span.decline-img').hide();
$('td', nRow).find('span.requested-img').hide();
}
else if ($('td:eq(1)', nRow).find('div').attr('class') == "Declined") {
$('td', nRow).find('button.decline-button').hide();
$('td', nRow).find('span.accept-img').hide();
$('td', nRow).find('span.requested-img').hide();
}
else if ($('td:eq(1)', nRow).find('div').attr('class') == "Requested") {
$('td', nRow).find('span.accept-img').hide();
$('td', nRow).find('span.decline-img').hide();
}
},
"aoColumns": [
{ "data": "ID", "visible": false, bSortable: false, bSearchable: false },
{ "data": "Name" },
{
"data": "VacationRequestStatus",
bSortable: false,
bSearchable: false,
"mRender": function (data, type, full) {
return '<div class = "' + data + '"><span class="glyphicon icon-question-sign accept-img" height = "25px" /><span class="glyphicon glyphicon-ok decline-img" height = "25px" /><span class="glyphicon glyphicon-remove requested-img" height = "25px" /></div>';
}
},
{ "mData": "Position", bSortable: false, bSearchable: false },
{ "mData": "DateStart", bSortable: false, bSearchable: false },
{ "mData": "DateEnd", bSortable: false, bSearchable: false },
{
bSortable: false,
bSearchable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger decline-button">Decline</button> <button class="btn btn-primary accept-button">Accept</button>'
}
]
});
$('button.ok-request').click(function () {
var tempId = $('#dialog').attr('data-id');
var message = $('textarea#commentForDecline').val();
$.ajax({
type: "POST",
url: "/TableRequest/DeclineRequest",
data: { 'message': message, 'id': tempId },
success: function (msg) {
}
});
$("#dialog").modal('hide');
$('button[data-id="' + tempId + '"]').parent().parent().find('div.Approved').attr('class', "Declined");
$('button[data-id="' + tempId + '"]').parent().parent().find('div.Requested').attr('class', "Declined");
$('button[data-id="' + tempId + '"]').parent().parent().find('span.decline-img').show();
$('button[data-id="' + tempId + '"]').parent().parent().find('span.accept-img').hide();
$('button[data-id="' + tempId + '"]').parent().find('button.decline-button').hide();
$('button[data-id="' + tempId + '"]').parent().find('button.accept-button').show();
$('button[data-id="' + tempId + '"]').parent().parent().find('span.requested-img').hide();
$('textarea#commentForDecline').val('');
});
});
I have made changes to use Bootstrap Glyphicons
instead of <img>
. I modified the selectors by replacing <img>
with <span>
. The line that included <img>
has been commented out. Everything seems to be working well with these changes. However, feel free to ask for further assistance if needed!