Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 38
  1. #1
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts

    HTML table adds new row drops the end

    Hello, I have a goal in mind of creating a html table that is dynamically updated via JS. My goal is to have simple data displayed in table and have the top row replaced in intervals, which then moves all the other data down and deletes the final row.

    I am in planing stage so I am searching for methods you all may know of, also what kind of html skeleton should I build, would a simple table do the trick? Do I need to attach ids to my rows?

    Thanks -Micah

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Well, the approach depends on the environment in which the functionality is going to be used. Is it a controlled system or for the general public? Being a friend of progressive enhancement, my approach would be this:

    At first assume that JavaScript is not present/available and think about how it should work in a very basic way. The data needs to be stored somewhere and retreived from there so I guess some kind of server side functionality must be there already. In this case you can include a button to manually reload the page and update the table that way. The next step is to add the dynamic functionality so that the data is received and the tble updated on the fly, without reloading the entire page. This is done with asynchronous JavaScript and XML (AJAX).

    So, in this case, I would say, you have a regular HTML table on first page load with the latest data, and then you’d add the JS functionality to load the new data, append a row to the table, and remove the last row at the same time (once data retreival was successful). The best way to add a chunk of HTML is to use document fragments.

    Although it can be done with plain JS, a framework like jQuery, mootools, Dojo, YUI, or whatever can make things easier.

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Thank you for the response.

    Basically it is a local environment at work, I have not created the means of accessing our database but I was thinking a php relationship using as you mention ajax/xml or json means or asynchronous loading the data. There will be no manual refresh, as soon as the index is loaded the table will be displayed and the content will be refreshed.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    One fair warning: the HTML protocol, which include any AJAX-based communications, is strictly a "pull" protocol. That is, the client (browser) must make a request of the server, the server responds once, and then the connection is broken. For something else to happen, another request/response pair must be used. And so on.

    This means that any "interval" based refresh of data in the browser must be initiated by browser-side code (e.g., typically via a setTimeout( ) JavaScript call).

    So your JS code *PROBABLY* needs to handle the cases where (a) NO changes have occurred on the server (so nothing is changed in the <table> display), (b) one change has been made, and (c) MORE than one change has occurred on the server, meaning that more than one row may need to be added in the browser and more than one row dropped from the end. You can't depend on there always being one and only one change on the server.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by SeattleMicah View Post
    Hello, I have a goal in mind of creating a html table that is dynamically updated via JS. My goal is to have simple data displayed in table and have the top row replaced in intervals, which then moves all the other data down and deletes the final row.
    This is fairly straight forward, especially if the data doesn't beed to come from the server after the page has loaded. If it does, it's fairly easy to send an AJAX request to the server to get the data you want and then replace the first row in the html table with the new data and then delete the last row. The server side coding should not be complicated unless you are doing something unusual.

    I wouldn't use a javascript framework for this. The plain javascript is fairly minimal and will definitely be less code than if you use jQuery.
    Last edited by webdev1958; 03-19-2012 at 11:37 PM.

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Ok great information, thank you Old. I am in a very controlled environment and have been given the freedom to experiment, could this be a good time to try web sockets? And am I right to think that it may be a substitute too the technique of making the various ajax calls? I might be way off, I don't know to much about web sockets or ajax.

    Thanks for the info though this is leading me in the right direction.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    I haven't mucked with web sockets, but yes, they should work. You could also use a Java applet, of course. Java *is* allowed to use "push" technology.

    But, really, I see nothing wrong with using AJAX and "pull" if the site isn't heavily loaded. I don't know how often you need to check for updates on the server. But once a second, if you don't have more than a dozen or so simultaneous users, wouldn't put a strain on the server. If you can live with once every 10 seconds, then you can have more users, etc.

    And handling multiple results from the server wouldn't be hard. Just use a loop on the incoming data, adding one row (and deleting one row) at a time. It will be more than fast enough.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SeattleMicah (03-20-2012)

  • #8
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    awesome thank you, it will just be displayed on our front display in the office so technically one "user". I will try both ways just to play with different techniques, thank you.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Yeah, I did something similar for a "Sales Board".

    It doesn't add/remove rows, but it scrolls the set of rows upward on the screen. All the salespeople are given one row each. As they make a sale, it registers in their row and plays a short musical selection they have chosen (15 seconds). Because of the music, it queues up the updates, so if another one (or more) comes in before the music finishes, it hold off displaying it. Oh, and the scroll is fast forwarded to the person who made the sale and the scrolling is stopped while the music plays.

    Was fun to do and not hard. And it polls once a second using AJAX, too.

    I thought it was kind of hokey when I did it, but the sales people love it. They taunt someone if their song hasn't been played by lunch break, for example.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    haha thats pretty cool. Where do they go when they scroll up? I am confused.

    My next step is to find a good tutorial on manipulating the table. Do you have some good places when I could learn from? http://jsfiddle.net/AQ7WW/ maybe something like that?

  • #11
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    By environment do you mean languages? I will start with a ajax/jquery/html5 front-end environment, I will get my data from mysql/php.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    The easiest way, which works in browsers supporting DOM level 2 (includes MSIE 8):
    Code:
    function addRowAndScroll( contentsToAdd, cellClasses ) /* arguments are arrays of same size */
    {
        var tbl = document.getElementById("idOfYourTable");
        var row = tbl.insertRow(0);
        for ( var c = 0; c < contentsToAdd.length; ++c )
        {
            var cell = row.insertCell( );
            cell.className = cellClasses[c]; // omit of course if you don't pass in the classes
            cell.innerHTML = contentsToAdd[c];
        }
        // then remove the last row:
        tbl.deleteRow( tbl.rows.length - 1 );
    }
    You can of course add content to the cells any way you want. That just shows an easy way to do it, by passing in an array of content.

    And that just shows one way you could specify the classes to apply to each column of cells.

    ***************

    To scroll on the screen, I just adjust the scrollTop property of the <body> and, as a row is scrolled off the top of the screen, I move it from the top row in the <table> to the bottom row. Several ways to do that. You could just clone the row contents from top row to new bottom row and then delete the top row, for example.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SeattleMicah (03-20-2012)

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    BemleyCeuben's comment was an attempted SPAM. He was trying to advertise some URL, but the forum software removed the URL link.

    Didn't you notice that his post was a verbatim copy of part of VIPStephan's post #2? First line thereof, in fact.

    I've reported him.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    haha thank you very much pedant ill check this out in the morning.

    Forum spam is the worst the most annoying part of my day as Im sure for more forums. And I think I set a record for highest percentage of spam per threads started on CF, I swear I always get at least 2 in my threads.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    What? Giving up this early? I'll come pound on your door and make you finish tonight.

    (I'm in Snohomish.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •