[英]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.我创建了一个 jQuery/ajax API 调用 function 来读取 JSON 数据并将其插入到 HTML 表中,它工作正常,但我想在单击按钮时 5 秒后自动重新加载表数据。
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.您可以为此使用
setTimeout(function,milliseconds)
。 https://developer.mozilla.org/en-US/docs/Web/API/setTimeout https://developer.mozilla.org/zh-CN/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.所以,我自己找到了解决方案,下面是工作代码,但我认为重复相同的 function 来获得结果并不是专业的解决方案。 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)
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.