Gate. Notify if the page model has been changed.

Question

The problem is this: The web page contains several form elements that can be changed and saved by the user using the save button or the changes can be discarded.

If the user tries to navigate from the page without saving the changes, I need a mod window to call us if the user wants to save the changes before leaving the page.

How can I check if the page / form model has changed by the user since it was first loaded, and how can I start this check when I click any link to the page?

Any answers or suggestions would be highly appreciated,

Thanks.

Answer 1

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

implementation depends on the javascript library used, here are some code prototypes:

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 will put this in a file called DontLeaveBehavior.js

Here is the behavior that this javascript file uses:

 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 is a page that automatically assigns this behavior to all of its children, which 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, just as importantly, your submit button should call undirty() , of course.

None of this has been verified because I have to go home to have lunch with my wife and children (which, of course, is even more fun than wicket coding), but you need to start.

The specific part of the prototype should be easily ported to any other javascript library, but you probably shouldn't do this without lib if you don't know what you are doing.

---

Edit:

I created a new version of this that works with prototype and mootools and posted it on my website . This version is installed only in the form component and is automatically attached to child elements through javascript.

EDIT again: there, now the link works