Search jQuery

jQuery Forum

Javascirpt - remove rows dynamically after 2mins

in Using jQuery • 5 years ago

i am calling a webapi using get method which will give json data and i am display as a table from that data. the code which i have given below is working fine. i got around 25 rows(dynamically" of data when i fit the service. this webpage will be refreshed using signalR. when any changes in DB immediately it should reflect in the webpage.

my question is if "" + item.TakeupType + "" value is "Completed" or "cancelled" this row background should change to gray color and after 2mins row should be remove from the webpage.

Note: 1) only 22 rows should display on webpage in orderby asc Datetime.
2) Completed/cancelled items from DB should will display on the webpage for 2 mins and drop off.

My code :

//Webapi call - To load info status.
function LoadinfoStatus() {
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('x-api-key', '9024024A-024-485C024-6BC2024DA');
}
});
$.ajax({
type: "GET",
url: "https://mywebsites.net/version1/info/494",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// alert(JSON.stringify(data));
$("#DIV").html('');
var DIV = '';
//Function to get DateFormat
function getFormattedDate(date) {
// debugger;
var inputdate = new Date(date);
var currentdate = new Date();
var strTime = getFormattedTime(inputdate);
var rngStrTime = getFormattedTime(add_minutes(inputdate, 5));
if (inputdate > currentdate) {
return inputdate.getDate() + '/' + (inputdate.getMonth() == 0 ? 12 : inputdate.getMonth()) + " " + strTime + " - " + rngStrTime;
}
else {
return strTime + " - " + rngStrTime;
//return day + "/" + month + " - " + strTime;
}
}
var add_minutes = function (dt, minutes) {
return new Date(dt.getTime() + minutes * 60000);
}
function getFormattedTime(inputdate) {
var day = inputdate.getDate();
var month = inputdate.getMonth() + 1;
var hours = inputdate.getHours();
var minutes = inputdate.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ':' + minutes + ampm;
}
$.each(data, function (i, item) {
var rows = "<tr ' " + (item.Count > 100 ? "data-id='" + item.orderId + "'" : "") + (item.TakeupType == "Cancelled" ? "style='background-color: gray; color: white'" : "") + " align= 'center' > " +
"" + "" + "" + "" +
"" + item.user.firstName + " " + item.user.lastName.charAt(0) + "." + "" +
"" + item.TakeupType + "" +
"" + (item.Count == undefined ? "$" + " " + 0 : "$" + " " + item.Count) + "" +
"" + getFormattedDate(item.TakeupTimeUtc) + "" +
"= 100 ? "style='background-color: darkorange; color: white'>***" : ">") + "" +
"";
var $tbody = $('tblOrders tbody');
$('#tblOrders').append(rows);
}); //End of foreach Loop
registerEvents();
// console.log(data);
}, //End of AJAX Success function
failure: function (data) {
alert(data.responseText);
}, //End of AJAX failure function
error: function (data) {
alert(data.responseText);
} //End of AJAX error function
});
}