Introduction

Displaying a busy or Ajax spinner is very common requirement in Ajax based Dojo Applications. There is an inbuilt Spinner widget shipped with Dojo but it is not useful and has very less documentation. In the post we shall see how to show a loading overlay can be displayed while waiting for Ajax request response.

HTML and JavaScript code:

Add the following code to your web page to show create the loader overlay:

<!-- The loader to be shown when sending Ajax request or while processing -->
	<div data-dojo-id="ajaxLoader" data-dojo-type="dijit.Dialog" class="dojoxGridLoading">Loading...</div>
<!-- The loader to be shown when sending Ajax request or while processing -->

As you can see that we have a dialog with body content as “Loading…”. Please note that class=dojoxGridLoading used for the dialog which displays the loading bars as used in a DataGrid by default. There is one problem with this dialog which is the title bar. We need to hide the title bar of this dialog box with following javascript code added on dojo.ready:

dojo.ready(function(){
	ajaxLoader.titleBar.style.display='none';
	ajaxLoader.hide();
});

In the above code, we are also hiding the Ajax loader at page load. We will show it when we send an Ajax request and hide it on receiving the response or on getting an error as shown below:

ajaxLoader.show();
dojo._base.xhr.post({
	url: '/URL',
    	content: {
    		param1 : 'param1',
		param2 : 'param2',
	},
 	load: function(response) {
		ajaxLoader.hide();
	},
	error: function(error){
		ajaxLoader.hide();
	}
}); 

Here we are showing the Ajax busy loader before sending the ajax request and hiding it when receiving the response or hitting an error.

Our custom busy loader shall look as shown below:

Conclusion

Using a Ajax busy spinner widget is not that user friendly as it doesn’t display message and has less documentation. To overcome these limitations, we created a custom busy loader by using dialog box.

Related Posts

Ajax show busy loader in Dojo admin Dojo
Introduction Displaying a busy or Ajax spinner is very common requirement in Ajax based Dojo Applications. There is an inbuilt Spinner widget shipped with Dojo but it is not useful and has very less documentation. In the post we shall see how to show a loading overlay can be displayed...
<h2>Introduction</h2> <p>Displaying a busy or Ajax spinner is very common requirement in Ajax based Dojo Applications. There is an inbuilt Spinner widget shipped with Dojo but it is not useful and has very less documentation. In the post we shall see how to show a loading overlay can be displayed while waiting for Ajax request response.</p> <h2>HTML and JavaScript code:</h2> Add the following code to your web page to show create the loader overlay: 1 <p>As you can see that we have a dialog with body content as "Loading...". Please note that class=dojoxGridLoading used for the dialog which displays the loading bars as used in a DataGrid by default. There is one problem with this dialog which is the title bar. We need to hide the title bar of this dialog box with following javascript code added on dojo.ready:</p> 1 <p>In the above code, we are also hiding the Ajax loader at page load. We will show it when we <a href="http://www.javaexperience.com/how-to-send-post-request-in-dojo/">send an Ajax request</a> and hide it on receiving the response or on getting an error as shown below:</p> 1 Here we are showing the Ajax busy loader before sending the ajax request and hiding it when receiving the response or hitting an error. Our custom busy loader shall look as shown below: <img src="http://www.javaexperience.com/wp-content/uploads/2012/08/Dojo-Ajax-Loader.jpg" alt="" title="Dojo Ajax Loader" width="138" height="63" class="alignnone size-full wp-image-174" /> <h2>Conclusion</h2> <p>Using a Ajax busy spinner widget is not that user friendly as it doesn't display message and has less documentation. To overcome these limitations, we created a custom busy loader by using dialog box.</p>
List of dojo button iconclass
Create generic dialog box in Dojo
The following two tabs change content below.
I run this blog with lots of passion. In this website, you will find tutorials on Core Java, Spring, Struts, Web Applications, Portals and Database. Please support me and the website by sharing the posts on your facebook / twitter. You can tap the share button at the top of each post. Thanks for the support.

Comments

comments