ansaurus

Question

Determine if a dijit's DOM has finished loading

Answer 1

+3 A:

I believe if the dijit's "domNode" property is set, the DOM for the widget has been created. The widget may or may not be attached to the larger DOM, that can be a separate step. Checking domNode.parentNode as being a real element might help, but it is no guarantee that parentNode is also in the live document.

jrburke 2010-03-10 06:21:02

Answer 2

+1 A:

I believe something like this might work, although I didn't test it :

if (yourWidget.domNode) {
   // here your widget has been rendered, but not necessarily its child widgets
} else {
   // here the domNode hasn't been defined yet, so the widget is not ready
}

Dijit widgets' rendering is handled through extension points, called in that order :

postMixinProperties
buildRendering
postCreate <== at this point, your widget has been turned into HTML and inserted into the page, and you can access properties like this.domNode. However, none of the child widgets has been taken care of
startup : this is the last extension point called, after all the child widgets have been drawn

(This is the explanation of the widgets' lifecycle on "Mastering Dojo").

EXAMPLE :

<html>
<head>
<script src="path/to/your/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>   
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.lang.aspect");
    dojo.require("dijit.form.Button");

    // Define your aspects
    var startupAspect = {
            before : function() {console.debug("About to execute the startup extension point");},
            after : function() {console.debug("Finished invoking the startup extension point");},
    };

    function traceWidget(theWidget) {
        // Attach the aspect to the advised method
        dojox.lang.aspect.advise(theWidget, "startup", startupAspect);
    }   

</script>

</head>
<body>
<button dojoType="dijit.form.Button" type=button">
            dijitWidget
    <script type="dojo/method" event="postCreate">
        traceWidget(this);
    </script>
    <script type="dojo/method" event="startup">
         console.debug("Inside startup");
    </script>    
  </button>
</body>
</html>

Philippe 2010-03-10 12:50:53

Thanks! I got as far as postCreate, looks like I "startup" is the callback that I am looking for. I'll go and try that and see what I can see. "Mastering Dojo" is a great book, however, I still find that it's missing some bits of crucial information. But, with a JS framework as extensive as dojo, I'm sure it's hard to fit all information into a single book.

El Guapo 2010-03-10 13:01:00

If what you want to test is either the startup extension point has been executed or not, maybie you can give a try to AOP (see http://lazutkin.com/blog/2008/may/18/aop-aspect-javascript-dojo/ and http://www.dojotoolkit.org/api/dojox/lang/oo/aop.html). I would try with an "after" or "after returning" advice

Philippe 2010-03-10 13:06:45

Wow... I think I love Dojo more and more every day...

El Guapo 2010-03-10 13:10:57

Also check http://www.dojotoolkit.org/api/dojox/lang/aspect.html

Philippe 2010-03-10 13:23:00

ansaurus

tags:

views:

answers:

Determine if a dijit's DOM has finished loading

related questions