CODEWITHSUNDEEP
dojo
little star
little star

Reputation: 88

Dojo editor is not working well when moving it from div to another

I have created a dojo successfully. But I need to move this editor from div to another. However this is causing this error: TypeError: frameElement._loadFunc is not a function

Basically this is what I have:

<script src="dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<a href="javascript:move_dojo_editor();">Move Editor </a>       
<div id=container1 style="display:none;" >
    <div class="claro" style="margin:10px" >
        <div id=dojo_editor_1 data-dojo-type="dijit.Editor" style="width:800px;min-height:100px;" data-dojo-props="extraPlugins:['foreColor','hiliteColor','fontName', 'fontSize', 'formatBlock','|','createLink','insertImage','fullscreen','viewsource','newpage','print','toggleDir','smiley',{name: 'insertTable'},
            {name: 'modifyTable'},
            {name: 'insertTableRowBefore'},
            {name: 'insertTableRowAfter'},
            {name: 'insertTableColumnBefore'},
            {name: 'insertTableColumnAfter'},
            {name: 'deleteTableRow'},
            {name: 'deleteTableColumn'},
            {name: 'colorTableCell'},
            {name: 'tableContextMenu'}]">
            Example here..
        </div>
    </div>
</div>
<div id=container2></div>

On javascript I have this:


// Include the class
dojo.require("dijit.Editor");
// Require a few extra plugins
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dijit._editor.plugins.FullScreen");
dojo.require("dijit._editor.plugins.ViewSource");
dojo.require("dijit._editor.plugins.NewPage");
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dijit._editor.plugins.Print");
dojo.require("dijit._editor.plugins.ToggleDir");

//dojox
dojo.require("dojox.editor.plugins.PrettyPrint");
dojo.require("dojox.editor.plugins.PageBreak");
dojo.require("dojox.editor.plugins.ShowBlockNodes");
dojo.require("dojox.editor.plugins.Preview");
dojo.require("dojox.editor.plugins.Save");
dojo.require("dojox.editor.plugins.ToolbarLineBreak");
dojo.require("dojox.editor.plugins.NormalizeIndentOutdent");
dojo.require("dojox.editor.plugins.Breadcrumb");
dojo.require("dojox.editor.plugins.FindReplace");
dojo.require("dojox.editor.plugins.PasteFromWord");
dojo.require("dojox.editor.plugins.InsertAnchor");
dojo.require("dojox.editor.plugins.CollapsibleToolbar");
dojo.require("dojox.editor.plugins.Blockquote");
dojo.require("dojox.editor.plugins.Smiley");
dojo.require("dojox.editor.plugins.UploadImage");
require([
        "dojo/parser",
        "dojox/editor/plugins/TablePlugins",
        "dojo/domReady!"

], function(parser) {
        parser.parse();
});

function move_dojo_editor()
{
    var tmp = $("#container1").html();
    $("#container1").html("");
    $("#container2").html(tmp); // the editor is displaying, yet I can't click inside it or on any option it has.

}

Upvotes: 0

Views: 336

Answers (1)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

You can't "move" DOM by stashing a node's innerHTML then dumping it into another node. That will effectively destroy the old DOM and create new DOM lacking any of the event connections or associations that the original DOM had, hence the error.

To properly move the DOM, you need to use actual DOM APIs, not innerHTML. Here's a rough example (for simplicity's sake I'm going to assume giving the div with class="claro" an ID of claroContainer):

document.getElementById('container2').appendChild(
    document.getElementById('claroContainer')
);

Unrelated, you should really consider using modern Dojo practices, not the deprecated globals and loader APIs from prior to 1.7 and AMD. See http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/ for a primer on upgrading.

Upvotes: 1

Related Questions