onclick inside Ajax call

Question

I have an ajax call that on success create an element. When the element is clicked, a spinning gif needs to be displayed while another action is being done (creating jquery datatables). Then the gif should disappear. In my case everything works except for the fact that the gif is loading after the jquery datatables is created and therefore only shown very briefly. I want it to start as soon as I click the element, but this is not the case.

ajax{
element.create();
element.click(){
      startLoadingGif();

      drawJqueryDataTables();

      stopLoadingGif();
}
}

I would appreciate any help.

Answer 1

What you need to do is this. startLoadingGif() before the request is made and stopLoadingGif(); after the completion (success or failure) of the request:

   startLoadingGif();
     $.ajax({
      ...
      complete: function (data) {
          stopLoadingGif()
        }
     });

UPDATE:

$.ajax({
      ...
      complete: function (data) {
           element.create();
           element.click()
           startLoadingGif();
           drawJqueryDataTables(); //Or you can make this a promise if it takes a longer time and after that is resolved you can stop the spinner. Or,
           window.setTimeout(()=>{
             stopLoadingGif();
           }, 2000)

     });