Geek Answers Handbook

Dojo download changes

I'm new to Dojo, so I need a little help.

Some of my links take some time (when the user clicks a button, it takes a few seconds before the page starts loading), and I would like to add a “load” mass.

I can do this in the “old fashioned way”, but I want to learn a new, lighter, clever Dojo -way.

Exactly how it works is not important right now, but I imagine something like this:

A rectangle appears in the middle of the browser windows. (Not in the middle of the document.) It has an animated gif and a message like "Please wait ...".

All other elements are disabled, maybe a little "disappeared". Maybe a big white transparent transparent rectangle that is between the “load” mass and the rest of the document.

+6
javascript ajax dojo modal-dialog
source share
5 answers

What you are describing assumes that dojo itself was already loaded by the time the modal dijit.Dialog with a download message.

Now, as a rule, dojo starts after your page is fully loaded, and you usually put your dojo code inside an anonymous function passed as the dojo.addOnLoad() parameter.

This means that the rest of your page (what you call your "links") must be loaded via ajax (using, for example, dijit.layout.ContentPane ). In this way, dojo can execute before content is loaded, and your wait message may appear earlier.

It might look like this:

 <html> <head> <link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" /> <script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script> /* make sure that you shrinksafe together your libraries and dojo for faster loading... */ <script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script> <script type="text/javascript"> var dialog; dojo.addOnLoad(function(){ dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.Dialog"); dialog = new dijit.Dialog(); dialog.setContent("<p>This page will be available in a tick!</p>"); dialog.show(); }); </script> </head> <body class="tundra"> <div id="delayedContent" dojoType="dijit.layout.ContentPane" href="/myContentUrl" onLoad="dialog.hide()"> </div> </body> </html>

The only drawback of this plan is dojo itself: expect your shrinksafed library to weigh more than 90K (maybe up to 300K, depending on how many things you put there). With a slow connection, this takes considerable time to download. However, we are talking about a static 90K --- the same user will only download it once per session, and even less often than if you take the time to set the appropriate cache / expiration headers when these static files are served.

+8
source share

Dojo already has one such component: Dojox A busy button . You may also be interested in the following Sitepen articles: Dojo: Creating blocks on the Internet (demonstrates blocking page content) and Implementing web application overlay .

+7
source share

I am using dojox.widget.Standby for this purpose: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

 dojo.require("dojox.widget.Standby"); var standby = new dojox.widget.Standby({ target: "target-id-toStandby", color: "white", image: "/images/loading-ajax.gif" }); document.body.appendChild(standby.domNode); standby.startup(); standby.show();

when your content is ready to use ...

 standby.hide();

"target-id-toStandby" is the identifier of the div you want to freeze

+5
source share

I implemented such a thing this way:

First, on each page, add an event handler to any href with the slow class added:

  dojo.addOnLoad (function () {
         dojo.query ('a.slow'). onclick (function () {loading (); return true;});
     });

The download function looks like this:

  function loading () {
         var underlay = new dijit.DialogUnderlay ({'class': 'loading'});
         underlay.show ();
     }

The CSS for the loading class is as follows:

  div.loading {
     background-image: url (/images/loading.gif);
     background-repeat: no-repeat;
     background-position: center;
 }

Where loading.gif is a nice animated GIF.

+4
source share

pierdeux helped me with this. This is my code:

 dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); function displayWait(txtContent) { if (!txtContent) { txtContent = "Please wait..."; } txtContent = "<img src=\"loading.gif\" alt=\"\" /> " + txtContent; var thisdialog = new dijit.Dialog({ title: "", content: txtContent }); dojo.body().appendChild(thisdialog.domNode); //thisdialog.closeButtonNode.style.display='none'; thisdialog.titleBar.style.display='none'; thisdialog.startup(); thisdialog.show(); }

This is a modal message box that cannot be closed, so the user cannot use other elements on the page. This is exactly what I requested, so I will accept pierdeux response.

+2
source share

More articles:


All Articles