One question is recurring on our user list: how can I prevent a user from clicking an Ajax link multiple times? There are several solutions to this problem, but today I thought up possibly the simplest solution yet for Wicket applications using the infrastructure that is already in place for displaying custom Ajax indicators.
Wicket provides the IAjaxIndicatorAware interface where you can identify a piece of markup that is displayed when Wicket is processing an Ajax request, and hidden when the request was completed. Letting your page implement this interface and including a coverall div in your markup is enough to stop your users from sending multiple requests quickly after one another. Take a look at the following Wicket page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | package com.mycompany; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.ajax.*; import org.apache.wicket.ajax.markup.html.*; public class HomePage extends WebPage implements IAjaxIndicatorAware { public HomePage() { add(new AjaxLink("link") { public void onClick(AjaxRequestTarget t) { try { Thread.sleep(5000); } catch(Exception e) {} } }); } public String getAjaxIndicatorMarkupId() { return "veil"; } } |
Line 8 lets our page implement the necessary interface, and lines 16-18 implement the required method provided by this interface. In this method we return the markup identifier (DOM id) for our coverall, in this case called veil. The AjaxLink just sleeps for 5 seconds in the event handler, but you can do your dirty work there. This is just an example of course.
In our markup we now need to create the coverall so that Wicket is able to show and hide this veil. The markup in the next example shows the complete page markup:
<html>
<head>
<title>Wicket Quickstart Archetype Homepage</title>
</head>
<body>
<a href="#" wicket:id="link">Show veil</a>
<div id="veil" style="display:none;position:absolute;top:0;left:0;z-index=99999;background-color:black;width:100%;height:100%;color:white">
<h1>Can't touch this</h1>
</div>
</body>
</html>And that is all there’s to it. Done. Finito. Ready. Complete. Can this be improved? Yes:
- Normal requests aren’t covered (see a possible solution)
- IE6 is a bitch
- Styling could be better
And probably more, but for normal browsers and just Ajax requests, this is the easiest way to hack this in.
Forget about IE6. It must die anyway!! :-D
Good example, btw.
Comment by Bruno Borges — December 5, 2008 @ 6:22 pm
Martijn,
This seems to works well in the newer browsers.
Can’t beat a smart but simple solution!
If you don’t want to scare your user(s) too much, adding
opacity:0.5;filter:alpha(opacity=50);
doesn’t seem to break it.
Regards – Cemal
Comment by Cemal — December 5, 2008 @ 8:19 pm
yess! that’s perfect! realy cool
another hint: use css-classes! but in this case, it looks like the “display:none;”-setting MUST be a part of the style-Attribute.
for a transparent-grey veil-layer you can use the transparent2.png from the ModalWindow-Component
background: url(‘../img/transparent2.png’) top left;
to get a loading-animation inside the veil-layer you can put another div inside the veil-div whith the style
background: url(‘../img/ajax-loader.gif’) center no-repeat;
to get the ajax-loader.gif just try: http://www.ajaxload.info/
IAjaxIndicatorAware ROCKS!
Comment by tee — February 26, 2009 @ 3:38 pm
Hi tee
Did you get the ajax-loader.gif to work? I have tried everything I could think of, but with no success? I can show the image, but it does not animate.
It seems like there is a incompatibility between the display:none and the animated gif.
If I make the display: “” then the panel shows, the gif animates correctly.
Any help would be greatly appreciated….
Jeff
Comment by Jeff Singer — March 17, 2010 @ 1:29 am