HowTo add Ajax in-progress indicators

April 24th, 2006

Ok, so my little del.icio.us app (click link to read about how I added Ajax functionality to a simple Rails app) is pretty cool, but it was missing one big thing. When the user clicks the "Get Results" link she has no idea that the page is communicating with the server. While the communication doesn't go on forever, an impatient user might click the link multiple times.

So, we need a way of letting the user know that something is happening and that they ought to wait a bit. Today, the standard seems to be an animated spinning icon:
This means we're waiting for a return back from the server: Spinner

With the help of Brian Eng from Softies on Rails and the insanely awesome prototype javascript library, I've added this functionality to my little app. First, I added this code onto the same line as my Get Results link:
I also changed the Get Results link code from: 
1
2
3
4


<%= link_to_remote("Get Results", :update => 'query_results', 
          :with => "'tags=' + $F('query_tags')", 
          :url => { :action => :get_results }) %>
to: 
1
2
3
4
5
6
7


<%= link_to_remote("Get Results",
          :update => 'query_results',
          :with => "'tags=' + $F('query_tags')",
          :loading => "Element.show('getting_results')",
          :complete => "Element.hide('getting_results')",
          :url => { :action => :get_results }) %>
Notice that I gave the span the id: "getting_results" and I used style="display:none" to hide it. I toggle it's visibility using the :loading and :complete options of the link_to_remote method. Both the :loading and :complete options specify callbacks, which means that when the server is in such a state (loading - running the method, or complete - method is done), the methods indicated by the options will be called.

This means that the server will announce that it's performing the "get_results" action by calling back to the "Element.show" method set up in the :loading option. The :complete method works similarly.

Ok, so what's Element.show? Element is an object in the prototype.js javascript library which let's you manipulate stuff in the DOM. So, when the server is performing the "get_results" action, it is instructed to call the "Elements.show" prototype method causing it to show the element with the id of "getting_results." AND when the server is done with that, it calls "Elements.hide" on the same element.

To see this sort of thing in action, leave me a comment below. When you submit the comment you'll see the little spinner while the comment is being saved to the database, and then, magically, your comment will appear just above where you wrote it, without having to completely refresh the page.

UPDATE: Be sure to also check out my scriptaclous tutorial as well.

UPDATE2: I just added a video demo of my del.icio.us application showing both the ajax progress indicator as well as some scriptaculous effects. Check it out!

UPDATE3: Since moving this blog to Mephisto, my comments no longer exhibit this behavior, so testing here won't work for you.
Posted by TDonaghe Filed in HowTo, Ruby on Rails

129 Responses to “HowTo add Ajax in-progress indicators”

  1. ZZTop Says:
    June 10th, 2007 at 07:21 PM Get Down.
  2. ap Says:
    June 10th, 2007 at 07:21 PM Cool!
  3. Brian Eng Says:
    June 10th, 2007 at 07:21 PM Looks like it's coming along nicely... You can even create other cool visual effects using the Scriptaculous helpers. So you could do :loading => "new Effect.Appear('getting_results')" and that would make your progress indicator fade in. (Gotta love it!)
  4. TAD Says:
    June 10th, 2007 at 07:21 PM Dang, Brian, you're like the idea fairy or something. :D The fade in thing is pretty darned cool. I think I'm going to play with my app now and see if I can make the results text area fade in or better yet, slide in once we get results. Kinda silly in this context, but a fun way to learn. And then, of course, yet another article.
  5. Rich Says:
    June 10th, 2007 at 07:21 PM Good tutorial
  6. Eric Says:
    June 10th, 2007 at 07:21 PM nice
  7. Sid Says:
    June 10th, 2007 at 07:21 PM Lets see this work.
  8. billy bob Says:
    June 10th, 2007 at 07:21 PM wow... nice... ok. bye
  9. billy bob Says:
    June 10th, 2007 at 07:21 PM test 2
  10. test Says:
    June 10th, 2007 at 07:21 PM test
  11. techno Says:
    June 10th, 2007 at 07:21 PM test comment
  12. mikey Says:
    June 10th, 2007 at 07:21 PM testin
  13. nobodyanywhere Says:
    June 10th, 2007 at 07:21 PM This is extremely helpful
  14. test@test.com Says:
    June 10th, 2007 at 07:21 PM test
  15. test@test.com Says:
    June 10th, 2007 at 07:21 PM test
  16. JFSIII Says:
    June 10th, 2007 at 07:21 PM sorry for the comment spam. I just wanna see it
  17. Matio Says:
    June 10th, 2007 at 07:21 PM suspicious ;-)
  18. beavis Says:
    June 10th, 2007 at 07:21 PM Lemme see!
  19. wes Says:
    June 10th, 2007 at 07:21 PM neato
  20. Charles Bogle Says:
    June 10th, 2007 at 07:21 PM That's one way to increas the number of comments.
  21. jj Says:
    June 10th, 2007 at 07:21 PM what about a non-Rails solution? (please)
  22. sdasd Says:
    June 10th, 2007 at 07:21 PM asdasd
  23. Scott Halstvedt Says:
    June 10th, 2007 at 07:21 PM Neato, always appreciate things like this.
  24. Sam Says:
    June 10th, 2007 at 07:21 PM Aww.. rails only?
  25. Mikey Says:
    June 10th, 2007 at 07:21 PM Ummm.. test? I feel a little silly leaving a non-post... Hmmm...
  26. xcvxcv Says:
    June 10th, 2007 at 07:21 PM xvxcvxcv
  27. captain lou albano Says:
    June 10th, 2007 at 07:21 PM You need to add a link for users to delete their bogus followups. Like this one. - Cap'n Lou
  28. steve Says:
    June 10th, 2007 at 07:21 PM this is very cool. nice tutorial
  29. bry Says:
    June 10th, 2007 at 07:21 PM noice
  30. George Gonsalves Says:
    June 10th, 2007 at 07:21 PM Testing it
  31. George Gonsalves Says:
    June 10th, 2007 at 07:21 PM Antoher long Test
  32. fred Says:
    June 10th, 2007 at 07:21 PM cool
  33. remy Says:
    June 10th, 2007 at 07:21 PM Nice
  34. Bob Says:
    June 10th, 2007 at 07:21 PM Like dewd, this rox!
  35. Bob Says:
    June 10th, 2007 at 07:21 PM
  36. Bob Says:
    June 10th, 2007 at 07:21 PM wowsers!
  37. Bob Says:
    June 10th, 2007 at 07:21 PM not bad!
  38. csoki Says:
    June 10th, 2007 at 07:21 PM unbelievable
  39. TheSavior Says:
    June 10th, 2007 at 07:21 PM wha....
  40. ssxsxsx Says:
    June 10th, 2007 at 07:21 PM csdca
  41. IT Says:
    June 10th, 2007 at 07:21 PM Lets see
  42. emo Says:
    June 10th, 2007 at 07:21 PM testing it
  43. Chris Says:
    June 10th, 2007 at 07:21 PM Very nice. Thanks.
  44. Xeno Says:
    June 10th, 2007 at 07:21 PM test
  45. Boz75 Says:
    June 10th, 2007 at 07:21 PM Cool man
  46. This is my name Says:
    June 10th, 2007 at 07:21 PM This is my message
  47. My Name Says:
    June 10th, 2007 at 07:21 PM message
  48. test Says:
    June 10th, 2007 at 07:21 PM test
  49. test Says:
    June 10th, 2007 at 07:21 PM test
  50. test Says:
    June 10th, 2007 at 07:21 PM test
  51. me Says:
    June 10th, 2007 at 07:21 PM testing
  52. test Says:
    June 10th, 2007 at 07:21 PM test
  53. so another test Says:
    June 10th, 2007 at 07:21 PM let's see
  54. me Says:
    June 10th, 2007 at 07:21 PM 55
  55. AlaaEddin Says:
    June 10th, 2007 at 07:21 PM cooooooool
  56. AlaaEddin Says:
    June 10th, 2007 at 07:21 PM Cool Ajax
  57. Gert-Jan Says:
    June 10th, 2007 at 07:21 PM Ah finally someone who posts the loading image.. Nice article
  58. yo mama Says:
    June 10th, 2007 at 07:21 PM nice work
  59. see it Says:
    June 10th, 2007 at 07:21 PM here is my message
  60. see it Says:
    June 10th, 2007 at 07:21 PM tretretret
  61. Zhang-Zi Says:
    June 10th, 2007 at 07:21 PM I'm just looking for this thing, thank you
  62. Test Says:
    June 10th, 2007 at 07:21 PM Cool!
  63. asegfr Says:
    June 10th, 2007 at 07:21 PM sadgadfg
  64. dopamin Says:
    June 10th, 2007 at 07:21 PM Thanks once again for inspiration to Brian Eng of Softies on Rails, here's my latest tutorial. Brian mentioned how easy it would be to add script.aculo.us effects to my little delicious app. And he was totally correct. What are script.aculo.us eff...
  65. John Ripper Says:
    June 10th, 2007 at 07:21 PM I test all of you
  66. Redacted Says:
    June 10th, 2007 at 07:21 PM Sounds useless.
  67. Redacted Says:
    June 10th, 2007 at 07:21 PM yep, sure is.
  68. jdbrasco Says:
    June 10th, 2007 at 07:21 PM I'll like to see it in action
  69. Harry Says:
    June 10th, 2007 at 07:21 PM hello
  70. Ryan Says:
    June 10th, 2007 at 07:21 PM In soviet russia, comments post YOU!
  71. Checking Says:
    June 10th, 2007 at 07:21 PM Just checking...
  72. testing Says:
    June 10th, 2007 at 07:21 PM testing
  73. testing Says:
    June 10th, 2007 at 07:21 PM testing
  74. brad Says:
    June 10th, 2007 at 07:21 PM let's have a look
  75. Ich Says:
    June 10th, 2007 at 07:21 PM Nicht schlecht!
  76. tim phang Says:
    June 10th, 2007 at 07:21 PM Haha, i love how many comments you recieved from people wanting to see it in action...
  77. test Says:
    June 10th, 2007 at 07:21 PM test
  78. test Says:
    June 10th, 2007 at 07:21 PM zzzzzzzzzz
  79. test Says:
    June 10th, 2007 at 07:21 PM zzzdasf
  80. test Says:
    June 10th, 2007 at 07:21 PM sdfaaefae
  81. hello Says:
    June 10th, 2007 at 07:21 PM hello
  82. hello Says:
    June 10th, 2007 at 07:21 PM hihi
  83. hello Says:
    June 10th, 2007 at 07:21 PM hihi
  84. S Says:
    June 10th, 2007 at 07:21 PM test
  85. test Says:
    June 10th, 2007 at 07:21 PM test
  86. www.ntsc.com Says:
    June 10th, 2007 at 07:21 PM kewl stuff
  87. www.ntsc.com Says:
    June 10th, 2007 at 07:21 PM xzZXCzX
  88. detz Says:
    June 10th, 2007 at 07:21 PM The down fall is it doesn't refresh, I see this on forums now when I post something on a busy thread someone might have posted before me but when I submit the new message does not show up so I have to refresh anyways.
  89. me Says:
    June 10th, 2007 at 07:21 PM cool
  90. test Says:
    June 10th, 2007 at 07:21 PM test
  91. Francis Says:
    June 10th, 2007 at 07:21 PM Hello thanks for this thing...cool!!
  92. Francis Says:
    June 10th, 2007 at 07:21 PM test
  93. tester Says:
    June 10th, 2007 at 07:21 PM your app is kewl!
  94. tester Says:
    June 10th, 2007 at 07:21 PM this is a test
  95. tester Says:
    June 10th, 2007 at 07:21 PM this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test
  96. Tree Says:
    June 10th, 2007 at 07:21 PM Very nice, thanks a lot
  97. Joe Says:
    June 10th, 2007 at 07:21 PM Boom shaaka laka
  98. c Says:
    June 10th, 2007 at 07:21 PM cxcx
  99. xcz Says:
    June 10th, 2007 at 07:21 PM cxzcxz
  100. Pete Says:
    June 10th, 2007 at 07:21 PM Wow that's a bunch 'o comment!
  101. tesa Says:
    June 10th, 2007 at 07:21 PM well love this
  102. ds Says:
    June 10th, 2007 at 07:21 PM sd
  103. df Says:
    June 10th, 2007 at 07:21 PM df
  104. eric Says:
    June 10th, 2007 at 07:21 PM test
  105. SMR Says:
    June 10th, 2007 at 07:21 PM coool.
  106. test Says:
    June 10th, 2007 at 07:21 PM test
  107. cd Says:
    June 10th, 2007 at 07:21 PM cd
  108. cd Says:
    June 10th, 2007 at 07:21 PM td
  109. aa Says:
    June 10th, 2007 at 07:21 PM aaa
  110. checking Says:
    June 10th, 2007 at 07:21 PM Good job :)
  111. lemmaseee Says:
    June 10th, 2007 at 07:21 PM ahahaha
  112. john Says:
    June 10th, 2007 at 07:21 PM im interested in seeing this!
  113. The Fool Says:
    June 10th, 2007 at 07:21 PM Just testing this out. You can remove the comment.
  114. The Fool Says:
    June 10th, 2007 at 07:21 PM lalala
  115. The Fool Says:
    June 10th, 2007 at 07:21 PM awefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawefawef
  116. hgfh Says:
    June 10th, 2007 at 07:21 PM hgfhf
  117. TicTacToe Says:
    June 10th, 2007 at 07:21 PM And a ToeTacTic
  118. TicTacToe Says:
    June 10th, 2007 at 07:21 PM ToTikTak
  119. TicTacToe Says:
    June 10th, 2007 at 07:21 PM TicTic
  120. TicTacToe Says:
    June 10th, 2007 at 07:21 PM TacTac
  121. TicTacToe Says:
    June 10th, 2007 at 07:21 PM ToeToe
  122. defect Says:
    June 10th, 2007 at 07:21 PM some message here
  123. microflyer Says:
    June 10th, 2007 at 07:21 PM cool
  124. k Says:
    June 10th, 2007 at 07:21 PM d
  125. abishek.s@tcs.com Says:
    June 10th, 2007 at 07:21 PM too good yaar
  126. peter Says:
    July 9th, 2007 at 04:00 AM

    tescht

  127. sepp Says:
    July 9th, 2007 at 04:02 AM

    tets

  128. nnssde Says:
    July 9th, 2007 at 01:18 PM

    gfd

  129. test Says:
    July 10th, 2007 at 09:13 PM

    asadf

Sorry, comments are closed for this article.