Question

---

UPDATE: Sorry, forgot to include some of the code (face-palm). I included it in with the initial code provided so everything will be clear. I’m really new to this stuff so please forgive me for not having the time to learn jsfiddle right now (I know what it is and does though).

I have figured out the problem with the sort toggling every time the table updates. The sorting() function I put into the code was new and calling method.sorting(); inside of the getEvents(method) function solved the issue. However, I’m still stuck on the refresh button concept.

One other problem I noticed and haven’t figured out how to solve is that when I load the page, I have to wait for the first setInterval to start until the table populates. How do I work around this so that when the page initially loads, it immediately loads the data without having to wait the specified time within the setInterval?

One last problem: when the table auto-updates, any rows that were added using the addRow() function disappear because they aren’t part of the info from the server (and no, I can’t have the rows be populated to the server); how can I make the auto-update leave the added rows in without having to get the added rows updated to the server?

---

I have a HTML Table that uses knockoutjs to bind the data into the columns dynamically from a server using the $.getJSON(http://.....) method. I wish to be able to create a refresh button to refresh/update the table-and ONLY the table (I.E. not refreshing the whole page).

As it is right now, the table updates using the setInterval() function at bottom of the js file, but keeps toggling the column sortings. I can’t figure out how to stop this.

Here’s the code snippets needed for this:

HTML file:

---

<table border="6" id="widget"><thead>
    <tr>
        <th><a href=#" data-bind="click: SortByTimeObserved">TimeObserved</a></th>
    </tr></thead>

    <tbody data-bind="foreach: rows">
        <td><input data-bind="value: TimeObserved, valueUpdate: 'change' " /></td>
    </tbody>
</table>
<div>
    <button date-bind="click: addRow, enable: rows()">Add Row</button>
</div>
<script src="TableViewModel.js" type="text/javascript"></script>

---

Heres the javascript viewmodel file:

---

function Event(TimeObserved){
    var self = this;
    self.TimeObserved = TimeObserved;
}

function TableViewModel(){
    var self = this;
    self.sortColumn = ko.observable("TimeObserved");
    self.sortAscending = ko.observable(true);

    self.addRow = function(){
        self.rows.push(new Event(""));
    }        

    self.SortByTimeObserved(){
        if(self.sortColumn == "TimeObserved")
            self.sortAscending = !self.sortAscending;
        else{
            self.sortColumn = "TimeObserved";
            self.sortAscending = true;
        }
        self.rows.sort(function(a,b){
            if(self.sortAscending == true)
                for(self.TimeObserved in self.rows)
                    return a.TimeObserved > b.TimeObserved ? -1 : 1;
             else
                 return a.TimeObserved < b.TimeObserved ? -1 : 1;
        });
    }
    self.sorting = function(){
        if(self.sortColumn() = "TimeObserved"){
            self.rows.sort(function(a,b){
                if(self.sortAscending() == true)
                  for(self.TimeObserved in self.rows)
                    return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0;
                else
                    return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0;
            }
        }
}
//Access the server and pulls the info from it.  I also apply my sorting() method to initially sort the info here.
function getEvents(model){
    $.getJSON("http://mywebpage.com", 
        function (data){
            model.rows([]);
            $.each(data.d, function(i,item){
                hendleEvent(item)
            });
            model.sorting();
        }
    );
}

//Populates the rows of the table with the info from the server I.E. item."infoIwant"
function handleEvent(item){
    var newEvent = new Event(item.TimeObserved);
    this.Model.rows.push(newEvent);    
}

this.Model = new TableViewModel();
var eventInterval = setInterval(function(){
    getEvents(this.Model);
    }, 5000);
ko.applyBindings(this.Model);

---

Answer 1

I solved it by making the table itself update dynamically instead of having to rely on a button. The info is supposed to be read only anyway so editing is not a factor to consider. I also somehow got it to not undo the current sort that is activated.

by adding this into the viewmodel, I set the table to update after the given interval time:

var eventInterval = setInterval(function(){
    getEvents(this.Model);
), 5000); //<-- in milliseconds