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

Automated web testing with Java, Selenium RC, LoggingSelenium, HtmlUnit and TestNG

I used the  Selenium  web automation framework extensively for a suite of websites I had tested. Over the course of a year I had ended up with a complete automation framework for a suite of websites. This resulted in lots of project specific code. Now that I need to use Selenium for other sites I thought I would write about setting things up at a basic level which includes using HtmlUnit, Selenium, LoggingSelenium, starting the Selenium server through java and using TestNG. Getting Setup Download Selenium RC and Selenium IDE from http://seleniumhq.org/download/ . Selenium IDE will install right into Firefox as an add-on. I am using Selenium RC 1.0.3. Download LoggingSelenium from http://sourceforge.net/projects/loggingselenium/files/ Download TestNG from http://testng.org/doc/index.html Extract the files into your projects library folder and add the following 4 jars to your project: selenium-server.jar selenium-java-client-driver.jar logging-selenium-1.2.jar ...
Read more