Ian Ian - 2 months ago 28
ASP.NET (C#) Question

How to show loading image before Action is completed ASP.Net MVC 5

This is an

ASP.Net MVC 5
project.

I have a simple
javascript
/
jQuery
as follow:

<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase);
});
});
</script>


As you can see, there is a
jQuery
.load
method which calls
SearchSingular
action in the
Search
controller when the focus is out from HTML element with
id = textBox
. This works well, except that the
SearchSingular
action execution may sometimes take time to finish.

Thus, I want to show a loading image when the load is not finished. Is there any way to do this?

Answer

You can use a loading image while div contents load

("#loadingImage").show();
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function(){

  $("#loadingImage").hide(); // hide the image after loading of div completes

});

Div for your loading image

<div id="loadingImage">
 <img src="loader.gif">
</div>
Comments