javascript - Display loading image while post with ajax is NOT Working -

here div contains gif animation:

<div id="busy">     <br />     loading... please wait...     <br />     <img src="resources/scripts/loader.gif" alt="" /> </div> 

and here function contains ajax post method:

    function handler(datas, ele) {         $('#busy').show();         $.ajax({             url: "fileuploadhandler.ashx",             type: "post",             data: datas,             contenttype: false,             processdata: false,             success: function () {                     ele.width = 100;                     $('#busy').hide();             }         });     } 

as can see have used show , hide on target div. not working @ , not know problem?

you need setup beforesend method in order show loading progress , on complete hide it. in case, guarantee on success/failure animation hidden.

 function handler(datas, ele) {         $.ajax({             url: "fileuploadhandler.ashx",             type: "post",             data: datas,             contenttype: false,             processdata: false,             beforesend  : function() {                   $("#busy").show();             },             success: function () {                ele.width = 100;              },             complete: function() {                 $("#busy").hide();             }          });     } 

function showhide(){    if($('#busy').css("display") == "none"){        $('#busy').show();    } else {               $('#busy').hide();    }      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="busy">  <img src="https://rec.redsara.es/registro/img/loading.gif"/>  </div>        <input type="button" value="click" onclick="showhide()" />