Question

The problem is like this; A webpage contains multiple form elements, which can be altered and saved by the user via a save button, or changes can be discarded.

If the user attempts to navigate away from the page without saving the changes, I need a modal window to pop us asking if the user would like to save the changes before leaving the page.

How would I go about checking to see if the page/form model had been changed by a user since it was first loaded, and how could I initiate this check when any page link is clicked?

Any response or suggestions would be much appreciated,

Thanks.

Answer 1

I think you would be looking for a javascript-only solution, usually packaged as a wicket behavior.

implementation depends on the javascript library you use, here is some prototype code:

var windowdirty = false;
var windowdirtyinitialized = false;

function initwindowdirty(){
    if(windowdirtyinitialized)return;
    windowdirtyinitialized=true;

    Event.observe(window,"beforeunload",function(){
        return (!windowdirty || 
          confirm("You have started entering values, do you really want to leave");
    });
}

function monitor(componentId){
    $(componentId).observe("change",function(){
        windowdirty = true;
    });
}

function undirty(){
    windowdirty=false;
}

We’ll put this in a File called DontLeaveBehavior.js

Here’s a behavior that uses this javascript file:

public class DontLeaveBehavior extends AbstractBehavior{

    /**
     * {@inheritDoc}
     */
    @Override
    public void renderHead(final IHeaderResponse response){
        response.renderJavascriptReference(new JavascriptResourceReference(DontLeaveBehavior.class,
            "DontLeaveBehavior.js"));
        response.renderOnDomReadyJavascript("initwindowdirty();");
        super.renderHead(response);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void bind(final Component component){
        super.bind(component);
        component.setOutputMarkupId(true);
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void onRendered(final Component component){
        final Response response = RequestCycle.get().getResponse();
        response.write(JavascriptUtils.SCRIPT_OPEN_TAG);
        response.write("monitor('" + component.getMarkupId() + "');");
        response.write(JavascriptUtils.SCRIPT_CLOSE_TAG);
    }

}

Now here’s a page that automatically assigns this behavior to all of it’s children that are text components:

public class Mypage extends WebPage{

    ...

    private boolean behaviorAssigned = false;

    /**
     * {@inheritDoc}
     */
    @Override
    protected void onBeforeRender(){
        if(!behaviorAssigned){
            behaviorAssigned=true;
            visitChildren(new IVisitor<Component>(){

                @Override
                public Object component(Component component){
                    if(component instanceof AbstractTextComponent<?>){
                        component.add(new DontLeaveBehavior());
                    }
                    return null;
                }
            });
        }
        super.onBeforeRender();
    }

}

and last but not least, your submit button has to call undirty() of course.

None of this has been tested, because I have to go home now to have dinner with my wife & kids (which is even more fun than wicket coding, of course), but it should get you started.

The prototype specific portion should be easily ported to any other javascript lib, but you probably shouldn’t do it without a lib if you don’t know what you’re doing.

---

Edit:

I have created a new version of this that works with prototype and mootools and posted it on my weblog. This version is only installed to the form component and automatically attaches itself to the children via javascript.

EDIT again: there, now the link is working