Can Dojo Access The Function Assosiated With A Html Elements Event?

I would like to over ride the function associated with an elements onclick event when the screen is in 'edit' mode. Then when done editing put the original function back. So, orig

Solution 1:

Do you control the code for the showAddNewForum() function and its insertion into the HTML? In that case, I would probably just use one handler, something like:

dojo.connect(dojo.byId("AddNewForum"), "onclick", function(evt) {
    if (dojo.hasClass(evt.target, "editable") {
        //do the editing work heredoConfiguration(evt.target);
    } else {
        //do regular work here.doRegularAction(evt.target);
    }
});

Either that or hold on to the connect handles and unregister and register the right ones when you change the page to configuration mode.

Solution 2:

The way I would implement this is to always override the onclick handler for every editable object on the page with a handler that either simply delegated the call to the original or called the admin version.

You can wire this up pretty easy in dojo, like this:

  admin_mode = false;
  activateAdministration = function() {
    admin_mode = true;
  };

  editClick = function(e) {
    console.debug("..in admin edit function; this=%o; e=%o", this, e);
    // do your admin stuff here// var node = this;
  };

  dojo.query('.editable').forEach(function(node) {

    if (node.onclick) {
      var original_onclick = node.onclick;
      node.onclick = function() {
        if (admin_mode) {
          console.debug("calling admin onclick handler");
          editClick.apply(node, arguments);
        } else {
          // delegateconsole.debug("calling original onclick handler");
          original_onclick.apply(node, arguments);
        }
      }
    }

  });

I tested it with HTML like this:

<aonclick="console.debug('I am the original!; this=%o; args=%o', this, arguments);"class="editable"> 
  EDITABLE 
</a><aonclick="console.debug('Me too!; this=%o; args=%o', this, arguments);"class="editable"> 
  ALSO EDITABLE 
</a>

Solution 3:

First of let me say I HATE IE, especially IE6. It will be a good day indeed when my company finally moves off of IE6. So how I got around it is I set an attribute called oldclick to node.onclick and then set the node.onclick="" when I activateAdministration. On the flip side I disconnect the hadlers and add the oldclick back to the onclick.

var editOnClickHandle = []; 
activateAdministration = function() {
        if (editOnClickHandle.length>0) {//turn off administration
            dojo.forEach(editOnClickHandle,function(item){dojo.disconnect(item)});
            dojo.query(".editable").forEach(function(node,idx,arr){
                if(dojo.isIE){
                    node.onclick=node.getAttribute("oldclick");
                }else{
                    node.onclick=dojo.hitch(node.onclick,node.getAttribute("oldclick"));
                }               
            });
            editOnClickHandle = [];
        }else {//turn on administration
            dojo.query(".editable").forEach(function(node,idx,arr){
                var onClickName = newString(node.getAttribute("onclick"));
                var oldClickName = onClickName.substring(0,onClickName.indexOf("("));
                if(dojo.isIE){
                    node.setAttribute("oldclick",node.onclick);
                }else{
                    node.setAttribute("oldclick",oldClickName);
                }
                node.onclick="";
                editOnClickHandle.push(dojo.connect(node,"onclick",editClick));
            });
        }
    }

Not pertinent to this issue but for clarity I refactored the little admin window code out into a seprate function called editClick. It looks like:

editClick = function(e){
    console.debug(e);
    var adminWindow = document.getElementById("adminWindow");
    adminWindow.className = "displayInline";
    adminWindow.style.top = (e.layerY + 0) + "px";
    adminWindow.style.left = (e.layerX + 0) + "px";
    document.getElementById("adminElementId").value = e.target.id;
    document.getElementById("adminCurrentUrl").value = location.href;
    document.getElementById("adminClass").value = e.target.className;
}

So hopefully this will help someone in the future, thanks for your help jrburke. If anyone wants to pick apart my solution I am game for constructive input.