dijit.byId

Project owner:Bill Keese
Available:since V0.9

dijit.byId is a function for looking up a specific widget by its assigned name (id). This function is similar to dojo.byId but whereas dojo.byId returns DOMNodes, dijit.byId returns a JavaScript object that is the instance of the widget.

Introduction

dijit.byId and dojo.byId are often confused, particularly by first time users. This function should be used when you wish to obtain a direct handle the the JavaScript object instance of your widget and access functions of that widget.

Usage

Usage of this function is trivial. Simply call it with a string of the id for the widget you wish to obtain the handle of. The return value will either be the JavaScript object instance that represents the widget or null/undefined if it is not found in the widget registry.

1
2
3
<script type="text/javascript">
  var myWidget = dijit.byId("myWidget");
</script>

Examples

Example 1: Locating a widget by its ID

<script>
  dojo.require("dijit.form.TextBox");

  function findWidget () {
    //Locate the JS object.
    var widget = dijit.byId("myTextBox");
    if(widget){
      //Find my output node and write out I found my textbox and got its value.
      dojo.byId("textNode").innerHTML = "Found my text box.  It has value: [" + widget.attr("value") + "]";
    }else{
      //Find my output node and write out I couldn't find the widget.
      dojo.byId("textNode").innerHTML = "Could not locate my text box widget!";
    }
  }
  dojo.addOnLoad(findWidget);
</script>
<input id="myTextBox" dojoType="dijit.form.TextBox" type="text" value="Default Value"></input>
<br><br>
<div id="textNode" style="background-color: lightgray"></div>

Example 2: Locating a widget by its id and accessing its DOM node (main DOM rendering element)

<script>
  dojo.require("dijit.form.TextBox");

  function findWidgetDOM () {
    //Locate the JS object.
    var widget = dijit.byId("myTextBox2");
    if(widget){
      //Get its DOM node:
      var dNode = widget.domNode;

      //Find my output node and write out I found my textbox and got its value + what type of DOM node is its primary node.
      dojo.byId("textNode2").innerHTML = "Found my text box.  It has value: [" + widget.attr("value") + "] and its primary DOM node tag name is: [" + dNode.tagName + "]";
    }else{
      //Find my output node and write out I couldn't find the widget.
      dojo.byId("textNode2").innerHTML = "Could not locate my text box widget!";
    }
  }
  dojo.addOnLoad(findWidgetDOM);
</script>
<input id="myTextBox2" dojoType="dijit.form.TextBox" type="text" value="Default Value"></input>
<br><br>
<div id="textNode2" style="background-color: lightgray"></div>

Example 3: Comparing dojo.byId and dijit.byId

This example shows how the output of each is different.

<script>
  dojo.require("dijit.form.TextBox");

  function compareDojoDijitById() {
    //Locate the JS object.
    var dibiWidget = dijit.byId("myTextBox3");
    var dobiWidget = dojo.byId("myTextBox3");
    var dibiDOM = dijit.byId("textNode3");
    var dobiDOM = dojo.byId("textNode3");


    dojo.byId("textNode3").innerHTML = "dijit.byId for widget id returned: " + dibiWidget + "<br>" +
                                      "dojo.byId for widget id returned: " + dobiWidget + "<br>" +
                                      "dijit.byId for dom id returned: " + dibiDOM + "<br>" +
                                      "dojo.byId for dom id returned: " + dobiDOM + "<br>";
  }
  dojo.addOnLoad(compareDojoDijitById);
</script>
<input id="myTextBox3" dojoType="dijit.form.TextBox" type="text" value="Default Value"></input>
<br><br>
<div id="textNode3" style="background-color: lightgray"></div>
Error in the documentation? Can’t find what you are looking for? Let us know!