0

I have a Jquery function that transfers files from one location to another. Sometimes due to the size of the file, the function takes a long time and I have no way of telling the user that it is still working. How do I put something on the screen until the function finishes so that the user knows that the system is still working and won't refresh or close the page? 

 function transferfile(sourceurl, desturl)
  {
   //do the transfer

   }

  $.when( transferfile() ).done(function() {
   alert("completed");
 });
user388969
  • 337
  • 1
  • 9
  • 30

2 Answers2

0

A spinner is what you need. I found a similar thread. Have a look at the solution here How to implement a jQuery spinner image in an AJAX request

sagar1025
  • 616
  • 9
  • 22
  • It didn't work it is a normal function, not an ajax but inside it calls multiple other ajax functions. When I add the spinner at the beginning of the code without hiding at the bottom then it displays but if i add hide function at the end of the function it never displays and the function is still working. – user388969 Jan 08 '19 at 18:46
  • here is the js fiddle link https://jsfiddle.net/kdailearning/7defwaxp/5/ the code is too big to display here. I added a comment to display the div or any image but since the function is async and it is called multiple times. It executes everything and the working image doesn't display – user388969 Jan 13 '19 at 02:52
0

First download a spinner gif

Then, at the beginning of the function put this code:

$('#your-result-container').append('')

When your function ends

$('#your-result-container').empty(); ${'#your-result-container').append('Success!');

user3404390
  • 97
  • 9