Refresh table data every 5 seconds
It might be easiest to have your mymethod action render a view instead of returning JSON. Then you could just set the innerHTML of a div to the ajax response.
Otherwise your approach will work, but you obviously have to delete the existing table rows first:
$('#table').tableRemoveRows({from:0, length:???});
Edit
re-reading your question, it sounds like you're asking more about setInterval than actually creating the table. You need to keep re-registering the callback, so something like this:
function getdata()
{
$.getJSON("/mycontroller/mymethod"), function(data) {
$.each(data, function(i, item) {
var row = { item.ID, item.Date,
item.Title
};
$(#table).tableInsertRows(row);
});
setInterval( getdata, 5000 );
});
}
setInterval( getdata, 5000 );
How to automatically reload the ajax/jQuery table data after a button click
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)
});
});
How to make jquery table which is refreshing itself in every 10 secs?
Try below code: - Use setInterval
1st Step :
You should create one common function which will fetch all data form Database as below.
function fetchData(){
$(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
Step 2:
Make function which will call function automatically in every 10 sec. using SetInterval as below.
$(document).ready(function(){
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 10 Sec.
});
Step 3:
Make one event function for refresh button click event and put this function in .ready() function.
$('#fetchContacts').click(function() {
fetchData();
});
AJAX jQuery refresh div every 5 seconds
Try this out.
function loadlink(){
$('#links').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Hope this helps.
Refresh table for every 5 seconds for a specific URL
use window.location.search
try this: UPDATE
var autoLoad = setInterval(
function ()
{
var url = window.location.search;
$('#example').load('index.php' + url + ' #example').fadeIn("slow");
}, 5000);
How to reload ajax call function in given time
Try this. I have added the logic to reload when it is last image.
$(document).ready(function() {
var imgLen = 0; var cnt = 0; var lastImage = false;
var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "SMIRNOFF GREEN APPLE 60", "SellingPrice": 202 }, { "Item Name": "SMIRNOFF GREEN APPLE30", "SellingPrice": 101 }, { "Item Name": "BOMBAY SAPHIRE 750", "SellingPrice": 472 }, { "Item Name": "BOMBAY SAPHIRE 30", "SellingPrice": 191 }, { "Item Name": "BLUE RIBBAND 750", "SellingPrice": 877 }, { "Item Name": "BLUE RIBBAND 60", "SellingPrice": 78 }, { "Item Name": "BACCARDI WHITE 750", "SellingPrice": 248 }, { "Item Name": "BACCARDI WHITE 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI WHITE 60", "SellingPrice": 202 }, { "Item Name": "OLD MONK 180", "SellingPrice": 225 }, { "Item Name": "OLD MONK 90", "SellingPrice": 168 }, { "Item Name": "OLD MONK 60", "SellingPrice": 90 }, { "Item Name": "OLD MONK 30 ", "SellingPrice": 45 }, { "Item Name": "DON ANGEL 750", "SellingPrice": 466 }, { "Item Name": "DON ANGEL 30", "SellingPrice": 191 }, { "Item Name": "SAUZA SILVER 700", "SellingPrice": 615 }, { "Item Name": "SAUZA SILVER 30", "SellingPrice": 270 }, { "Item Name": "LIME WATER", "SellingPrice": 45 }, { "Item Name": "PACKEGED WATER 1L", "SellingPrice": 39 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }];
interval = ''; var images = { CounterA: ["CounterA1.jpg", "CounterA2.jpg"] } initTable(tableValue); imageFormatter();
function initTable(tableValue) { addTable(tableValue) showRows(); interval = window.setInterval(showRows, 1000); // seting interval to show table in parts }
function hideImage() { if(imgLen){ var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload(); console.log(imgLen, imgno); if(imgno == imgLen){ console.log("reload now") location.reload(); } // console.log(imgno) $("#displayImage img").css("display", "none"); $("#displayImage img:nth-child(" + imgno + ")").css("display", "block")
$("#displayImage").show(); //show Image and hide table $("#DisplayTable").hide(); setTimeout(function() { initTable(tableValue); }, 5000); cnt++; } else{ initTable(tableValue); }
}
function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applies if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not $("#displayImage").hide(); //showing table hiding image $("#DisplayTable").show(); $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); } else { $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval); //if last then clearing time interval and calling the function again }
$(".hidden:lt(10)").removeClass("hidden"); // this one is to hide previous rows and show next }
function addTable(tableValue) { var $tbl = $("<table />", { "class": "table fixed table-bordered" }), $tb = $("<tbody/>"), $trh = $("<tr/>");
var split = Math.round(tableValue.length / 4); for (i = 0; i < split; i++) { $tr = $("<tr/>", { class: "hidden w3-animate-zoom" });
for (j = 0; j < 4; j++) { $.each(tableValue[split * j + i], function(key, value) { if (typeof(value) === "number") { $("<td/>", { "class": "text-right color" + (j + 1) }).html(value).appendTo($tr); } else { $("<td/>", { "class": "text-left color" + (j + 1) }).html(value).appendTo($tr); }
}); } $tr.appendTo($tb); } $tbl.append($tb); $("#DisplayTable").html($tbl);
}
function imageFormatter() {
var images = { CounterA: ["CounterA1.jpg", "CounterA2.jpg"] }; // This data is dynamic so I want to
for (var key in images) {
var imageList = images[key]; for (i = 0; i < imageList.length; i++) { var img = $('<img />').attr({ 'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other 'alt': key + '/' + imageList[i], 'width': 90 + "%", 'height': 680 }).appendTo('#displayImage'); }
} imgLen = $("#displayImage img").length; } });tbody>tr>td { white-space: normal; border-collapse: collapse; font-family: Verdana; font-weight: bold; font-size: .9em;}
td:nth-child(2),td:nth-child(4),td:nth-child(6),td:nth-child(8) { width: 85px; max-width: 85px; height: 63px}
.fixed { table-layout: fixed;}
.color1 { background: #4AD184;}
.color2 { background: #EA69EF;}
.color3 { background: #E1A558;}
.color4 { background: #F4F065;}
.hidden,.already-shown { display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DisplayTable"></div><div id="displayImage" style="display:none">
</div><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">Related Topics
MySQL - Insert Date Range into Date Columns If Dates Don't Overlap with Existing Ones
MySQL Select from Tables Based on Multiple Rows
Get Repeated Matches with Preg_Match_All()
Fatal Error - 'Mongo' Class Not Found
Sort Array in PHP by Value and Maintain Index Association
Format Text in Excel File via PHP
Convert Number to Letter with PHP
How to Solve Error 404 When Deploying Laravel Project to Cpanel
PHP Password_Verify() Hash and Pass Won't Match
Authorization Header Missing in PHP Post Request
How to Get a One-Dimensional Scalar Array as a Doctrine Dql Query Result
Curl Error 60: Ssl Certificate in Laravel 5.4
(Mysql, PHP) How to Get Auto_Increment Field Value Before Inserting Data
Detecting Ajax in PHP and Making Sure Request Was from My Own Website