5 Replies Latest reply on Sep 24, 2013 5:29 AM by Dino Gregorich

    Progress Bar

    Dino Gregorich

      We have an extensive JavaScript execution that takes 5 to 10 seconds.  We would like to provide a progress bar so that the user knows that the device is busy.  The Hourglass object does not work properly and therefore cannot be used (it is called first, but does not appear until after the extensive code is finished, defeating the purpose of having it).  We tried a small HTML page and tried JavaScript to open it like a popup, but it did not pop up nor did it provide an error in the log.  We tried a graphic (hidden), and issued the visibility=visible, but it did not show until after the extensive code was called.  It seems it needs to be called in 2 threads to work, but we do not know how to do that.

       

      Does anyone have a similar solution to share?  A code snippet that works?

       

      Thanks.

      -Dino


        • Re: Progress Bar
          Kutir Mobility

          Try invoking hourglass or setting your graphic to visible like you are doing now, but schedule your intensive function with setTimeout and see if that helps: Example:

           

          Hourglass.visibility = "Visible";
          setTimeout(function() {
          // do cpu-intensive processing here
          }, 0);
          
          

           

          Javier

          Kutir Mobility

            • Re: Progress Bar
              Dino Gregorich

              Thanks, but I tried your suggestion, but got the same behavior.  I tried creating a div object with a busy bar graphic, and showing/hiding but the same behavior.

              With any graphic or screen rendering...it seems to run all of the JavaScript first, postponing the rendering until after all the work is performed.  I think it is the Webkit, because the code works in IE and Chrome, but not Rho on the WM device.  I tried the object.visibility idea followed by the object.refresh.  That worked to show the image/hourglass, but the javascript that followed did not execute.  Seems it is never as easy as it should be.  I was hoping someone actually made it work and could share their code snippet.

            • Re: Progress Bar
              Kutir Mobility

              Hi Dino,

              Here is one easy way:

               

              Make the whole process as Ajax.

              Example steps:

              1. Show loading image
              2. Call the load_json method via Ajax
              3. hide loading when ajax return success
              4. Show the data div

               

              Visnupriya

              Kutir Mobility

                • Re: Progress Bar
                  Dino Gregorich

                  Once again, I do not know enough about Ajax to know where to start.  Rho introduces so many things outside the Visual Studio .NET and javascript world for the handheld (ajax, jquerymobile, ruby, etc).  I have seen ajax calls and can tweak them, but I don't know what to do from scratch.


                  I have a javascript function that requires 4 parameters.  So I need to do something in ajax to affect the busy_bar graphic then make the function call?  Without a code example, I am lost at this point.