Table rows not automatically scrolling. Script 1 scrolls, script 2 does not scroll. Why?

Question

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.

Stavm · Accepted Answer · 2017-08-22 12:37:38Z

4

+100

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.

edited Aug 22, 2017 at 12:37

answered Aug 22, 2017 at 12:25

Stavm

8,1515 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DCJones Over a year ago

Hi and thank you for your reply. I am going to pull the data in from an external php file which produces the json array. Using your answer, how do I include the part from my code to fire off the json request?. Also, when I load your answer in to my editor (Dreamweaver) it displays an error at $(function(){ let $section = $('section'); // ERROR ON THIS LINE let clients = json[0].data;

Stavm Over a year ago

replace let with var to get rid of the errors (your editor is not supporting ES6, latest java-script specification, most likely). use $.ajax() to send a request to your server ( example: stackoverflow.com/questions/15733972/… ). make sure to mark as resolved if the answer solves your issue.

DCJones Over a year ago

hi, If I need to add an additional column to display an image how would I write the line of code. I have tried doing it like: "<div class='clientimage'><span class='helper'></span><img src='../../../../conf_images/boards/" + client.ClientImageName + "></div>" +. but this does not work. It display an image place holder and the path behind looks like ".mydomain.com/apps/conf/conf_images/boards/AshfieldHealthcare.png%3E%3C/div%3E%3Cdiv%20class=". Thanks for your help. Once I resolve this I can mark the post as such.

Stavm Over a year ago

@DCJones, if your question was answered you should mark it as such, if you have further questions you can post a new question. this makes your questions more useful for future searchers.

DCJones Over a year ago

Point taken. Question has been marked as anwsered. Many thanks.

Collectives™ on Stack Overflow

Table rows not automatically scrolling. Script 1 scrolls, script 2 does not scroll. Why?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related