javascript - Show a loading image is not working well -

i have defined following script 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 mark-up 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 work , problem

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

will not show hidden loading image during data retrieval, can advice on problem ?

try these

• you can load image in browser (e.g. http://yourdomain.com/content/ajax-loader-bar.gif) if can, consider writing full url image src.
• try id selector (e.g. $("#progress2).show(); )
• if not leading anywhere can put image div, remove class (assume hide css), .show(); , .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; };