CODEWITHSUNDEEP
javascriptdojo
Tsaari
Tsaari

Reputation: 103

Dijit Dialog in JSFiddle launching immediately - not onClick

I'm struggling to get a Dijit dialog to work for a reproducible example. I took the working code from this JSfiddle and simply tried to turn this into a named function to use throughout the example.

The author uses:

new Button({label: 'Show dialog', onClick: function() {
   //Create dialog programmatically here
}
});

but I've changed this to be slightly different: 

function launchSelectDialog(selectOptions) {
    //Create dialog programmatically here
}
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));

Here is my version. Unfortunately, this just launches the dialog immediately upon loading the page, and never again when clicking on the button.

I have checked the NoWrap option in JSFiddle. I have no other clues about what's going on. Please help if you have any ideas.

Upvotes: 0

Views: 218

Answers (3)

GibboK
GibboK

Reputation: 73908

You need to initiate your Button widget before retrieving with registry.byId(). In your code actually registry.byId("default-launch") was returning undefined;

Also registry.byId() function accept only an id so additional parameters will be ignored.

To fix it you should initiate a Button instance properly and declare launchSelectDialog(allOpts) withinonClick, as:

  var myButton = new Button({
    label: "Default Options",
    onClick: function() {
      launchSelectDialog(allOpts);
    }
  }, "default-launch");

Below fixed version for your script.

http://jsfiddle.net/usm829jq/

require([
  "dojo/dom",
  "dijit/Dialog",
  "dijit/form/Button",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/registry",
  "dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {

  var allOpts = [{
    label: "Foo",
    value: "foo"
  }, {
    label: "Bar",
    value: "bar"
  }]

  var myButton = new Button({
    label: "Default Options",
    onClick: function() {
      launchSelectDialog(allOpts);
    }
  }, "default-launch");


  function launchSelectDialog(SelectOptions) {
    var layout = new BorderContainer({
      design: "headline",
      style: "width: 400px; height: 400px; background-color: yellow;"
    });

    var centerPane = new ContentPane({
      region: "center",
      style: "background-color: green;",
      content: "center"
    });

    var actionPane = new ContentPane({
      region: "bottom",
      style: "background-color: blue;"
    });

    (new Button({
      label: "OK"
    })).placeAt(actionPane.containerNode);
    (new Button({
      label: "Cancel"
    })).placeAt(actionPane.containerNode);

    layout.addChild(centerPane);
    layout.addChild(actionPane);
    layout.startup();

    var dialog = new DijitDialog({
      title: 'dialog title',
      style: {
        //width: '400px',
        //height: '400px',
      },
      content: layout
    });

    dialog.containerNode.style.backgroundColor = "red";
    dialog.startup();
    dialog.show();

  }
})

Upvotes: 1

T Kambi
T Kambi

Reputation: 1387

There are couple of issue.

1) Like others a have pointed out, you are invoking the function not setting up the event with function. hence the dialog is visible onload.

2) You need to wait till the html has been parse. or you need to use parser.parse()

Here is the updated fiddler: http://jsfiddle.net/49y3rxzg/9/

Upvotes: 1

Ram
Ram

Reputation: 144659

() is an invocation operator. You are calling the function yourself and the returned value of the function is set as the event handler. If you want to reuse the function, use a closure:

function launchSelectDialog(selectOptions) {
    // the returned function will be used as the event handler
    return function() {
       // the passed `selectOptions` is remembered in this context
    }
}

Another option is:

registry.byId("default-launch", "onClick", function() {
   launchSelectDialog(allOpts);
});

Upvotes: 1

Related Questions