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");
      $("#mentDiv").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?

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");
      $("#mentDiv").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?

• javascript
• c#
• jquery
• asp
• asp-mvc

3 Answers 3

Turn it into a callback

// Somecode to display a image

$("#mentDiv").load("../Search/SearchSingular?phrase=" + phrase, function() {
  // Somecode to remove image
});

You can use a loading image while div contents load

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

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

});

Div for your loading image

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

There is a plete callback of jQuery .load function (read more http://api.jquery./load/)

You could revise your javascript as following:

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