CODEWITHSUNDEEP
javascriptdojo
GoinOff
GoinOff

Reputation: 1802

dojo Standby widget not spinning

Using dojo 1.8.1...Using the Standby Widget to show processing while the server is busy doing it's thing with an AJAX request.

I've created a dojox.widget.Standby object problematically and it works perfectly the first time I .show() or .hide() it. The second time I try to .show() it, it appears but the spinner is not spinning..Animated .gif trouble??

How can I keep the spinner spinning when a button is clicked for a second or more times??

UPDATE....

What my app is doing is displaying data in a dojo DataGrid object for the user to select. The selection are xmit'd to the server with an AJAX request and the server returns a file name that the user can download or open (.csv file). I use the following javascript to create the open/save dialog on the client side:

  window.location.assign(path); //Open save/open dialog

If I comment out this line, then the spinner works on every click of the button.

2nd UPDATE....

Added hidden iframe HTML:

 <iframe src="" style="display: none;" id="ifr"></iframe>

When I received the path to the downloadable file from the server I use this to pop the dialog box and download:

 window.document.getElementById("ifr").src=path;  //Where path is location of downloadable file

Now, everything looks smooth for the downloadable file dialog and more clicks on the button keep the spinner spinning...

Thanks @Frode for providing the answer to this problem...

require(["dojox/widget/Standby", "dojo/domReady!"],
function(Standby) {
  var standby = new Standby({
      id: "standbyObj",
      target: "standby",
      color: "transparent",
      zindex: "auto",
      duration: "1000"
  });
  window.document.body.appendChild(standby.domNode);
  standby.startup();
});

Later when a button is clicked:

var standObj = dijit.byId("standbyObj");
if (standObj) {
  standObj.show();
}

...Server Processing AJAX request....

After processing completes:

var standObj = dijit.byId("standbyObj");
if (standObj) {
  standObj.hide();
}

This all works great but if the button is clicked again the spinner shows but is not spinning.

Other stuff:

css:

 #standby
 {
   position: absolute;
   top: 50%;
   left:50%;
   width:32px;
   height:32px;
   margin-top: -16px;
   margin-left: -16px;
}

html:

<div id="standby"></div>

Upvotes: 1

Views: 1654

Answers (1)

GoinOff
GoinOff

Reputation: 1802

The solution to this problem is as follows:

Create in invisible iframe:

 <iframe src="" style="display: none;" id="ifr"></iframe>

When the server answers a AJAX request with a path to a downloadable file, display an open/save dialog box in the clients web browser by using the following javascript:

 window.document.getElementById("ifr").src=path;  //Where path is location of downloadable file

Not only does this look good, but the Standby spinner will keep spinning upon multiple button clicks.

Thanks a bunch @Frode for providing the solution to the problem.. 8)

Upvotes: 1

Related Questions