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.
1 Answers
Answers 1
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.
0 comments:
Post a Comment