CODEWITHSUNDEEP
javascriptjqueryknockout.js
Saurabh
Saurabh

Reputation: 674

Display loading image in get method with knockout bindings

Simple function to get and load data from server:

function getdata(stepNumber){
            return $.get("./api/data_count.php", {stepNumber: stepNumber})
            .fail(function (textStatus, errorThrown){
                    console.error("Error ! Unable to get step " + number + " count." + "Error: " + errorThrown + ", Status: " + textStatus);
            });
        }

Using .done differed method to assign data to knockout observable:

getdata(1).done(function(data){
                        self.dataCount($.parseJSON(data));
                    });

through following html:

<td><span data-bind = "text: dataCount"></span></td>

All is working well with the code except that it takes around 15 seconds for query to return this count and I am not sure how to display a loading image or message with in following span while the response is awaited.

<span data-bind = "text: dataCount"></span>

Upvotes: 0

Views: 64

Answers (1)

Nathan Fisher
Nathan Fisher

Reputation: 7941

It should be just a matter of toggling an observable to show and hide the loader. something like:

var Vm = function() {
  var self = this;
  self.showLoader = ko.observable(false);
  self.showResults = ko.pureComputed(function() {
    return !self.showLoader();
  })

  self.getdata = function(stepNumber) {
    self.showLoader(true);
    return $.get("./api/data_count.php", {
        stepNumber: stepNumber
      })
      .done(function(data) {
        self.dataCount($.parseJSON(data));
        self.showLoader(false);
      })
      .fail(function(textStatus, errorThrown) {
        console.error("Error ! Unable to get step " + number + " count." + "Error: " + errorThrown + ", Status: " + textStatus);
        self.showLoader(false);
      });
  }



  return self;
}
<table>
  <tr>
    <td><span data-bind="text: dataCount, visible: showResults"><img src='path/to/loader' data-bind="visible: showLoader" /></span>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions