Wicket: Prévenez si le modèle de page a été modifiée

Question

Le problème est comme ça; Une page web contient plusieurs éléments de forme, qui peuvent être modifiés et enregistrés par l'utilisateur via un bouton d'enregistrement, ou des changements peuvent être mis au rebut.

Si l'utilisateur tente de naviguer loin de la page sans enregistrer les modifications, je besoin d'une fenêtre modale pour nous pop demander si l'utilisateur souhaite enregistrer les modifications avant de quitter la page.

Comment vérifier si le modèle de page/formulaire a été modifié par un utilisateur depuis le premier chargement et comment puis-je lancer cette vérification lorsqu'un lien de page est cliqué?

Toute réponse ou suggestions seraient appréciés,

Merci.

Answer 1

Je pense que vous seriez à la recherche d'une solution javascript seulement, habituellement emballé comme un comportement portillon incorporé.

mise en œuvre dépend de la bibliothèque JavaScript que vous utilisez, voici un code prototype:

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; 
} 

Nous allons mettre cela dans un fichier appelé DontLeaveBehavior.js

Voici un comportement qui utilise ce fichier javascript :

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); 
    } 

} 

maintenant, voici une page qui attribue automatiquement ce comportement à l'ensemble de ses enfants qui sont des composants de texte:

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(); 
    } 

} 

et last but not least, votre bouton d'envoi doit appeler undirty() bien sûr. Rien de tout cela n'a été testé, parce que je dois rentrer à la maison maintenant pour dîner avec ma femme & enfants (ce qui est encore plus amusant que le codage de guichet, bien sûr), mais il devrait vous aider à démarrer.

La partie spécifique du prototype devrait être facilement porté à un autre javascript lib, mais vous ne devriez pas le faire probablement sans lib si vous ne savez pas ce que vous faites.

---

Edit:

J'ai créé une nouvelle version de ce prototype qui fonctionne avec et Mootools et posted it on my weblog. Cette version est uniquement installée sur le composant de formulaire et se fixe automatiquement aux enfants via javascript.

EDIT à nouveau: là, maintenant le lien fonctionne