CODEWITHSUNDEEP
javascriptjquerydojo
devdar
devdar

Reputation: 5654

Dijit Dialog Button Event Not Executing

I have a Dijit Dialog (jsfiddle) created programmatically. When the Dialog Show is called i pass the id's for the buttons at runtime. I am trying to create click event functions to execute for the id's passed at runtime.

However the events are not executing. I would like to know how to attach a function to the dialog buttons.

HTML

<button id="show">Show Dialog</button>

JS

require([
    "dijit/form/CheckBox",
    "dijit/dijit",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",
    "dijit/_DialogMixin"]);
require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/domReady!",
    "dojo/ready"],

function (parser, declare, ready, Dialog) {
    parser.parse();

    dojo.ready(function () {
        function showDialog(yesBtnId, noBtnId) {
            var dialog = new dijit.Dialog({
                title: 'Confirmation',
                content: '<table style= "width: 300px;">' +
                    '<tr>' +
                    '<th style="text-align:center; padding: 5px" colspan="2"><label>Are You Sure ?</label></th>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="text-align:center; padding: 5px"><button id=' + yesBtnId + '>Yes</button></td>' +
                    '<td style="text-align:center;padding: 5px"><button id= ' + noBtnId + '>No</button></td>' +
                    '</tr>' +
                    '</table>'
            });

            dialog.show();
        }

        var myShowBtn = {
            id: "show",
            onClick: function (evt) {

                showDialog('yesDelete', 'noDelete');
            }
        };
        dojo.query("#show").connect("onclick", myShowBtn.onClick);

        var myYesDelete = {
            id: "yesDelete",
            onClick: function (evt) {

                alert('hello its working....');

            }
        };

        dojo.query("#yesDelete").connect("onclick", myYesDelete.onClick);

    });
});

Upvotes: 0

Views: 644

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

You're trying to add an event handler for an element that does not exist yet when you call it, so the event handler is actually not bound because at that moment there's nothing to bind it to.

However, if you move the line:

dojo.query("#yesDelete").connect("onclick", myYesDelete.onClick);

Up to the showDialog() function (put it behind dialog.show()), then it will work as you can see in this updated JSFiddle.

Upvotes: 2

Related Questions