Héhé ;)
My example uses a hidden span and makes it visible when you want, but
you can use any object with its own CSS.
Here a complete example using a centered div and CSS classes:
import web, time
from web import form
urls = (
'/', 'hello',
'/form', 'form',
)
app = web.application(urls, globals())
myForm = form.Form(
form.Checkbox('Image #1', checked=True),
form.Checkbox('Image #2', checked=True),
form.Checkbox('Image #3', checked=True)
)
class hello:
def GET(self):
return """
<head>
<style>
.nowhere {visibility: hidden;}
.centered {visibility: visible;
margin-left: auto;
margin-right: auto;
width: 316px;
height: 200px;}
</style>
</head>
<body>
<form action="/form" method="POST">
%s
<input type="submit"
onclick="document.getElementById('waitBox').className = 'centered';">
</form>
<div id='waitBox' class='nowhere'><img
src="http://ressources.blogdumoderateur.com/2013/02/gif-anime.gif";></img></div>
</body>
</html>
""" % (myForm.render())
class form:
def POST(self):
time.sleep(10)
return "Thanks for waiting !"
if __name__ == "__main__":
app.run()
When the page loads, the div is already loaded but is not visible
because of its CSS properties (visibility = hidden). When the input
onclick is triggered, the div's class is updated with another one, more
visible, more centered, etc. ;)
Regards,
Christophe.
Le 08/04/2015 20:50, [email protected] a écrit :
Hello Christophe,
May I ask you additional question regarding the object layout of this
solution? I noticed that this solution will introduce the gif object
beside the button (right hand side). I just wonder how to locate the
gif to a specific location, for example, exactly above the button, or
below the button, or in the middle of the screen, etc. Thanks a lot.
Best Regards,
-Yongzhi
On Tuesday, April 7, 2015 at 1:31:59 PM UTC-7, Zbouboutchi wrote:
Hi,
some javascript should do the trick:
<form action="/foo" method="POST">
<input type="submit"
onclick="document.getElementById('box').style.display='inline';">
<span id='box' style="display: none"><img
src="http://ressources.blogdumoderateur.com/2013/02/gif-anime.gif";
<http://ressources.blogdumoderateur.com/2013/02/gif-anime.gif>></img></span>
</form>
Regards,
Christophe
ps: I tried on Firefox 37 and it worked. :)
Le 07/04/2015 19:45, [email protected] <javascript:> a écrit :
Hello all,
I just wonder if there is a way to show a "please wait" image (or
animated spinning) in the form page until the post action
completed (for example, plot a figure then load it in a new
page). I searched here and found the following similar discussion
(~three years ago
https://groups.google.com/forum/#!searchin/webpy/Show$20image$20during
<https://groups.google.com/forum/#%21searchin/webpy/Show$20image$20during>|sort:relevance/webpy/jGAG29QZykU/F9O9Vt-rUVcJ).
I just wonder if there is a better alternative. Thanks a lot.
Best Regards,
-Yongzhi
--
You received this message because you are subscribed to the
Google Groups "web.py" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected] <javascript:>.
To post to this group, send email to [email protected]
<javascript:>.
Visit this group at http://groups.google.com/group/webpy
<http://groups.google.com/group/webpy>.
For more options, visit https://groups.google.com/d/optout
<https://groups.google.com/d/optout>.
--
You received this message because you are subscribed to the Google
Groups "web.py" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to [email protected]
<mailto:[email protected]>.
To post to this group, send email to [email protected]
<mailto:[email protected]>.
Visit this group at http://groups.google.com/group/webpy.
For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups
"web.py" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/webpy.
For more options, visit https://groups.google.com/d/optout.
![http://ressources.blogdumoderateur.com/2013/02/gif-anime.gif"](http://ressources.blogdumoderateur.com/2013/02/gif-anime.gif"){kind=link}
