Wednesday, April 6, 2016

How to show "Loading..." in Jquery Ajax Call

Hi There,

Well, that's pretty simple now. Below is the sample code that you can customize according to your needs. It will show a smooth Loading... with jquery effect.

JQuery Code:

            $("#loading").fadeIn("slow");
            $.ajax({
                crossDomain: true,
                contentType: "application/json; charset=utf-8",
                url: "http://localhost:8080/Service.asmx/GetEmployessJSON",
                data: { UserName: GetUserName(), Month: Month, Year: Year }, // example of parameter being passed
                dataType: "jsonp",
                success: onDataReceived
            });

        function onDataReceived(data) {
            $("#loading").fadeOut();
            $("#myDiv").text(data.MyCustomProperty);
        }

HTML Code:

        <div id="loading" style="display: none;">
            Loading....
        </div>


Happy Coding :)

No comments:

Post a Comment