We Keep Coding

How to automatically reload the ajax/jQuery table data after a button click

I have created a jQuery/ajax API call function to read the JSON data and insert it into the HTML table and it works fine, But I want to auto-reload the table data after 5Sec when a button is clicked.
I tried some codes to make it work. How can I fix it?
$(document).ready(function() {
$.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
var currency_Data = '';
$.each(data, function(key, value){
currency_Data += '<tr>';
currency_Data += '<td>' + value.id + '</td>';
currency_Data += '<td>' + value.country_alpha + '</td>';
currency_Data += '<td>' + value.currency_code + '</td>';
currency_Data += '<td>' + value.currency_sign + '</td>';
currency_Data += '<td>' + value.currency_rate + '</td>';
currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
currency_Data += '</tr>';
});
$("#currency_tables").append(currency_Data);
// Reload the table data on "#addcr" button click.
$("#addcr").on("click", function(){
$("#currency_tables").load(location.href + " #currency_tables");
});
});
});

You can use setTimeout(function,milliseconds) for this.
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

So, I was able to find the solution myself, below is the working code, But I think it's not the professional solution to repeat the same function to achieve the result. If anyone has any better idea, Please suggest.
$(document).ready(function() {
$.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
var currency_Data = '';
$.each(data, function(key, value){
currency_Data += '<tr>';
currency_Data += '<td>' + value.id + '</td>';
currency_Data += '<td>' + value.country_alpha + '</td>';
currency_Data += '<td>' + value.currency_code + '</td>';
currency_Data += '<td>' + value.currency_sign + '</td>';
currency_Data += '<td>' + value.currency_rate + '</td>';
currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
currency_Data += '</tr>';
});
$("#currency_tables").html(currency_Data);
// Reload the table data on "#addcr" button click.
});
$("#addcr").on("click", function(){
setTimeout(function(){
$.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
var currency_Data = '';
$.each(data, function(key, value){
currency_Data += '<tr>';
currency_Data += '<td>' + value.id + '</td>';
currency_Data += '<td>' + value.country_alpha + '</td>';
currency_Data += '<td>' + value.currency_code + '</td>';
currency_Data += '<td>' + value.currency_sign + '</td>';
currency_Data += '<td>' + value.currency_rate + '</td>';
currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
currency_Data += '</tr>';
});
$("#currency_tables").replaceWith(currency_Data);
// Reload the table data on "#addcr" button click.
});
}, 4000)
});
});

Append <img> to <tbody> with JavaScript

I have an AJAX call, and on success, a HTML <img> element is appended to the tbody.
Here is the code:
for (var i = 0; i <= list.length - 1; i++) {
var patientsList = ' <td class="point">' +
(i+1) +
'</td>' +
'<td class="title"> ' +
list[i].dateOfBirthday +
'</td>' +
'<td class="title"> ' +
list[i].lastName +
'</td>' +
'<td class="title"> ' +
list[i].firstName +
'</td>' + '<td>' + '</td>'
+ '<td>' + '</td>'
+ '<td>' + '</td>'
+ '<td style="text-align:end;>' + ' <img src="~/images/doc 50.png" />'+ '</td>';
$("#patients").append('<tr>' + patientsList + '</tr>');
};
The problem is, the image does not appear in the table.
The path is correct.
Why is it not appending?

Path is not correct. Try ./ instead of ~/ .

Your image name contains whitespace: doc 50.png. Try to rename the file and replace the code with something like this:
<img src="./images/doc-50.png" />'
And if your images folder is at the same level as the file, which code you have provided, use ./, not ~/.

Data appended to table is added to one column instead of all four

This is a simplified Bootstrap table created in JavaScript for a shopping cart. I have one row with four columns. The problem is when I open it in Chrome all the data for columns 2, 3 and 4 are all placed in column 1.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="productsList">
</div>
<script>
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
productsList.innerHTML += '<tr>' +
'<td><div><img style="width:200px; height:300px;" src="nopicture.jpg" /></div></td>' +
'<td>' +
'<h6 id="productname"> Nice Product</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs. 5000/=</div></td>' +
'<td><div id="productquantity">3</div></td>' +
'</tr>';
productsList.innerHTML += '</tbody>' +
'</table>';
</script>
</body>
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
productsList.innerHTML += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for(var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
productsList.innerHTML += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
productsList.innerHTML += '</tbody>' +
'</table>';
}

You can't append to the innerHTML of an element like that. When you do it the first time, Chrome tries to close out your table for you and make it valid HTML. The second+ time you are appending HTML after your table is closed with </table>. Put the HTML into a local variable instead and then assign innerHTML once at the end.
function fetchProducts() {
var products = JSON.parse(localStorage.getItem('products'));
var productsList = document.getElementById('productsList');
var content = '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>Shopping cart</th>' +
'<th>Name</th>' +
'<th>Price</th>' +
'<th>Quantity</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
for (var i in products) {
var picture = products[i].picture;
var name = products[i].name;
var price = products[i].price;
var quantity = products[i].quantity;
content += '<tr>' +
'<td><div id="productpicture"><img src=\'' + picture + '\' /></div></td>' +
'<td>' +
'<h6 id="productname">' + name + '</h6>' +
'Delete' +
'</td>' +
'<td><div id="productprice">Tshs.' + price + '/=</div></td>' +
'<td><div id="productquantity">' + quantity + '</div></td>' +
'</tr>';
}
content += '</tbody>' + '</table>';
productsList.innerHTML = content;
}

masonry not working on ajax response

the masonry not working in my ajax response.i have tried some like this but it is not working for me.
my code ajax code is:
<script>
function loadmore(cnt)
{
var val = document.getElementById("result_no").value;
$.ajax({
type: 'get',
url: '{{ URL::route('oi_array3') }}',
data: {
last:val,cnt
},
success: function (response) {
var content = document.getElementById("uf");
if (response == '') {
$("#load").hide();
}
` response.forEach(function(value){
var d = new Date(value.timestamp);
var n = d.toDateString();
var s = d.toLocaleTimeString();
content.innerHTML += '<div class="grid-item oi_data_tile">' +
'<div class="small-12 text-right timestamp columns">' + n + ' ' + s + '</div>' +
'<label class="small-6 columns">Underlying Index</label>' +
'<label class="small-6 text-right nifty_index columns">' +
'<strong>' + value.underlying_index + '</strong>' +
'</label>' +
'<label class="small-6 columns">Diff. in change in OI</label>' +
'<label class="small-6 text-right nifty_index columns">' +
'<strong>' + value.diff_in_change_in_oi + '</strong></label>' +
'<div class="small-12 columns">'+
'<table class="small-12 columns">'+
'<tr class="header">' +
'<td class="small-3">Chng in OI Call</td>' +
'<td class="small-3">Strike<br>price</td>' +
'<td class="small-3">Chng in OI Put</td>' +
'<td class="small-3">Diff in Chng in OI</td>' +
'</tr>'+
'<tr>' +
'<td class="text-right">' + value.derivatives[0].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[0].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[0].change_in_oi_put + '</td>' +
'<td class="text-right bullish">' + value.derivatives[0].diff_in_change_in_oi + '</td>' +
'</tr>' +
'<tr>' +
'<td class="text-right">' + value.derivatives[1].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[1].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[1].change_in_oi_put + '</td>' +
'<td class="text-right bullish">' + value.derivatives[1].diff_in_change_in_oi + '</td>' +
'</tr>' +
'<tr>' +
'<td class="text-right">' + value.derivatives[2].change_in_oi_call + '</td>' +
'<td class="text-right">' + value.derivatives[2].strike_price + '</td>' +
'<td class="text-right">' + value.derivatives[2].change_in_oi_put + '</td>' +
'<td class="text-right bearish">' + value.derivatives[2].diff_in_change_in_oi + '</td>' +
'</tr>' +
'</table>' +
'</div>'+
'</div>'
if(document.getElementById("result_no").value == '0')
document.getElementById("latestvalue").value = value.timestamp;
document.getElementById("result_no").value = value.timestamp;
});
}//response close
});//ajax close
}//loadmore close
$('.grid').masonry({
columnWidth : 320,
gutter: 15,
percentPosition: false,
fitWidth: true,
isFitWidth: true,
itemSelector: '.grid-item'
});
$('.grid').imagesLoaded(function() {
$('.grid').masonry('layout');
});
</script>
and Html code is:
<div class="small-12 columns" id="uf1">
<div class="grid" id="uf">
<!-- ajax response is added here.-->
</div>
<input type="hidden" id="result_no" value="0">
</div>
I want to put ajax response in id, and apply masonry on response.

You need to reinitialize the masonry after the content is added to the DOM. That is the way by which masonry will be able to target the newly added element.
$('.grid').masonry();
Call this after the new content is loaded everytime.

Javascript - return dynamic row data with checkbox input

I seem to only be able to find the answer to this problem in JQuery and I would really like a pure JS solution.
I have a dynamically generated table that I build from a parsed JSON file. I added a checkbox for each row. My question is, do I also have to generate a unique ID or Class for each cell? How can I return a variable containing the data from just the row selected?
var watchLog = new XMLHttpRequest();
var rowChecked;
watchLog.onreadystatechange = function () {
if(watchLog.readyState === 4) {
var status = JSON.parse(watchLog.responseText);
var watchLogCell = '';
for (var i = 0; i < status.length; i += 1) {
watchLogCell += '<tr>';
watchLogCell += '<th scope="row" class="rowHeader"><input type="checkbox" name="selectRow' + i + '"
onclick="function rowData(){if(this.checked){rowChecked = ' + status[i]["Load ID"] + '; return console.log(rowChecked);};">';
watchLogCell += '<td>' + status[i]["Load ID"] + '</td>';
watchLogCell += '<td>' + status[i]["Carrier Name"] + '</td>';
watchLogCell += '<td>' + status[i]["Original PU Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Current PU Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Vendor Name"] + '</td>';
watchLogCell += '<td>' + status[i]["Original DO Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Current DO Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Load Status"] + '</td>';
watchLogCell += '<td>' + status[i]["Truck Status"] + '</td>';
watchLogCell += '<td>' + status[i]["DA First"] + '</td>';
watchLogCell += '<td>' + status[i]["PO Number"] + '</td>';
watchLogCell += '<td>' + status[i]["Buyer No"] + '</td>';
watchLogCell += '<td>' + status[i]["Comments"] + '</td>'
watchLogCell += '</tr>';
}
document.getElementById('tableBody').innerHTML = watchLogCell;
}
};
watchLog.open('GET', 'watchlogic.json');
watchLog.send();

You can try something like
//use this to store the mapping of values, assuming loadid is unique for each record else a unique property of the record has to be used
var watchlogic = {};
var watchLog = new XMLHttpRequest();
watchLog.onreadystatechange = function () {
if (watchLog.readyState === 4) {
var status = JSON.parse(watchLog.responseText);
var watchLogCell = '';
for (var i = 0; i < status.length; i += 1) {
//store the record in watchlogic with key as the unique value
watchlogic[status[i]["Load ID"]] = status[i];
watchLogCell += '<tr>';
watchLogCell += '<th scope="row" class="rowHeader"><input type="checkbox" name="selectRow' + i + '" onclick="onSelect(this)" data-loadid="' + status[i]["Load ID"] + '">'; //store the current record's unique value in an attribute
watchLogCell += '<td>' + status[i]["Load ID"] + '</td>';
watchLogCell += '<td>' + status[i]["Carrier Name"] + '</td>';
watchLogCell += '<td>' + status[i]["Original PU Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Current PU Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Vendor Name"] + '</td>';
watchLogCell += '<td>' + status[i]["Original DO Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Current DO Date"] + '</td>';
watchLogCell += '<td>' + status[i]["Load Status"] + '</td>';
watchLogCell += '<td>' + status[i]["Truck Status"] + '</td>';
watchLogCell += '<td>' + status[i]["DA First"] + '</td>';
watchLogCell += '<td>' + status[i]["PO Number"] + '</td>';
watchLogCell += '<td>' + status[i]["Buyer No"] + '</td>';
watchLogCell += '<td>' + status[i]["Comments"] + '</td>'
watchLogCell += '</tr>';
}
document.getElementById('tableBody').innerHTML = watchLogCell;
}
};
watchLog.open('GET', 'watchlogic.json');
watchLog.send();
function onSelect(el) {
//here el is the clicked element then use the data attribute value to get the unique valeu of the record and use that to get the record form the watchlogic object
var status = watchlogic[el.dataset.loadid]; //or this.getAttribute('data-loadid') for <= IE10
console.log(status)
}