26

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 when new data comes through via the use of jquery and ajax aswell as have a "single view" for classes.

My main issue is that I'm unable to get any form of ajax refreshing/loading working correctly, I can produce my output in json or single html files, for my purposes I think the json would be better but I'm not sure.

My webpage has a navigation helper in the top left, which is a dropdown menu which is populated via a list found by a "search" for <a id="CLASS1" optionname="CLASS 1"></a> which can be found within the table, however if need be I can populate this outside of the table if need be.

I ideally want to be able to modify the dropdown so we have in this example a total of 8 options consisting of - Select Class -, Class 1, Class 2, Class 3, Class 4, Class 5, All Updating, All Non-Updating

All Updating

  • This option will load all the class's into one html viewable page and update each class every 30 seconds (I say each class as some classes might update in one hour, in a different hour some other classes might update) so it would need to compare and if different then update?

All Non-Updating

  • This option will load all the class's into one html viewable page but will not update unless the user clicks on a different class (using the dropdown) and then clicks back...

Class 1, Class 2, Class 3... etc (Individual Loading/Single View)

  • This option will load a single class's data into a html viewable page and will update that specific class every 30 seconds, in a previous post a user named Gaby aka G. Petrioli gave an example which is pretty close to what I need however the member never came back to me: http://jsfiddle.net/u7UkS/4/

Links to all the data

HTML - http://pastebin.com/raw.php?i=0PNQGMmn

CSS - http://pastebin.com/raw.php?i=4H5GHv15

JSON - http://pastebin.com/raw.php?i=xk860dBN

Single Class Page - http://pastebin.com/raw.php?i=HvpaVhG6

JSFiddle - http://jsfiddle.net/kHtuQ | http://jsfiddle.net/kHtuQ/show

Previous post with some ajax examples by certain members: Anchor Cycler / Dropdown to import school class data periodically


Below is an example to show roughly what is in each "class" Note Class = School Class

Super Slimed Down Table Example:

<table id="gradient-style">
    <tbody>
        <thead>
            <tr>
                <th scope="col"><a id="CLASS1" optionname="CLASS 1"></a>Class</th>
            </tr>
        </thead>
        <tr><td>Class 1</td></tr>
    </tbody>
    <tfoot>
            <tr>
                <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="http://placehold.it/250x50"/></th>
            </tr>
            <tr>
                <td colspan="34"><em><b>Data</b> - Test</em></td>
            </tr>
    </tfoot>
</table>

If anyone could help with this it would be much appreciated and if you are able to comment please do so that I can continue to learn.

Thanks
Dennis S

3
  • do you getting the data from your server correctly? is the data correct? if yes then where is your problem? what is your reason not to putting your data into html files and call them? does the handleData is working?
    – Sijav
    Nov 23, 2013 at 10:58
  • 1
    @Sijav, I'm unable to get the handleData to work at all and there is the issue of wanting 3 variations as listed in the main post. I've put a 200rep bounty on it as no other attention has been drawn to it. Any help would be much appreciated. Nov 24, 2013 at 5:30
  • @DennisSylvian is that JSON close to what is actually being used? Seems like JSON is overkill if so and just using AJAX with HTML would be easier.
    – Rob M.
    Nov 24, 2013 at 8:40

3 Answers 3

26
+200

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

22
  • Typical my post seems to be bugged, I can't revert the post or add edits :( Nov 25, 2013 at 8:10
  • Looks pretty much perfect, amazingly I just can't get my head around if(this.value!=""&&this.value!="allclassnup"&&this.value!="allclassup") I can't work out what ones are updating and what aren't (Where is it pulling data from in regards to the All Updating? Nov 25, 2013 at 8:20
  • I've just tried to incorporate your changes and noticed the all updating and all non updating isn't quite what I mean. The All Updating means that the page would update the entire table (which is 5 classes merged into 1 table), that can be pulled from http://fiddle.jshell.net/sijav/mQB5E/5/show/ if need be and would update the "BIG" table every 30 seconds, where as the Non-Updating version would do the same thing just without the 30 second update... Nov 26, 2013 at 4:44
  • @DennisSylvian please look my codes carefully, that does that! when you press all updating it set an interval of one hour to refresh it so it should refresh the class when it passes one hour (you can reduce it from 1*60*60*1000 !!) and non updating does not have that so no interval ... , also that line will check if it is class that selected or it is a feature selected.
    – Sijav
    Nov 26, 2013 at 9:03
  • @DennisSylvian I have added a fiddle that works with 30 sec refreshing instead of one hour
    – Sijav
    Nov 26, 2013 at 9:14
4

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);
})()
5
  • Nice job, @DennisSylvian this is one of the great ways you can get your table as JSON if you really want JSON
    – Sijav
    Nov 24, 2013 at 10:21
  • The JSON in my example was as realistic as I can get it, the tables are all slightly different for each class as some might have extra formatting on the tr or td tags, some might have a different amount of rows... However it doesn't HAVE to be in json, if simple html tables work then that's more than fine with me. Nov 25, 2013 at 8:11
  • The 1, 2, 3 are the class indicators/list numbers and the html for table x is the html to replace/upgrade the table with, I could change it so the last number in the json is a list of the entire json so the full table with 1, 2, 3 already as one item. Nov 25, 2013 at 8:15
  • I'm initially creating the json and the tables in Python which converts and cherry picks data out of a a csv file and loops though putting everything into a table/tables/html Nov 25, 2013 at 8:15
  • I see, sorry for the delay in response, just getting over some nasty food poisoning. I'm updating my answer with an example using $.get instead and think it would probably work better if you just bypassed the JSON encoding/decoding altogether.
    – Rob M.
    Nov 26, 2013 at 7:25
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.