Friday, January 9, 2015

Dojo ComboBox with JsonRest store and loading indicator.

I was using a JsonRest store to populate a dijit ComboBox and FilteringSelect with auto complete and needed to display a spinner or loading message while the JsonRest store was querying.

I googled around for a built in solution and found a couple people asking but no responses.

I am not sure if this is the best approach but a quick and easy enough solution for me was to intercept the functions that are called when a search begins and ends. These functions exist within dijit/form/_SearchMixin.js that the ComboBox and FilteringSelect inherit from:

_SearchMixin._startSearch  -> Called when a search starts
_SearchMixin.onComplete -> Called when a search ends.

Therefore I did something similar to the following to display a loading indicator during store queries. The only down side to this approach is a missing edge case where if the JsonRest store has an error, the loading indicator will continue to display.

<!DOCTYPE html>
<html lang="en">
    <head>
      <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
      <script>
          require([
              'dojo/aspect',
              'dojo/store/Memory',
              'dojo/dom-style',
              'dijit/form/ComboBox',
              'dojo/domReady!'
          ], function (aspect, Memory, domStyle, ComboBox) {

             var someData = [
                 { id:1, name:"One" },
                 { id:2, name:"Two" }
             ];

             var combobox = new ComboBox({
                 store: new Memory( {data: someData }),
                 searchAttr: 'name',
                 autocomplete: true
                 }, 'exampleCombobox');

              function showSpinner() {
                  domStyle.set("exampleSpinner", "display", "block");
              }

              function hideSpinner() {
                  domStyle.set("exampleSpinner", "display", "none");
              }

              aspect.after(combobox, '_startSearch', showSpinner);
              aspect.after(combobox, 'onSearch', hideSpinner);
          });
      </script>
    </head>
    <body class="claro">
      <input id="exampleCombobox"/>
      <img src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/images/loadingAnimation.gif"
           style="display:none"
           id="exampleSpinner"/>
    </body>
</html>

No comments:

Post a Comment