I am trying to implement a file upload functionality. One of the requirement is to display a 'Please Wait!!!' message to the user while the upload is going on. My project currently uses JSF 1.2, Tomahawk, JQuery 1.9, JQuery UI 1.10. I am aware that this can be accomplished using a4j with richfaces, however I am not supposed to add any new library to the existing project. Please let me know how this can be done?
Just so you know, Tomahawk and RichFaces can peacefully co-exist in a single webapp. RichFaces pulls in a copy of jQuery, but if you need a newer version of jQuery, that's also doable. So there's no technical reason why you couldn't use the RichFaces file upload (in fact, I had a webapp that did!). At least with RichFaces 3. The transition to RF 4 is so painful I have yet to find resources to migrate, so I can't confirm.
The bigger issue is that "Please wait" doesn't apply to basic HTTP, because the file upload isn't an independent operation from the Submit processing. When you do an HTML file upload (which is what JSF generates), the contents of the file in question are MIME-encoded into the form that's POSTed to the server. So the file upload is "complete" at the very moment that the last byte of the form posting is received by the server. Not counting the time it takes the server to parse the form, spool the file into its receiving storage (RAM or disk), and for the application logic to do something with it - all of which should be taking no more than a second or 3.
The RichFaces file upload gets its progress indicator by using AJAX to manage the file upload. Probably by splitting the upload into smaller chunks, but I haven't checked to be certain. Since RichFaces uses jQuery to do its AJAX processing, there's a good possibility that there's a raw jQuery equivalent, but you'll have to dig through the jQuery universe to find it, since I've never tried it myself so I don't know anything for certain.
An IDE is no substitute for an Intelligent Developer.
The idea is when the user clicks the submit button, it triggers the CSS div to dim the screen.