• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Creating a transparent page overlay

 
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
My use case: I have a page that can take a long time load depending on the query the user submits to our system. 1-20sec I would like to have a progress bar show up transparently on the page that is taking so long to load so the user doesn't assume there is something wrong with their computer or w/e and submit to the page again. I assume javascript would be a good way to accomplish this:

perhaps create a new page and put the progress bar on this blank page and then make the page transparent over the page taking so long to load. Then when the page is done loading it removes the page on top of it. I have very little javascript knowledge and would love information on places to start.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Can't really be done the way you are envisioning. The problem is, when you submit a page, the browser pretty much blocks. So nothing that you'd like to do, be it JavaScript, or even an animated GIF, will run while the browser waits for the next page.

If you wanted to do something simple like put up a "Please wait..." notice, you could do that under script control just prior to submission and it would display until the browser tears down the page in order to replace it with the new one.

But if you want to have some activity going on during the submission, you're not going to be able to do that with a normal page submission.

The answer, as you may have surmised by this point, is Ajax.

By making an asynchronous Ajax request, the script on your page is free to do whatever it wants while the Ajax request is processing away. That, of course, is not without a bit of complexity and issues of its own, but it's what I do most of the time now as it's just so easy to control what's going on.
[ July 18, 2008: Message edited by: Bear Bibeault ]
 
Paul Yule
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, I have never used Ajax...should be fun. Couple architectural questions before I go on my rampant Google search for Ajax and it's uses. I submit to my servlet which is what is taking a billion years and forward to the page. Would the Ajax allow me to wait until I get to the page (albeit with nothing on it yet, save for the headers and footers) before it attempts to do the stuff I was previously doing in the servlet or would I be submitting 2 things with the first submit to the servlet.
One Ajax call running the script I want with progress bar and one submitting to the servlet to do its business. I'm a little fuzzy on how it works to begin with and I'm sorry if I make absolutely zero logical sense.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Paul Yule:
Okay, I have never used Ajax...should be fun. Couple architectural questions before I go on my rampant Google search for Ajax and it's uses.

I recommend: read this article to get an idea of how Ajax works, and then adopt jQuery to do your Ajax for you. It's madness at this stage of the game to code Ajax by hand. (You could also explore other libraries such as Prototype or Dojo, but I think the jQuery Ajax implementation is the easiest.)

In such a scenario:

1) You would submit the form via Ajax rather than as a usual submission. The jQuery Forms plugin makes this as easy as: $('#myForm').ajaxSubmit();

2) A callback that youd pass to the ajaxSubmit() method will be called when the request finishes.

3) While the surly request is taking its sweet time, your page is free to do anything it wants. It can just let the user go about his/her business. It can put up an indication that something's going on. Images such as are popular. it can put up a "gray screen" to prevent activity. It can put up a progress bar (complicated if you want it to represent real-world progress, but possible). And so on...

4) When the callback is activated, you can grab the response data and do whatever you want. Usually this adjusts the current page with the new data. But it can just as easily redirect to a new page if desired.
[ July 18, 2008: Message edited by: Bear Bibeault ]
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
3b) Your servlet no longer forwards to a new page. If it needs to return data, JSON is a popular format.
 
Paul Yule
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
okay, thank you very much sir. Sounds like I have some reading to do. I'm sure I will be back.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Good luck and you know where we are. Learning Ajax will open up a whole new world of possibilities for you and your web apps.
 
reply
    Bookmark Topic Watch Topic
  • New Topic