ansaurus

Question

Answer 1

+4 A:

What you are describing assumes that dojo itself has already been loaded by the time that the modal dijit.Dialog appears with the loading message.

Now, normally, dojo starts executing once your page is fully loaded, and you would normally put your dojo code inside an anonymous function passed as parameter of dojo.addOnLoad().

That entails that the remaining part of your page (what you call your "links") will have to be loaded through ajax (using, for instance, dijit.layout.ContentPane). That way, dojo can execute before the content is downloaded, and your "waiting" message can 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's 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 flaw in that plan is dojo itself: expect your shrinksafed library to weigh over 90K (possibly up to 300K, depending on how much stuff you put in there). On a slow connection, that still takes a noticeable amount of time to download. That said, we're talking of a static 90K --- the same user will download it only once per session, and even less often than that if you take the time to set appropriate cache/expire headers when those static files are served.

pierdeux 2009-01-28 17:55:39

You misunderstood a bit. It not for waiting while the current page loads. It takes a while before the next page starts loading, because a servlet needs to do some stuff that take a while. But dijit.Dialog looks nice. I'll check it out...

myplacedk 2009-01-28 20:25:30

Well, you could adapt my solution and load the entire content of the link by replacing the current content of the ContentPane, all the while displaying the Loading Dialog. But that's very involved to implement across a whole site, in which case GWT would be a better option than dojo.

pierdeux 2009-01-29 00:33:20

Answer 2

+2 A:

Dojo has one such a component already: Dojox Busy Button. You might be also interested in the following articles by Sitepen: Dojo: Building Blocks of the Web (demonstrates blocking the page content) and Implementing a Web Application Preloading Overlay.

Maine 2009-01-29 23:03:46

The busy buttons looks interesting for other uses. But for this it is not visible enough (if you submit a form without using the button, you probably won't notice it), and it doesn't keep the user from working on a page that will disappear any time. But thanks for the links, I'll read it later.

myplacedk 2009-02-01 17:17:49

Answer 3

+1 A:

I have implemented such a thing in this way:

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

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

The loading function looks like this:

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

The CSS for the 'loading' class looks like this:

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

Where loading.gif is a nice animated GIF.

Chris KL 2009-01-30 06:40:28

Answer 4

+1 A:

pierdeux got me on track with this one. This is my code so far:

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 asked for, so I'll accept pierdeux's answer.

myplacedk 2009-02-01 16:56:02

ansaurus

tags:

views:

answers:

Dojo "loading"-message

related questions