Show loading image while $.Ajax ASYNC SYNC is performed

Show loading image while $.Ajax ASYNC SYNC is performed

How to show progress bar while loading using Ajax call? 

The AJAX Request maybe ASYNC or SYNC!

Table of Context –
1.     HTML
2.     CSS
3.     JavaScript and Ajax Request

HTML Code –
<div id="wait" class="ajax-loader">
        <div class="ajax-loader-img"><img src='~/Images/loader-ui/loading_2x.gif' /><br>wait...</div>        
</div> 

CSS Code –
.ajax-loader {
    display:none;position:absolute;width:100%; height:100%; z-index:99999; background-color:rgba(256,256,256,0.4);
}

.ajax-loader-img {
   position:absolute;top:50%;left:50%;padding:2px;
}

AJAX ASYNC and SYNC REQUEST Code –
//#region AJAX ASYNC REQUEST

    var asyncCall = function (url, data, GETPOST, callback, arr_hdrs) {
        var global = pm.baseConst;
            $.ajax({
                url: global.baseUrl + url,
                type: GETPOST,
                contentType: global.contentType,
                data: data,
                beforeSend: function (xhr) {
                     //THIS IS USED FOR DISPLY LOADING WAIT.. AFTER POST CALL!
             if (GETPOST !== undefined && GETPOST !== null) {
              if (GETPOST.toLowerCase() === 'post' || GETPOST.toLowerCase() === 'put')
                  $("#wait").css("display", "block");
              }
                },
                async: true,
                cache: false,
                success: function (data) {
                    //FOR LOADING ICON DISPLAY BLOCK HERE..
                    $("#wait").css("display", "none");

                    if (data !== undefined && data !== null && data !== "") {                       
                        if (data.Code !== undefined && data.Code !== null && data.Code !== "") {
                            if (data.Code.toLowerCase() === "ok") {
                                callback(data);                        
                            }
                            else if (data.Code.toLowerCase() === "error") {
                                pm.dialog.alertDialog('error', 'Error', 'Error', data.Message, null);
                            }
                            else if (data.Code.toLowerCase() === "warning") {
                                pm.dialog.alertDialog('info', 'Information', 'Information', data.Message, null);
                            }
                            else {
                                pm.dialog.alertDialog('error', 'Error', 'Error', pm.constant.request.unableToProcessYourRequest, null);
                            }
                        }                   
                        else {
                            callback(data);
                        }
                    }
                    else if (data === null) {
                        callback(data);
                    }
                    else {
                        pm.dialog.alertDialog('error', 'Error', 'Error', pm.constant.request.unableToProcessYourRequest, null);
                    }                   
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    jqXHRError(jqXHR, errorThrown);
                },
                complete: function () {
                    //FOR LOADING ICON DISPLAY BLOCK HERE..
                    $("#wait").css("display", "none");
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                jqXHRError(jqXHR, errorThrown);
            });
    };

//#endregion

Result –
References -

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.