Loading an indicator on a partial refresh

This post is a mix from Vince post and what is available in Declan’s fileSendr application available on OpenNTF.

So what do you need?

A JS Script Library containing the following code:

dojo.require(‘dijit.Dialog’)
var foo;
function busyBoxON() {
foo = new dijit.DialogUnderlay({dialogId:”waitScreen”,’class’: ‘busyBox’});
foo.show();
}

function busyBoxOFF(){
foo.hide();
}

Some style definitions in a references CSS file:

div.busyBox {
background-image: url(“uploading.gif”);
background-repeat: no-repeat;
background-position: center;
background-color: black;
}

A funky animated gif.

And the following code under your link, button, radiobutton.. whatever:

<xp:eventHandler event=”onclick” submit=”true”refreshMode=”partial” refreshId=”meetingResults”>
<xp:this.script><![CDATA[busyBoxON();]]></xp:this.script>
<xp:this.onComplete><![CDATA[busyBoxOFF();]]></xp:this.onComplete>
</xp:eventHandler>

 

 

Advertisements

3 thoughts on “Loading an indicator on a partial refresh

  1. Steve Smillie 2010-December-20 / 4:26 pm

    Been meaning to look at a loading indicator for partial refresh in a few places. This may give the jump start I need to get that done. Thanks!

  2. Luis 2011-February-10 / 12:08 am

    Very helpful tip, thanks. Anyway you can control the size of the of the page dim?

  3. Chay 2013-October-17 / 12:26 am

    Hi there! I added this on our XPage but sometimes when leaving the page (say user is working on another window), when they go back to that page where the loading indicator is, it just continuously runs. I have the busyBoxOFF() on an the onComplete event of that action. What causes this? Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s