Show a loading image is not working well

Question

I have defined the following script as part of implementing paging :-

    var getPage = function () {
        var $a = $(this);
        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };
        $.ajax(options).done(function (data) {
            $(".loadingimage").show();
            var target = $a.parents("div.pagedList").attr("data-tms-target");
            $(target).replaceWith(data);
        });
        return false;
    };


$(document).ready(function () {

    $(".main-content").on("click", ".pagedList a", getPage);


})

And part of the mark-up is as follow:-

<div id="AuditTable">
<div class="pagedList" data-tms-target="#AuditTable">
                        @Html.PagedListPager(Model , page => Url.Action("Index",new { page }),
                        PagedListRenderOptions.ClassicPlusFirstAndLast)

</div>  <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress2" />
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead><tr>

The paging will work well , but the problem is that the

$(".loadingimage").show();

Will not show the hidden loading image during data retrieval, can anyone advice on this problem ?

Answer 1

Try these

• You can load the image in your browser (eg http://yourdomain.com/Content/Ajax-loader-bar.gif ) If you can, consider writing full url as image src.
• Try id as selector (eg $("#progress2).show(); )
• If those are not leading you to anywhere you can put the image into a div, remove its class (assume that you hide it with css), .show(); and .hide(); within getPage function.

HTML:

<div id="loadcontainer"><img src="Content/Ajax-loader-bar.gif" id="progress2" /></div>

Javascript:

var getPage = function () {
  $("#loadcontainer").show();
  var $a = $(this);
  var options = {
      url: $a.attr("href"),
      data: $("form").serialize(),
      type: "get"
  };
  $.ajax(options).done(function (data) {
      $("#loadcontainer").hide();
      var target = $a.parents("div.pagedList").attr("data-tms-target");
      $(target).replaceWith(data);
  });
  return false;
};