Autorefreshing/updating table using jQuery ajax by either using json or html files

Question

So @SOF,

I\'ve been trying to make my webpage of school grades, results, projected grades... etc have an auto update feature so that the data on the page refreshes w

Answer 1

The best way to solve your problem is to use a binding library such as knockout. With it you separete your data and your view and only have to worry how you update the data, the view will get updated automatically. This is what it seems you are currently struggeling with.

That's why I made small sample generating a list and updating the data by constantly polling to it (using a fake service which always returns the same data which changes randomly).

Here is the example I did by using knockout: Please take a look at the knockout documention page: http://knockoutjs.com/documentation/introduction.html

HTML: Define a simple table with header and content

<table style="width: 100%" border="1">
    <thead>
        <tr>
            <td>
                <p><b>Classes</b>   
                </p>
            </td>http://jsfiddle.net/yBat5/#fork
            <td>
                <p><b>Childs</b>
                </p>
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: Classes">
        <tr>
            <td>
                <p data-bind=" text: Class"></p>
            </td>
            <td>
                <p data-bind=" text: Child"></p>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

$(function () {
   // define a ViewModel for your data
    function ViewModel() {
        this.Classes = ko.observableArray([{
            "Class": "test",
                "Child": "Max"
        }, {
            "Class": "test2",
                "Child": "Walter"
        }]);
    }

    var vm = new ViewModel(),
        dummyData = [];

    // create a lot of dummy data sets
    for (var i = 0; i < 1000; i++) {
        dummyData.push({
            "Class": "test " + i,
                "Child": "Child" + i
        })
    }

    // constantly poll for new data
    // JS fiddle implements a simple echo service, which we can use
    // to simulate data changes we change a rendon number
    function poll() {
        $.ajax({
            "url": "\/echo\/json\/",
                "type": "POST",
                "data": {
                "json": JSON.stringify(dummyData),
                    "deley": 3
            },
                "success": function (data) {
                vm.Classes(data);

                // poll again (3 seconds so we see how fast the update is)
                setTimeout(poll, 300);

                    // change a random entry to see that data changes
                var randomnumber=Math.floor(Math.random()*1000);
                    dummyData[randomnumber].Child = "Child"  +randomnumber +" changed"
            }
        });
    }

    poll();

    // apply it to the page, knocout now does the binding for you
    ko.applyBindings(vm);
});

Fiddle: http://jsfiddle.net/yBat5/3/

Answer 2

Honestly I'm having a hard time with the code you posted, mostly because I don't understand the JSON example. If you are going to be storing flat HTML as the JSON values, it makes more sense to just $.ajax the HTML into the DOM rather than JSON encoding, parsing and inserting. That being said, I am going to assume that the JSON was not a realistic example and that it will take more of the form:

{ class_name: "Class 1", description: "Blah Blah Blah" }

With that assumption in mind, this well-documented but untested example should point you in the right direction. Essentially, I do the following:

• Define an HTML template
• Create a simple templating function to transpose the JSON values into the HTML template
• Setup an interval to poll the server for new data using setInterval calling a function which passes a timestamp of the last time we requested to your JSON generating server-side script using getJSON

Here is my example, please let me know if you have any questions.

<script>
//  I wrapped this in a self-invoking anonymous function to prevent adding new global variables
(function(){
    var SECONDS_TO_POLL = 3
    ,   $parent_node = $('#node-to-append-to')
    ,   last_timestamp = null // this will be a timestamp passed to the server
    ,   template = '<table id="gradient-style"> \
            <tbody> \
                <thead> \
                    <tr>
                        <th scope="col"><a id="{ident}" optionname="{class_name}"></a>Class</th> \
                    </tr> \
                </thead> \
                <tr><td>{class_name}</td></tr> \
            </tbody> \
            <tfoot> \
                <tr> \
                    <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="{image}" /></th> \
                </tr> \
                <tr> \
                    <td colspan="34"><em><b>Data</b> - Test</em></td> \
                </tr> \
            </tfoot> \
        </table>';

    /**
    *   simple templating function
    *   @param template String template using bracket vars (e.g. <h1>{message}</h1>)
    *   @param values Object literal (e.g. {message: "Hello"})
    *   @return Rendered HTML template
    */
    var render_template = function(template, values) {
            values = values || {};
            return template.replace(/{([^{}]*)}/g, function(bracketed, clean){
                  var object_value = values[clean];
                  return ['string', 'number'].indexOf((typeof object_value)) > -1 ? object_value : bracketed;
            });
        };

    // this is our polling function, will retrieve the JSON from the server, convert to HTML using template and render to the DOM
    var poller = function(){
        // load the JSON and pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
        $.getJSON('/path/to/json?last_retrieved='+last_timestamp, function(data){
            // render the new data into our HTML template
            var html = render_template(template, data);
            // append the result to the parent DOM node
            $parent_node.append(html);
        })
        // get a current timestamp so that we can limit the server results to those 
        last_timestamp = new Date().getTime();
    }

    // retrieve new results every N seconds
    setInterval(poller, SECONDS_TO_POLL*1000);
})()
</script>

Also, just to put a bow on this, if you are just return HTML from the server, you can (for the most part) simply replace $.getJSON with $.get, forgo all of the template rendering on the client-side and just append the response to the DOM

(function(){
    var SECONDS_TO_POLL = 3
    ,   $parent_node = $('#node-to-append-to')
    ,   last_timestamp = null // this will be a timestamp passed to the server

    // this is our polling function, will retrieve the HTML from the server and render to the DOM
    var poller = function(){
        // load the HTML pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
        $.get('/path/to/server?last_retrieved='+last_timestamp, function(html){
            // append the result to the parent DOM node
            $parent_node.append(html);
        })
        // get a current timestamp so that we can limit the server results to those 
        last_timestamp = new Date().getTime();
    }

    // retrieve new results every N seconds
    setInterval(poller, SECONDS_TO_POLL*1000);
})()

Answer 3

using ajax is very simple,
I recommend you to use HTML datatype for this as you have a table in your container,
there is an api documentation here => http://api.jquery.com/jQuery.ajax/
here's a fiddle I made for you => http://jsfiddle.net/sijav/kHtuQ/19/ or http://fiddle.jshell.net/sijav/kHtuQ/19/show/

I have put ajax code in a function named updateClass(url) which url stands for the url to get and it will append the container with the HTML it get =>

function updateClass(url){
    $.ajax({
        url: url,
        dataType: "HTML",
        error: function(msg){
            alert(msg.statusText);
            return msg;
        },
        success: function(html){
            $("#container").html(html);
        }
    });
}

I have added a refreshClass which refresh the whole container class, =>

function refreshClass(){
            updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}

and changed on change selector to below code =>

var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
    if(this.value == "")
        return; // if the value is null don't do anything
    else if(this.value == "allclassnup"){
        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class 
    }
    else if(this.value == "allclassup"){
        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
        classUpdateI = setInterval(refreshClass,30*1000);
    }
    else //else then it's a simple class value, just simply update the current class
        updateClass(this.value);
})

Hope it helps ;)
EDIT: Edited so it can get big table (not generate it!) and all-updating will update in an interval of 30 sec
AnotherEDIT: Believe it or not I have done all of your question!
WORKING FIDDLE:http://jsfiddle.net/sijav/kHtuQ/39/ or http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1 that is because it was only done for the last html, for the new we should make it again! so put the whole $('tr').click() function into another function and call it when necessary.
- do you want this to fully working? it's a little bit complicated but it can works with a bit of change in codes! that I'm gonna show you, Alright here's the algurithm we should put the current class on class selector change to cookie and then we can read it whenever we refresh or reload the page and put the necessary selected class and so on ...
but in code designing here I did to make it working,
first I made a global variable called FirstTimeInit = true; just to be sure if we're on the first time of page loading or not, second I put the for loop that make things highlighting on page load to a function called selectSelectedClass, why? because we need to call it many times, Third I added some if statement to be sure if we can read cookies then change highlighted things and current class also, here is the code:

if(readCookie("CurrentClass")) //if we can read coockie
    $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
    selectSelectedClass(); //select those which was highlighted before
    trClick(); //make things clickable
    FirstTimeInit = false; //and turn of the first time init
}

Forth adding a create cookie on selector value changes = > createCookie("CurrentClass",$(".class-selector").val(),1);
and finally change the success on getting Ajax to this

        success: function(html){
            $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
            if(FirstTimeInit){ //if it is First Time then
                selectSelectedClass(); //highlight which was highlighted after put the correct html
                FirstTimeInit = false; // turn of the first time init
            }
            else //else
                for (var i=0;i<($("table").children().length);i++){
                    if(readCookie(i))
                        eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
                }
            trClick(); //make things selectable!
        }

Also to make it bugfree I have changed the refreshClass to turn firstinit when the selected class is all or it is null because then we have all classes and need those cookies! so here's the code:

function refreshClass(){
    if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
        FirstTimeInit = true;
    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}

2 the <a id="TOP"></a> must be before the container, the <a id="KEY"></a> must be generated on the end of the container after putting html on the container. so $("#container").html(html + '<a id="KEY"></a>');

3 Next and Previous button was designed for non-ajax previous design, It's now needing a different solution! see these simple codes for example

$("#PreviousClass").click(function(){//on prev click
    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});

$("#NextClass").click(function () {//on next click
    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});

4 Yes It is possible you should change your up to key and down to these codes and you're good to go =>

currentClass=0;
$("a.TOPJS").click(function () {
    if(currentClass>0){
        currentClass--
        scrollToAnchor('CLASS'+currentClass);
    }
});

$("a.KEYJS").click(function () {
    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
        currentClass++
        scrollToAnchor('CLASS'+currentClass);
    }
    else
        scrollToAnchor('CLASSMAX');
});

Godd Luck

Another Request EDIT: (hope this will be the last!)
Working Fiddle: http://jsfiddle.net/sijav/kHtuQ/42/ or http://fiddle.jshell.net/sijav/kHtuQ/42/show/
alright as you didn't like the change class on refresh to one which was in it I have removed that, and a better I have added some codes to have classes in cookies, as cookies are not tree there is some kind of conditions, the class is being read from the last character of class selector so be sure to have class number at the last character like -> Class number ***5*** the number 5 will be read for class selector!
EDIT: optimize class next and prev see http://jsfiddle.net/sijav/kHtuQ/46/
EDIT: As per comment requested,
That is what I'm trying to tell you, sometimes the demo shows on jsfiddle.net, sometimes it shows on fiddle.jshell.net, these are different domains and you cannot get html from different domains.
1) You may only put function in Interval or just create another function and call it proper way like this =>

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2) Missings?! I can't find your second question!
3) Well, ... trclick needs to change ... to =>

function trClick(tIndex){ //tIndex would be classnumber from now on
    if (tIndex == -1){ //if it is all updating or all non updating
        $("tr").click(function(){ //do the previous do
            $(this).toggleClass('selected').siblings().removeClass('selected');
            if(readCookie($(this).parent().index("tbody"))){
                if(readCookie($(this).parent().index("tbody"))==$(this).index())
                    eraseCookie($(this).parent().index("tbody"));
                else{
                    eraseCookie($(this).parent().index("tbody"));
                    createCookie($(this).parent().index("tbody"),$(this).index(),1);
                }
            }
            else
                createCookie($(this).parent().index("tbody"),$(this).index(),1);
        });
    }
    else{ //else
        $("tr").click(function(){ //on click
            $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
            if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
                if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
                    eraseCookie(tIndex); //just erase the cookie
                else{ //else
                    eraseCookie(tIndex); //select the new one
                    createCookie(tIndex,$(this).index(),1);
                }
            }
            else
                createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
        });
    }
}

and when we call it on Ajax success we should call it with classNumber => trClick(classNumber);
Last working fiddle: http://jsfiddle.net/sijav/kHtuQ/53/ or http://fiddle.jshell.net/sijav/kHtuQ/53/show/

Good Luck