javascriptdojocustom-widgetsibm-content-navigator

What is correct way to pass on event parameter in DOJO?


I am working on Dojo Version 1.8.I have designed one custom widget as below. Its a snippet

<div>
	<div>
		 <input 
			 id ="NZ1",
			 data-dojo-attch-point = "NZ1"
			 data-dojo-attch-type = "ecm.widget.ValidationTextBox"
			 data-dojo-attch-event = "onBlur : makeAllSmall"
		 />
	</div>
	<div>
		 <input 
			 id ="NZ2",
			 data-dojo-attch-point = "NZ2"
			 data-dojo-attch-type = "ecm.widget.ValidationTextBox"
			 data-dojo-attch-event = "onBlur: makeAllSmall"
		 />
	</div>
</div> 

Here is event handler

makeAllSmall : function(evt){  
	var currVal=evt.target.value;
	currVal = currVal.toLowerCase();
	/**Some Other business logic on currVal **/
}

This evt is always coming as undefined . I am quite new to Dojo. Am I missing something in HTML side ? I tried to change HTML as below but not luck

		 <input 
			 id ="NZ2",
			 data-dojo-attch-point = "NZ2"
			 data-dojo-attch-type = "ecm.widget.ValidationTextBox"
			 data-dojo-attch-event = "onBlur : makeAllSmall"
			 data-dojo-args="e"
		 />


Solution

  • First thing first, is there a typo in the method "onBlurr"? I see there is an extra 'r'. Shouldn't it be "onBlur"?

    If you look at the DOJO API documentation for onBlur event, it doesn't pass an event object like what you are expecting

    onBlur()
    Defined by: dijit/_FocusMixin
    
    Called when the widget stops being "active" because focus moved to something outside of it, or the user clicked somewhere outside of it, or the widget was hidden.
    Examples
    Example 1
    var btn = new Button();
    // when /my/topic is published, this button changes its label to
    // be the parameter of the topic.
    btn.subscribe("/my/topic", function(v){
    this.set("label", v);
    });
    

    Next, in your event handler, you are trying to change the text to lowerCase and this can be done like

    makeAllSmall : function(){  
        var currVal=this.get("value");
        currVal = currVal.toLowerCase();
        /**Some Other business logic on currVal **/
    }
    

    Another way of doing this without the event handler is to force the ValidationTextBox to convert everything to lowercase using construction parameters like

    <input 
                 id ="NZ2",
                 data-dojo-attach-point = "NZ2"
                 data-dojo-attach-type = "ecm.widget.ValidationTextBox"
                data-dojo-props='lowercase:true'
                 data-dojo-attach-event = "onBlurr : makeAllSmall"
             />
    

    Note that I have added data-dojo-props='lowercase:true'

    Hope this helps.