Question

Maybe I’m on the wrong track…

The setup:
I have a rather complex full dojofied web application. The important part for this question is a longish form in the central region of a dijit.layout.BorderContainer with a navigation tree and some action buttons in the other regions.

What I want to do:
If the user did enter data and did not save, they should get a warning message if he is going to leave the form (if he navigates away, klicks the “new Element” button,…). For a better user experience, I wanted to give a modal dialog with the options “save”, “leave anyway”, “cancel”.
May idea was to use the onBlur event of the form, stop all other events (most likely an onClick on some other widget), check for changes, if there are changes, display the dialog, otherwise let the other events continue.
I do not want to add a checkChanges method to all non-form active elements!

For a first test I just tried to stop the events…

This works

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" >
      alert("I don't think so");
    </script>
 </div>

…but it’s ugly and I can’t easily continue

This doesn’t

<div id="formArea" dojoType="dijit.form.Form" encoding="multipart/form-data" action=""  class="ContentPane" region="center">
   <script type="dojo/connect" event="onBlur" args="e">
      console.log("blur"); // ok
      e.preventDefault();//event.stopt(e)//return false //<--neither of these
    </script>
 </div>

the problem is that if I click on a button outside of the form, the onBlur triggers, but I can’t stop the onClick on the button.
I know that onBlur doesn’t deliver an event object – so the e.something can’t really work…
Is there any way to catch the onClick on the other element?

Answer 1

there is afaik only confirm('question?') that will ‘deadlock’ the events of your page like that.

I have made a similar setup though, the way I came around this (except if user enters url in addressbar and hits enter) was a popup dialog whenever the navigation tree is clicked, sending user to a new view. Consider:

----------------------------------------
| Nav 1  |   Asset1 ( view controller )  |
| Nav 2  |   Asset2 ( hidden )           |
----------------------------------------

Nav 1 is the default onload view, Asset 1 is loaded, contains a ‘setup page’ form or similar and can be changed. The trick is, Asset1 and Asset2 is derivative from AbstractAsset which in turn is a simple ContentPane extension.

In AbstractAsset is a ‘must-override-for-functionality’ function called isDirty

var Viewcontroller = declare("AbstractAsset", [dijit.ContentPane], {
       isDirty: function() { return false; }
});


declare("Asset1", [Viewcontroller], {

startup: function() {
  // sets up form
  ...
  // and references inputfields to 'this'
  this.inputfields = this.form.getChildren();

  // and saves (clones) the state of each field
  var self = this;
  this.inputfields.forEach(function(inputWidget) {
     self.states[inputWidget.id] = inputWidget.get("value");
  });
},
isDirty: function() {
  var self = this;
  var dirty = false;
  this.form.getChildren().some(input) {
     if(self.states[input.id] != input.get("value")) {
        dirty = true;
        return false; // breaks .some loop
     }
     return true;
  });
  return dirty;
}

})

Then in turn, every navigation click must call the currently visible view controller’s isDirty function in order to procede. Lets say user clicks the nav-tree (dijit.Tree) row node Nav 2.

var navigation = dojo.declare("NavigationController", [dijit.Tree], {
 currentView : null,
 onLoad: function() {
   // start Asset1 in viewNode by default
   this.currentView = new Asset1({ }, this.viewNode); 
 },
 onClick : function() {
    if(this.currentView.isDirty()) alert("I Dont Think So");
    else {
       this.loadFunction(this.model.selection.getSelected());
    }
 }

});

This is the general idea of implementing the on-unload-check, you Will need to hook any onClick events through your ‘master application controller’ to determine what should happen. Check this application which serves as cms navigation controller and its page.js:587 for isDirty example