Prevent new row insert for each page refresh - javascript

I have to tables and I am appending an json file to them.
<table id="userdata" border="2">
<thead>
<th>Id</th>
<th>Title</th>
<th>TotalUnresolvedItems</th>
</thead>
<tbody></tbody>
</table>
<strong>Item2:</strong>
<table id="userdata2" border="2">
<thead>
<th>Id</th>
<th>FullName</th>
<th>TotalUnresolvedItems</th>
</thead>
<tbody></tbody>
</table>
Every time setInterval triggers it adds new rows but i would like to remove exist rows and replace it with new one.
I have tried .remove() from different places but its removing forever :(
My code looks like this.
<script type="text/javascript">
$(document).ready(function () {
refreshStatus();
setInterval(refreshStatus, 30000);
});
function refreshStatus() {
$.ajax({
type: "GET",
url: "refreshTicketStatus",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(),
dataType: "json",
success: function (data) {
repopulateTable(data);
},
error: function (errorThrown){
alert(errorThrown);
}
})
}
function repopulateTable(data) {
var parsedData = JSON.parse(data);
console.log(parsedData);
var dashboard = [];
dashboard.push(JSON.parse(data));
dashboard.forEach(function (value, index) {;
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (key === 'Item1') {
value[key].forEach(function (val) {
//$('#userdata tbody').remove(9000);
var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
})
}
if (key === 'Item2') {
value[key].forEach(function (val) {
//$('#userdata2 tbody').remove(9000);
var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata2 tbody");
})
}
}
}
});
}
</script>

I would change your repopulateDataTable function to the following. Basically I'm creating two empty variables, pass all the rows html in them and then replace all the html only once per interval.
function repopulateTable(data) {
var parsedData = JSON.parse(data);
console.log(parsedData);
var dashboard = [];
dashboard.push(JSON.parse(data));
dashboard.forEach(function (value, index) {;
var table1Rows = "";
var table2Rows = "";
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (key === 'Item1') {
value[key].forEach(function (val) {
//$('#userdata tbody').remove(9000);
var tbl1Row = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
table1Rows += tbl1Row;
})
}
if (key === 'Item2') {
value[key].forEach(function (val) {
//$('#userdata2 tbody').remove(9000);
var tbl2Row = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
table2Rows += tbl2Row;
})
}
}
}
$("#userdata tbody").html(table1Rows);
$("#userdata2 tbody").html(table2Rows);
});
}

Related

How to delete rows other than a random row on a table(Javascript)?

I get data from the user and put it into the table by collating, I want to show a random line from the table I want to delete the other rows
function bilgi(){
var random = Math.floor(Math.random() * (allobjs.length - 1) ) + 1;
if (allobjs[random].id != 'blank'){
allobjs[random].animate({fill: 'rgb(19, 167, 236)'}, 1000);
$(function() {
$.getJSON('/static/yer.json', function(data) {
var deger = $("input[name=deger]").val()
var al = deger.split(",")
$.each(data, function(i, f) {
if(f.plaka == random){
var tblRow = "<tr>" +
"<td>" + "<img class='aaa'src='/static/bayrak.jpg' alt='' />" + "</td>" +
"<td>" + deger + "</td>" +
"<td>" + f.yerler + "</td>" +
"<td>" + f.bolge + "</td>" +
"<td>" + f.ili + "</td>" +
"<td>" + f.teskilati + "</td>" +
"<td>" + f.acm + "</td>" +
"</tr>"
$("tbody").append(tblRow);
}
});
$("tbody tr").hide()
var toplam= $("tbody tr").size()
ratgel=Math.floor(Math.random() * toplam);
$("tbody tr").eq(ratgel).show(1000)
});
});
}}
In javascript add class NOSHOW to each tr you want to hide Then using css .NOSHOW{display:none;} If you want a complete solution show your html.
something like the following might work:
At the start of your function add the following:
var tr = getElementsByTagName('tr');
for(var i = 0; i < tr.length;i++){
tr[i].className += "noshow";
}
then in you html add:
<style>
.noshow{
display:none;
}
</style>
This should work as you then append the row you want to the end of the table.
Later, when you want to display the entire table again you can use:
element.classList.remove("noshow");

How to change Html table to Link

I am new in html.
I am sharing my html code that get Json data from server and show in a Html-table format.
Can you change my html code such that it will have a
button between Video Link and Video Image and when I click on that button it play respective youtube video with video id of the same row.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var people = [];
$.getJSON('https://api.myjson.com/bins/hy7g0', function(data) {
$.each(data.videoLectureListing, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.Id + "</td>" +
"<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" + "<td>" + f.video + "</td>" + "<td>" + f.image + "</td>" +
"<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td>"+ "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="25">
<thead>
<th>ID</th>
<th>VIDEO NAME</th>
<th>DATE</th>
<th>TIME</th>
<th>VIDEO LINK</th>
<th>VIDEO IMAGE</th>
<th>DURACTION</th>
<th>LIVE STATUS</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
i try a lot on internet but could not find anything about it please take it seriously and help me.Thank you
I had some time to kill so here's one solution for your problem:
const keys = ['Id', 'videoName', 'date', 'time', 'videoLink', 'image', 'videoDuration', 'liveStatus'];
var tableBody = document.getElementById('myTableBody');
fetch('https://api.myjson.com/bins/hy7g0').then(response => {
return response.json().then(data => {
buildTable(data.videoLectureListing);
})
});
function buildTable(fullData) {
if (fullData) {
return fullData.forEach(videoData => {
let newRow = buildRow(videoData);
tableBody.appendChild(newRow)
})
}
}
function buildRow(videoData) {
let newRow = document.createElement('tr');
keys.forEach(key => {
let domNode = undefined;
if (key === 'videoLink') {
domNode = buildAButton(videoData[key]);
} else if (key === 'image') {
domNode = buildAImage(videoData[key]);
} else {
domNode = videoData[key] ? videoData[key] : ' - ';
}
domNode = buildAColumn(domNode);
newRow.appendChild(domNode);
});
return newRow;
}
function buildAButton(videoId) {
let newButton = document.createElement('button');
newButton.innerHTML = 'Watch';
newButton.onClick = () => window.location.href = `url/path/${id}`;
return newButton;
}
function buildAColumn(object) {
let newColumn = document.createElement('td');
if (typeof object === 'string') {
newColumn.innerHTML = object;
} else {
newColumn.appendChild(object);
}
return newColumn;
}
function buildAImage(source) {
let newImage = document.createElement('img');
newImage.src = source;
return newImage;
}

Print Json data in html tabel by javascript

I have JSON data saved in this api https://api.myjson.com/bins/xeza2. I want to print the data in a table by using only JavaScript or jQuery. I have tried a few things. I have used XMLHTTP request. Json.parse() . Every method on stack.
This was the first thing I have tried
$(function () {
var people = [];
$.getJSON('https://api.myjson.com/bins/xeza2', function (data) {
$.each(data.info, function (i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" +
"<td>" + f.name + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
data.info is undefined hence why you weren't getting anything added to the table. You need to change it to data.ct_info.
The below code can access the JSON data in your request's response and appends it to the table. I am not sure how you want the data to look or what properties you are trying to access (hence the undefined's) that I'll leave up to you but the below should help get you started.
f.job and f.roll are non-existent properties.
$(function() {
var people = [];
$.getJSON('https://api.myjson.com/bins/xeza2', function(data) {
$.each(data.ct_info, function(i, f) {
var tblRow = "<tr>" + `<td id=${f.id}>` + "</td>" +
"<td>" + f.name + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
var users = []
//GET USER INFO
f.Qid_info.forEach((x) => {
x.user_info.forEach((y) => {
//avoid duplicates
var foundUser = users.find((user) => {
return user.id === y.id
})
if (!foundUser) {
users.push(y)
}
})
})
$.each(users, function(i, user) {
var userRow = "<tr>" + `<td id=${user.id}>` + "User's Name:" +
"</td>" +
"<td>" + user.name + "</td>" + "</tr>"
$(userRow).appendTo("#userdata tbody");
})
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
<tbody>
</tbody>
</table>

Converting the text into a clickable Link

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
var CheckImage = "<img src='images/check.png' height='25' width='25'>";
var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
var Fail = "<img src='images/fail.png' height='25' width='30'>";
setInterval(url, 100);
setInterval(redirects, 100);
function url()
{
$.ajax(
{
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
cache: false,
success: function (xml)
{
var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>SiteName</th>" +
"<th>URLType</th>" +
"<th>DNSStatus</th>" +
"<th>TargetStatus</th>" +
"<th>TTL</th>" +
"<th>SSL</th>" +
"<th>Force</th>" +
"</tr>";
$(xml).find('ProdURL').each(function ()
{
tableContent1 += "<tr>" +
"<td>" + $(this).attr('ProdHost') + "</td>" +
"<td>" + $(this).attr('URLType') + "</td>" +
"<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('TTL') + "</td>" +
"<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('Force') + "</td>" +
"</tr>";
});
tableContent1 += "</table>";
$("#UpdatePanel").html(tableContent1)
getdata(tableContent1);
}
});
}
function redirects()
{
//this ajax code parses the information from XML file and displays it on the table
$.ajax(
{
//If the name of the XML file is changed, make sure to update that in the url:
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
contentType:"url",
cache: false,
success: function (xml)
{
var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
"<tr>" +
"<th>URL</th>" +
"<th>Target</th>" +
"<th>Status</th>" +
"</tr>";
$(xml).find('Redirect').each(function ()
{
tableContent2 += "<tr>" +
"<td>" + $(this).attr('URL')+ "</td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
"</tr>";
});
tableContent2 += "</table>";
$("#UpdatePanel1").html(tableContent2)
getdata(tableContent2);
}
});
}
Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.
let tableContent2 = "";
$("div").each(function() {
tableContent2 += "<tr>" +
"<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + $(this).attr('Status') + "</td>" +
"</tr>"
})
$("#UpdatePanel1").html(tableContent2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>
<table>
<tbody id="UpdatePanel1">
</tbody>
</table>

Appending json file to html with condition

I am appending a dynamic json file to html.I would like to change the color of openticket row .td elements if value of .openticket is bigger then x number.
My code looks like:
<table id="userdata" border="2">
<thead>
<th>Department</th>
<th>OpenTickets</th>
</thead>
<tbody></tbody>
</table>
JS
function repopulateTable(data) {
var parsedData = JSON.parse(data);
console.log(parsedData);
var dashboard = [];
dashboard.push(JSON.parse(data));
dashboard.forEach(function (value, index) {;
var table1Rows = "";
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (key === 'Item1') {
value[key].forEach(function (val) {
var tbl1Row = "<tr>" + "<td>" + val.Title + "</td>" + "<td>" + val.Ticketnumber + "</td>" + "</tr>"
table1Rows += tbl1Row;
})
}
}
}
$("#userdata tbody").html(table1Rows);
});
}
I have made css
.color{
color:red;
}
and tried captured the val like and add attribute:
var capture = $(val.Ticketnumber).val();
if (capture.val)>3{
$("td:second").addClass("color");
}
without success.
kindly have a look.
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (key === 'Item1') {
value[key].forEach(function (val) {
var tbl1Row = "<tr " + (parseInt(val.Ticketnumber)>3?" class='color'":"") + ">" + "<td>" + val.Title + "</td>" + "<td>" + val.Ticketnumber + "</td>" + "</tr>"
table1Rows += tbl1Row;
})
}
}
}
In the above code, i have append class based on condition ("3?" color":"") + ">")

Categories