I deleted my first question and have rewitten with more detail and addition jSfiddle domos.
I have a script that runs a query and returns data which then populates a table. The rows in the tables auto scroll in a loop. All this works fine and is done by using the following code. However what I need to do is to display the same data from a JSON call enabling automatic screen updates without having to refresh the complete page. I have this working in SCRIPT 2, but what I can't get to work is the automatic scrolling which does work in SCRIPT 1.
SCRIPT 1: THIS WORKS
<table id='table_scroll'>
<section id="section">
do {
<div class='container'>
<div class='clientname-text'><?php echo $row_conf['ClientName'];?></div>
<div class='roomname-text'><?php echo $row_conf['RoomName'];?></div>
<div class='time-text'><?php echo date("H:i", strtotime($row_conf['RoomFromTime'])) . " - " . date("H:i", strtotime($row_conf['RoomToTime']));?></div>
</div>
} while ($row_conf = mysqli_fetch_assoc($conf));
</section>
</table>
$.fn.infiniteScrollUp=function(){
var self=this,conf=self.children()
setInterval(function(){
conf.slice(10).hide();
conf.filter(':hidden').eq(0).slideDown()
conf.eq(0).slideUp(6000, "linear",function(){
$(this).appendTo(self);
conf=self.children();
});
},100)
return this;
}
$(function(){
$('section').infiniteScrollUp()
})
https://jsfiddle.net/Blackbox/b2dv6w3w/11/
I now want to use data retuned by a JSON call to dynamically create the table. I have already done this using the following code.
SCRIPT 2 THIS DOES NOT WORK, Can anyone see why?
<table id='table_scroll'>
<section id="section"></section>
</table>
$(document).ready(function() {
function get_data() {
$.getJSON("get_data_logos.php", function(json){
json = json[0].data;
var tr ;
$('table').html("");
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.css("border-bottom","2px solid #FFF");
tr.append("<td width='33%'><div class='clientname-text'>" + json[i].ClientName + "</div></td>");
tr.append("<td width='33%'><div class='roomname-text'>" + json[i].RoomName + "</div></td>");
tr.append("<td width='33%'><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>");
$('table').append(tr);
}
});
}
get_data();
setInterval(get_data,60000)
});
$.fn.infiniteScrollUp=function(){
var self=this,conf=self.children()
setInterval(function(){
conf.slice(10).hide();
conf.filter(':hidden').eq(0).slideDown()
conf.eq(0).slideUp(6000, "linear",function(){
$(this).appendTo(self);
conf=self.children();
});
},100)
return this;
}
$(function(){
$('section').infiniteScrollUp()
})
My question is: How caan I get SCRIPT 2 to work with the scroll as it does in SCRIPT 1.
https://jsfiddle.net/Blackbox/dsm3dg55/30/
Again, many thanks in advance for your time.
you're not using the table at any of the snippets you posted. and your getdata()
is not defined anywhere.
all I did was to convert your JSON object into HTML the rest of the code remains untouched: https://jsfiddle.net/5k9wk6vj/
$(function(){
let $section = $('section');
let clients = json[0].data;
//json to html
$.each(clients, function (key, client) {
$section.append(
"<div class='container'>" +
"<div class='clientname-text'>" + client.ClientName + "</div>" +
"<div class='roomname-text'>" + client.RoomName + "</div>" +
"<div class='time-text'>" + client.RoomFromTime + " - " + client.RoomToTime + "</div>" +
"</div>");
});
//start scrolling
$section.infiniteScrollUp();
})
chances are the HTML can be built cleaner with HTML templates or such but this should work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With