CODEWITHSUNDEEP
javascriptdojo
focode
focode

Reputation: 716

Not able to get event from button from template in dojo

I have a very simple template with a button, I am using that template in js file but I am not able to get the event, at console I am able to get first console output "from 1" but not able to get the other two console outputs, console is showing following errors: 

"TypeError: undefined is not a function↵    at declare.postCreate (http://localhost:8383/mysite/pages/pathsubscriber/widget/subscribersPage.js:30:29)

here is my subscriberspage.js :

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/subscribersPage.html",
    "dijit/form/Form",
    "dijit/form/TextBox",
    "dijit/form/Button",
    "dojo/on",
    "dojo/dom",
    "dojo/_base/lang"
], function( declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin,
        template, form, textbox, button, on, dom, lang) {

    console.log("from 1");
    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin
    ], {
        templateString: template,
        postCreate: function() {
            this.inherited(arguments);

            this.formButton.on('click', lang.hitch(this, function(event) {
                console.log("form 2");
            }));

            on(this.formButton, 'click', lang.hitch(this, function(event) {
                console.log("from 3");
            }));

        }

    });
});

here is my template :

<div>

    <input type="text" name="field1" data-dojo-type="dijit/form/TextBox" />

      <input type="password" name="field2" data-dojo-type="dijit/form/TextBox" />

  <button  type="button"  data-dojo-attach-point = "formButton" data-dojo-type="dijit/form/Button" >Login</button>

   </div>

I am new to dojo I am not able to figure out the problem from 1 day.

Upvotes: 0

Views: 1060

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

When you're working with widgets inside your own widget, you should also inherit from the dijit/_WidgetsInTemplateMixin.

Also, you shouldn't be using the dojo/on module for registering widget event handlers, but rather use the on() function that should be available on your widget (as soon as you use the dijit/_WidgetsInTemplateMixin module), for example:

this.formButton.on("click", lang.hitch(this, function(event) {
    console.log("form 2");
}));

Or even shorter would be the use of the data-dojo-attach-event attribute, for example:

<button  type="button" data-dojo-attach-point="formButton" data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:myFunction">Login</button>

In this case, when you would click the button, the myFunction() function in your widget would be called.

Upvotes: 1

Related Questions