1

I've got a situation where I am loading DIV's dynamically from a server with dojo.xhrGet. All that is fine. The content comes back fine, and the DIV is inserted into the page fine. Note that in this situation, I cannot know the DIV to load prior to some other event occurring.

The problem seems to be that DIJIT widgets contained within the dynamic DIVs aren't DIJIT widgets, but run-of-the-mill HTML widgets. That is, I can work on them using "dojo.byId('widgetID')" and use standard JavaScript, but if I try "registry('widgetID')", I get an "undefined" response.

How can I get dynamically loaded and otherwise declarative DIV code to be parsed into true DIJIT widgets?

JMorgan
  • 85
  • 1
  • 11

1 Answers1

1

You need to use dojo/parser after your markup div has been loaded to your DOM. The function parse() will transform your HTML markup from div to a dijit widget if the markup has been decorated properly.

By the way dojo.xhrGet is Deprecated and you should use dojo/request/xhr instead.

Below and example with some pseudocode:

require(["dojo/request/xhr", "dojo/dom-construct"], function(xhr, domConstruct){
  xhr("example.json", {
    handleAs: "text" // or whatever
  }).then(function(data){
    // place your div to the dom (data is an html markup similar to this <input data-dojo-type="dijit/form/TextBox" type="text" name="dept1" />)
    var targetDom = 'targedDom';
    domConstruct.place(data, targetDom, 'replace');
    // trasform your div to a dijit widget 
    parser.parse(dojo.byId(targetDom)).then(function(){
        // after is parsed do smt here
    });

  }, function(err){
    // handle the error condition
  }, function(evt){
    // handle a progress event from the request if the browser supports XHR2
  });
});
GibboK
  • 71,848
  • 143
  • 435
  • 658
  • OK.. Let me do some rewriting to replace xhrGet, and figure out how to move forward. It looks like you are parsing the node into which the dynamic content is placed. So if I'm currently adding all dynamic content to this same node, I'd be re-parsing it over and over again. Should I, instead, create empty placeholders of some kind? – JMorgan Apr 21 '16 at 14:38
  • Thanks for the update for xhr, That is working fine. The parsing is working fine to a degree. I did have to create an empty DIV first, and then add the dynamic content to the new DIV, and then parse that. All immediately appears to be fine, because I can see it is now not a run-of-the-mill HTML text box. However, when I type into the field, the placeholder doesn't disappear. It is also tricky if not impossible to get the textbox to receive focus. Sometime I simply can't click into the field. – JMorgan Apr 21 '16 at 18:00
  • Figured it out. It is either all DOJO or nothing. I was actually just appending the innerHTML with the dynamic content and then parsing it. From appearances that worked, but caused the problems mentioned above. I switched to using domConstruct.place, and magic! – JMorgan Apr 21 '16 at 18:32
  • @JMorgan I am glad it helped :) – GibboK Apr 21 '16 at 18:51