this.domNode is null

Question

I am trying to use jquery to load a dojo chart. I am using this code. However in the second click, in the first button i get this error. The same occurs if i click in the first button, click in the second and click again in the first. This problem is Driving me crazy.

demo here

<script type="text/javascript">
$(document).ready(function () {
    $('.lista_').click(function () {
        $.get('index1.php', function (data) {
            dojo.addOnLoad(function () {
                require(["dojo/_base/xhr", "dojo/parser", "dojo/dom"], function (xhr, parser, dom) {
                    var um = [];
                    dijit.registry.filter(function (w) { //problem here, maybe this code destroy something that should not be destroyed
                        if (dojo.indexOf(um)) {
                            w.destroyRecursive();
                        }
                    });
                    $('#paginas').html(data);

                    dojo.parser.parse(dojo.byId('paginas'));

                });
            });
        });
    });
});
</script>

Answer 1

It looks like you are trying to remove the old chart before inserting/parsing the new one, but I don't think that is happening. This may cause Dojo to barf up various errors.

dijit.registry.filter(function (w) { //problem here, maybe this code destroy something that should not be destroyed
    if (dojo.indexOf(um)) {
        w.destroyRecursive();
    }
});

I'm not sure what you are doing here. The filter function will return an array of widget's for which the callback returns true. Additionally, dojo.indexOf is used to search for an element in an array (I'm not sure what sort of black magic you are doing with it there :P).

I think (if I've understood your intentions), you should rather do:

dijit.registry.findWidgets(dojo.byId("paginas")).forEach(function(w) {
    w.destroy();
});

This will destroy the widget(s) inside #paginas before inserting and parsing the newly fetched HTML.

Edit: When you click the 2nd button, and the chart is removed, the <style> tag is removed too. That's why you see artifacts from the tooltip div, because it's no longer hidden by CSS. You can solve this by having the claro.css import in the main file, i.e. put this:

<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css";   
</style>

in the main file's header instead of in the HTML you load with jquery (index1.php).