In application, there are many instances where we are calling odata through ajax. Sometimes it takes time to process and give the output. To make the user aware of processing time, sometimes we see busy indicator in many applications. We can do the same in UI5 applications by writing this small javascript:
<script type="text/javascript"> function ajaxindicatorstart(text) { if (jQuery('body').find('#resultLoading').attr('id') != 'resultLoading') { jQuery('body') .append( '<div id="resultLoading" style="display:none"><div><img src="img/ajax-loader.gif"><div>' + text + '</div></div><div class="bg"></div></div>'); } jQuery('#resultLoading').css({ 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '10000000', 'top' : '0', 'left' : '0', 'right' : '0', 'bottom' : '0', 'margin' : 'auto' });
jQuery('#resultLoading .bg').css({ 'background' : '#000000', 'opacity' : '0.7', 'width' : '100%', 'height' : '100%', 'position' : 'absolute', 'top' : '0' });
jQuery('#resultLoading>div:first').css({ 'width' : '250px', 'height' : '75px', 'text-align' : 'center', 'position' : 'fixed', 'top' : '0', 'left' : '0', 'right' : '0', 'bottom' : '0', 'margin' : 'auto', 'font-size' : '16px', 'z-index' : '10', 'color' : '#ffffff' });
jQuery('#resultLoading .bg').height('100%'); jQuery('#resultLoading').fadeIn(300); jQuery('body').css('cursor', 'wait'); }
function ajaxindicatorstop() { jQuery('#resultLoading .bg').height('100%'); jQuery('#resultLoading').fadeOut(300); jQuery('body').css('cursor', 'default'); }
jQuery(document).ajaxStart(function() { //show ajax indicator ajaxindicatorstart('Processing.. please wait..'); }).ajaxStop(function() { //hide ajax indicator ajaxindicatorstop(); }); </script>Write this function in index.html, then this global function will be automatically called while ajax start. You do not have to call this function explicitly. Sometimes you may not wish to give user busy indicator, then for that particular jQuery.ajax call you have to declare/avoid global setting false. Example:
jQuery.ajax({ url : url, enableJsonpCallback: true, jsonpCallback : 'getJSON', contentType : "application/json", dataType: "json", async: false, global: false,
success: function(data, textStatus, jqXHR) {
}});Here we set global: false to stop busy indicator here.