Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Need Help with Ajax + AJaxStart + spinner

 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi

I want to have a spinner animation when ever an ajax request happens. So what I did was I made an div with an image in it of the spinner.

Now it all works when a call is made it works and stuff and when it is done it goes away(I have the AjaxStop one setup)

Now the thing is where should I display it? Like I would like to put it right where the user is looking at but I don't know how to even do that. Like I going to be using this on a couple pages so I can't even try to do somthing like middle of the page since each page would be a different size. Plus my pages are longer then they have content so middle of page might be like in no mans land where they won't see it since thats now where they are scrolled.

So I have no clue how to even do this. I was thinking maybe try to find out the middle of tabs container(I am using jquery UI tabs) so I am not sure that would be a good solution but I don't know how to find that out either.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64629
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I generally put mine where the Ajax data will be loaded. That directs the users eye to that location and they don't miss when the data appears.

P.S. I don't call this a "spinner" because there is a type of control called a "spin control" and there's too much opportunity for confusion. I call mine a "whirlybug" but I can assure you that that is not a standard term!
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:I generally put mine where the Ajax data will be loaded. That directs the users eye to that location and they don't miss when the data appears.

P.S. I don't call this a "spinner" because there is a type of control called a "spin control" and there's too much opportunity for confusion. I call mine a "whirlybug" but I can assure you that that is not a standard term!


ya I noticed it was hard to find an icon first for it since I could figure out a name for it. Tried a couple till I found the image I was looking for.

so how do I put it by the ajax data that will be loaded. Like most of my ajax is really for sending info to the server so I will have a set of like textboxes where the user fills in the info and then they hit the save button.

So I would like to put it there. I been looking into the css position but still not sure if this is what I need.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Place it in the middle of the screen if you are not sure where it should go.

Did you look at this: http://www.ajaxload.info/

Eric
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:Place it in the middle of the screen if you are not sure where it should go.

Did you look at this: http://www.ajaxload.info/

Eric


Ya I was thinking of that but not sure how to make it the middle for each page. Like I said each page has a different size so not sure what to use to make it to the middle of the screen(css? margin? position? then pixels or precent?)
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try something liek this:




Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64629
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I just place it inline with the other page stuff and hide/show it as appropriate.
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:Try something liek this:




Eric


What does this do?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try it....

Eric
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic