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>

Comments

Post a Comment

Popular posts from this blog

AutoItX4Java - Java AutoIt Bridge

AutoIt is a very useful automation scripting language for Microsoft Windows. It allows for GUI automation using a very simple syntax and can be useful for testing applications. It is packaged with AutoItX which supports accessing AutoIt functions through COM objects. I just created a new project on Google Code for Java AutoItX bindings. The project is called AutoItX4Java and uses the JACOB Java COM Bridge to access AutoItX functions. Currently the project is in an unstable state but hopefully as time goes on things will get better tested. Using AutoItX4Java is simple: Download JACOB . Download and install AutoIt . (or register the dll. See below) Add jacob.jar and autoitx4java.jar to your library path. Place the jacob-1.15-M4-x64.dll file in your library path. A simple example of using this library is below: File file = new File("lib", "jacob-1.15-M4-x64.dll"); //path to the jacob dll System.setProperty(LibraryLoader.JACOB_DLL_PATH, file
Read more

The SQL Server and .Net equivalent of PHP and MySQL's SHA1 function

In PHP and MySql there is an sha1(str) function which generates an sha1 hash of a string. Their usages are simple: <?php echo sha1('password'); ?> //Outputs:5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8 mysql> select sha1('password'); +------------------------------------------+ | sha1('password') | +------------------------------------------+ | 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8 | +------------------------------------------+ 1 row in set (0.00 sec) Similarly, .Net has an SHA1 method within the System.Security.Cryptography  namespace which can be used in the following manner to generate the same hash. public static string Sha1(string hashStr, Encoding encoding) { var sha1 = new System.Security.Cryptography.SHA1CryptoServiceProvider(); var hash = sha1.ComputeHash(encoding.GetBytes(hashStr)); return BitConverter.ToString(hash).Replace("-", ""); } Console.WriteLine(S
Read more

RTL8723AU Realtek driver fails after linux update fix.

After a recent kernel update my wireless stopped working in Fedora 23. dmesg started showing logs like this: [ 5.508212] usb 1-1.4: Vendor: Realtek [ 5.508218] usb 1-1.4: Product: 802.11n WLAN Adapter [ 5.508222] usb 1-1.4: RTL8723AU rev B (TSMC) 1T1R, TX queues 2, WiFi=1, BT=1, GPS=0, HI PA=0 [ 5.508226] usb 1-1.4: RTL8723AU MAC: 20:16:d8:03:97:c1 [ 5.508229] usb 1-1.4: rtl8xxxu: Loading firmware rtlwifi/rtl8723aufw_B_NoBT.bin [ 5.517062] usb 1-1.4: Firmware revision 31.0 (signature 0x2302) [ 5.539427] Bluetooth: BNEP (Ethernet Emulation) ver 1.3 [ 5.539431] Bluetooth: BNEP filters: protocol multicast [ 5.539435] Bluetooth: BNEP socket layer initialized [ 5.859658] usb 1-1.4: Firmware failed to start [ 5.867382] usbcore: registered new interface driver rtl8xxxu [ 5.891270] r8723au: module is from the staging directory, the quality is unknown, you have been warned. [ 5.892132] usbcore: registered new interface driver rtl8723au [ 5.896855] nf
Read more