0

Anytime I click on a link/button anywhere on my site that performs/calls a GET or POST (Ajax and non-Ajax), if it takes more then a few seconds I would like to display a loading gif. I know how to do this on an individual basis, but I would like to know if it is possible to create a function that will do this automatically and then hide the gif when finished (assuming it does not redirect to a new page).

I found this but this does not work with the post method for spring security for example.

It may be a case where it is not possible or requires more effort than it's worth. I would just like to know if it is possible and if so how might it be approached.

The only constraint is that any methods calling the post or get should not need to be aware of this so called "listener".

Community
  • 1
  • 1
jonnie
  • 12,260
  • 16
  • 54
  • 91
  • 2
    Similar post http://stackoverflow.com/questions/4251379/how-would-i-use-jquery-ajaxstart-and-ajaxstop-with-post –  Mar 29 '13 at 11:28

1 Answers1

3

This is tagged jQuery so I'm giving a jQuery answer for simplicity. This is also solvable in a relatively simple manner without it.

Hooking on every request:

Let's say your method is called myMethod.

GET/POST requests may be triggered the following ways:

  • Form submits, in which case you can select the form $("#formID").submit(myMethod); . Note that if myMethod returns false it will cause your form to not submit
  • AJAX in which case you can use $.ajaxStart with $.ajaxStart(myMethod)
  • "a" tag clicks, and other click handlers, in which case you can perform $("a[href]").click(myMethod) , note that this selects all a tags with an href attribute, you might want to change the selector to suit your needs
  • Image loads which you can handle like explained in this question.
  • Script loads which you can detect like explained in this question.
  • Stylesheet/Link loads, which is explained in this blog post. You can add a hidden element to the CSS and check if the style was applied in an interval, and when it does call myMethod

What you can't do:

  • If your page has a plugin like Flash, or in general anything your JavaScript does not have access to, you can't hook on requests it makes.

The case of displaying a 'loading' gif.

From what you're asking it seems like you only care about image requests, and AJAX requests (correct me if I'm wrong), since external pages that take a long time to load NOT in an AJAX requests can (should) implement that .gif logic on the new page. This could be handled as I explained above.

Although you can hook every case, I would not do so. I would create a method that loads the 'loading' gif into a place and accepts a url. If that url is an image (for example, by file extension if that's ok with your mapping) use the logic in the image load detect linked question, if it's AJAX load the loading gif to where the data will be loaded, and replace it with the data on a .done() handler.

Here is a question about how to do this for an image, here is how to do it for AJAX . The two can be easily combined into a method which is what I believe you should use.

Community
  • 1
  • 1
Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
  • the issue for me is I am dealing with an internal webservice that is extremely slow at times and when I post to a particular page it can hang for up to 40sec's (this is out of my control) so I would like to display the loading gif on the **current** page while this service request is holding up the process. as I said in my original post I can do this on an individual basis already , I was just looking to know if it is possible to create a global "listener" that could acknowledge a request is made, while wait for a response display this – jonnie Mar 29 '13 at 11:42
  • Are you displaying the loaded page in a new page or the same page? If it's a new page a new HTTP Request will fire unless the browser has it cached. For POST requests this seems wrong to me, I suggest you have a POST request to make changes to the server, then GET the page you want to display later and let the browser cache it. After it was loaded (with AJAX, hooking for done for example) you can redirect to it. You can also extract this to a method. – Benjamin Gruenbaum Mar 29 '13 at 11:45
  • the best way I can explain this is Im using spring security, when I login, one of the things it does is makes a call to a service but it hangs on the login page (where i want to display the image) until the service request is finished, then it move on to the next page. there are a few cases throught the app dealing with this service and the same issue (some normal http form post and get, some ajax), I would like to deal with this in a global way if possible – jonnie Mar 29 '13 at 11:51
  • Your login page takes 40 seconds :O? Anyway, I would probably decouple logging in from making a request which is what the HTTP protocol suggests to begin with. If a user tries to make a service request without logging in first, return 401 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html), catch that in the referring page's AJAX, and redirect to the login page. This is how this is usually done. – Benjamin Gruenbaum Mar 29 '13 at 11:54
  • unfortunately thats not really an option, we need to fire the service request to populate the options they are logging into, it does not happen all the time, only if the service need to be refreshed ( this is handled else where and out of my control – jonnie Mar 29 '13 at 11:57
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/27175/discussion-between-benjamin-gruenbaum-and-jonniem) – Benjamin Gruenbaum Mar 29 '13 at 11:57