Dojo: dojo onblur events

Question

I have a form setup with dojo 1.5. I am using a dijit.form.ComboBox and a dijit.form.TextBox

The Combobox has values like "car","bike","motorcycle" and the textbox is meant to be an adjective to the Combobox. So it doesn't matter what is in the Combobox but if the ComboBox does have a value then something MUST be filled in the TextBox. Optionally, if nothing is in the ComboBox, then nothing can be in the TextBox and that is just fine. In fact if something isn't in the Combobox then nothing MUST be in the text box.

In regular coding I would just use an onBlur event on the text box to go to a function that checks to see if the ComboBox has a value. I see in dojo that this doesn't work... Code example is below...

Vehicle:
    <input dojoType="dijit.form.ComboBox"
      store="xvarStore"
      value=""
      searchAttr="name"
      name="vehicle_1"
      id="vehicle_1"
    />
 Descriptor:
<input type="text"
                dojoType="dijit.form.TextBox"
                value=""
                class=lighttext
                style="width:350px;height:19px"
                id="filter_value_1"
                name="filter_value_1"
                />

My initial attempt was to add an onBlur within the Descriptor's <input> tag but discovered that that doesn't work.

How does Dojo handle this? Is it via a dojo.connect parameter? Even though in the example above the combobox has an id of "vehicle_1" and the text box has an id of "filter_value_1", there can be numerous comboboxes and textboxes numbering sequentially upward. (vehicle_2, vehicle_3, etc)

Any advice or links to resources would be greatly appreciated.

Answer 1

To add the onBlur event you should use dojo.connect():

dojo.connect(dojo.byId("vehicle_1"), "onBlur", function() { /* do something */ });

If you have multiple inputs that you need to connect this to, consider adding a custom class for those that need to blur and using dojo.query to connect to all of them:

Vehicle:
    <input dojoType="dijit.form.ComboBox"
      store="xvarStore"
      class="blurEvent" 
      value=""
      searchAttr="name"
      name="vehicle_1"
      id="vehicle_1"
    />

dojo.query(".blurEvent").forEach(function(node, index, arr) {
      dojo.connect(node, "onBlur", function() { /* do something */ });
  });

In the function that is passed to dojo.connect you could add in some code to strip out the number on the end and use it to reference each filter_value_* input for validation.

dojo.connect()

Combobox documention

Answer 2

onBlur seems to work just fine for me, even in the HTML-declared widgets. Here's a very rudimentary example:

http://jsfiddle.net/kfranqueiro/BWT4U/

(Have firebug/webkit inspector/IE8 dev tools open to see console.log messages.)

However, for a more ideal solution to this, you might also be interested in some other widgets...

• http://dojotoolkit.org/reference-guide/dijit/form/ValidationTextbox.html
• http://dojotoolkit.org/reference-guide/dijit/form/Form.html

Hopefully this can get you started.