CODEWITHSUNDEEP
javascriptdojo
Mark
Mark

Reputation: 5026

dojo parser and registry issue

Please take a look to this embarassing snippet of code:

https://jsfiddle.net/nwatzos1/1/

html

<div id="viewLogin" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">    
  <input id="txt" type="text" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="selectOnClick:true, placeHolder:'pin'" name="pin" autocomplete="off" required>    
</div>

js

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/domReady!"
], function(registry, parser) {
    parser.parse();
  var text = registry.byId("txt");
  text.set("value", "hello");
});

config

data-dojo-config="isDebug: true, async: true, parseOnLoad: false"

as you can see I get the error:

TypeError: text is undefined

The same happens also if I set the parseOnLoad flag to true and comment the parser.parse() line.

I wait for the domReady then I parse it... why it cannot find the widgets? To me, it seems very close to the first example in the Getting started documentation:

https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html

I'm not able to view my error.

Upvotes: 1

Views: 427

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

dojo/domReady! is a plugin that ensure that DOM is ready and events are loaded (delays the loading process until dom (event/domNodes) are loaded and this without using callback ) , resuming dojo/domReady! ensure -> DOM loaded

dojo/ready is module that uses a callback function that unsure not only DOM is loaded ( because this last it self uses dojo/domReady) but also if all AMD modules in that block have to be loaded . resuming dojo/ready ensure -> DOM loaded + ensure AMD module inside the same block (require) parsed and loaded

When dom is Being loaded you're calling the parser.parse(); and to parse the template modules and just above it you are trying to get refernce to your dojox/mobile/TextBox var text = registry.byId("txt"); which will returns null beacause of the parser hasn't yet finish parsing and loading the module to the dojo registry .

So by Using dojo/ready you'll be ensure that the dom is being load and all widget parsed , see bellow sample :

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/ready",
  "dojo/domReady!"
], function(registry, parser,ready) {

      parser.parse();
      ready(function(){
         var text = registry.byId("txt");
         console.log(text);
        text.set("value", "hello");
      })
});

Here is Fiddle

Upvotes: 1

T Kambi
T Kambi

Reputation: 1387

Always try to use parser.parse().then(...) to ensure parser has completed its task.

require([
  "dijit/registry",
  "dojo/parser",
  "dojo/domReady!"
], function(registry, parser) {
       parser.parse().then(function(){
  	    var text = registry.byId("txt");
  	    text.set("value", "hello");
       });
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<div id="viewLogin" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
  <input id="txt" type="text" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="selectOnClick:true, placeHolder:'pin'" name="pin" autocomplete="off" required>
</div>

Upvotes: 0

Related Questions