Wicket in Action

A comprehensive guide for Java developers building Wicket-based web applications

Preventing double Ajax requests in 3 lines of code

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.

4 Comments »

  1. Forget about IE6. It must die anyway!! :-D

    Good example, btw.

    Comment by Bruno Borges — December 5, 2008 @ 6:22 pm

  2. 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

  3. 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

  4. 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

RSS feed for comments on this post. TrackBack URL

Leave a comment

With this book, Wicket will become the greatest territory the Dutch have settled since Manhattan.

Nathan Hamblen
Senior Software Engineer, Teachscape Inc.

This is the complete and authoritative guide to Wicket, written and reviewed by the core members of the Apache Wicket team. If there's anything you want to know about Wicket, you are sure to find it in this book.

Jonathan Locke
Founder and Architect of Apache Wicket, Foreword Wicket in Action

Without question, Wicket in Action... is the be-all and end-all when it comes to Wicket.

Geertjan Wielenga, Wicket Netbeans Plugin Author

The tutorial and conversational tone of the writing makes the book very approachable.

Nick Heudecker
System Mobile

Loved the sample application—it tied everything together.

Phil Hanna
Senior Software Developer, SAS Institute

The essential guide for learning and using Wicket.

Erik van Oosten
Lead programmer and Project Manager, JTeam

Finally, the Web Framework of web frameworks, Apache Wicket, now has a bible of its own.

Per Ejeklint
Senior Software Architect, Heimore group

Wicket is an innovative evolution of the MVC programming with simple roots, but without a primer such as this, it can be more challenging than it needs to be.

Brian Topping
Founder, Bill2 Inc.

Wicket In Action glues the areas of web development with Apache Wicket together and gives a great overview of Apache Wicket...it will make a great compendium.

Nino Martinez Wael
Java Specialist, Jayway Denmark