CODEWITHSUNDEEP
javascriptdojo
The Old County
The Old County

Reputation: 89

Dojo form handling events

I am workin a dojo form and I am trying to improve event handlers

http://dojotoolkit.org/reference-guide/1.10/dojo/on.html

My current application. http://jsfiddle.net/aGCFs/254/

on(this.resetButton, "click", function(e) {
    return confirm('Press OK to reset widget values');
});

how it used to work.

http://jsfiddle.net/aGCFs/252/

with the events inline script on the html template page.

Upvotes: 0

Views: 204

Answers (2)

frank
frank

Reputation: 3330

You need to add the ready module to the require function. Then call the entire code with the ready module in a callback.

require([
    "dojo/ready", // add the ready module
    "dojo/parser",
    "dojo/on",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/Select",
    "dijit/form/Form",
    "dijit/form/Button",
    "dojo/domReady!"], function (ready, parser, on, registry, ContentPane) {

    // call your the code in the callback.
    ready( function() {

      var progTabCounter = 1;
      makeTab = function () {
         var tc = registry.byId("mainTabContainer");
         var cp = new ContentPane({
             title: 'Programmatically created tab ' + (progTabCounter++),
             closable: true
         });
      cp.domNode.innerHTML = "I was created programmatically!";
      tc.addChild(cp, 0);
     };

    prevTab = function () {
       var tc = registry.byId("mainTabContainer");
       console.log("prev tab", tc);
       var currIndex = tc.getIndexOfChild(tc.selectedChildWidget);
       var tabs = tc.getChildren();
       if (currIndex > 0) {
        tc.selectChild(tabs[currIndex - 1]);
       }

     };

    nextTab = function () {
        var tc = registry.byId("mainTabContainer");
        console.log("next tab", tc);
        var currIndex = tc.getIndexOfChild(tc.selectedChildWidget);
        var tabs = tc.getChildren();
        if (currIndex < tabs.length - 1) {
          tc.selectChild(tabs[currIndex + 1]);
        }
   };


    registry.byId("resetButton").on("click", function(e) {
        console.log("clicked on reset");

        return confirm('Press OK to reset widget values');
    });

    }); // end of ready call

 });

Upvotes: 1

dori naji
dori naji

Reputation: 980

there is multiple mistake in your code first you are not calling the on callback like this

require(["dojo/dom", "dojo/on", "dojo/domReady!"], function (dom,on) {
    on(dom.byId("button"), "click", function (e) {
        console.log("My button was clicked!");
    });
});

second you are doing dom.byId("button") u have no button with the id button, so you need to specify a specific button ID. like the this:

require(["dojo/dom", "dojo/on", "dojo/domReady!"], function (dom,on) {
    on(dom.byId("nextTab"), "click", function (e) {
        console.log("My button was clicked!");
    });
});

Check the jsffidle .

if you click on the nexttab button it will show the console log message

Upvotes: 1

Related Questions