Question

Observation:

Inside my template of a custom widget that I’m making, there’s a line:

<input type="text"  data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: search"/>

This works fine as in on change, the search function of my widget is called. but the display is plain input box, not dijit’s fancy display. So I do this:

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: search"/>

Now, display is fine but search is not called on change. Now I did this:

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: random_name"/>

The whole page crashes and debugger tells me dojo could not find the function random_name in the "scope".

To give the whole code, here they are:

EDIT: in place of onchange, I’ve tried onChange, ondijitchange or any other event like ‘onclick’, ‘onClick’, ‘ondijitclick’ etc but search never gets called whatever I do in the browser.

Answer 1

Well looking at your code, and the dojo 1.8 input example I would perhaps remove the attach event from the template and add it within the ‘startup’ function in your widget js file using dojo/on.

So taking your ‘MainViewWidget.js’ code and your template markup, here are the amendments I would try:

first the template change…

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-point="inputNode"/>

and the widget change…

define(["dojo/_base/declare","dojo/dom",
        "dijit/_Widget", "dijit/_TemplatedMixin",
        "dojo/text!./templates/MainViewWidget.html",
        "dojo/on",
        "dijit/layout/TabContainer", "dijit/layout/ContentPane","dijit/layout/BorderContainer","dijit/form/TextBox", "dijit/layout/AccordionContainer"],

function(declare, dom, _Widget, _TemplatedMixin, template, on){
    return declare("package.MainViewWidget", [_Widget, _TemplatedMixin], {

    // widgetsInTemplate: true, /*keep this false, otherwise data-dojo-attach-event attribute is a pain in the ass!*/

    templateString: template,

    constructor: function(){
    },

    startup: function(){
        on(this.inputNode, "change", function(){//or just have your search function here instead
             alert('hi');
        });
    }
  });
});

You may need to use dojo’s lang.hitch for the event handler if you want to reference the widget using ‘this’ inside the ‘on’ handler.

Hope that helps and I didnt have any typos.