I am coding a simple view HTML with a "main" table on the left and a subtable on the right.
When one row of the main table is selected, data is fetched from the backend, using the row's id - such data fetched "on demand" as the selection changes populates the sub-table (on the right) - There is just 1 subtable, its content gets replaced as selection changes.
The problem is that sometimes I see the content of the right table (when the page is just loaded, so no row has been selected) as
<HEADER1>, <HEADER2>, ...
other times I see
<HEADER1>, <HEADER2>, ...
No data to display
When the latter happens, it's fine: when I will select the row of the main table, I will see the other populated
When the former happens, no data will ever be showed in the sub-table ever (even if the back-end is called and data is processed by the viewModel). I have to press F5 again and again until it goes away. Roughly, 3/4 of the times is 'No data to display'
Could anyone explain what these statuses mean and what they imply in terms of underlying data? What is happening to make 'Initializing...' appear instead of 'No data to display' ?
I don't think it's important, but the sub-table is populated in this way:
self.primaryTableSelectionListener = function(event,ui) {
// update the current ID
doDashboardDetails(CURRENT_ID)
}
this.data = ko.observableArray();
this.ds = new oj.ArrayTableDataSource(this.data, {idAttribute: 'id'});
dataFetched.subscribe(function(tableData) {
this.data(tableData);
}, this, "ps");
function doDashboardDetails(CURRENT_ID) {
$.getJSON("/stats/"+CURRENT_ID).
then(function(ep) {
tempArray.push({ ... });
tempArray.push({ ... });
tempArray.push({ ... });
dataFetched.notifySubscribers(tempArray, "msg");
});
}