Hello,
I'm working in WAB 2.12. I'm not sure why this wouldn't work, and I was hoping someone could point me in the right direction. I want a dialog box upon opening the widget, and I'm placing the button markup for the dialog box in widget.html, but i thought you were supposed to be able to reference the HTML via the data-dojo-attach-point. When my dialog box opens, it's empty. Do you know what I'm missing?
Widget.html
<div>
<div data-dojo-attach-point="myTemp" data-dojo-type="dijit/Dialog" title="My Title">
<button class="btn" data-dojo-type="dijit/form/Button" type="button">Button1 </button>
<button class="btn" data-dojo-type="dijit/form/Button" type="button">Button3</button>
<button class="btn" data-dojo-type="dijit/form/Button" type="button">Button2</button>
</div>
</div>
and Widget.js
define(['dojo/_base/declare',
'dojo/_base/lang',
"dijit/_WidgetsInTemplateMixin",
'jimu/BaseWidget',
"dijit/form/Button",
"dijit/Dialog",
"dojo/dom",
'dojo/on',
"esri/lang",
"dojo/domReady!"
],
function (declare,
lang,
_WidgetsInTemplateMixin,
BaseWidget,
Button,
Dialog,
dom,
on,
esriLang,
) {
return declare([_WidgetsInTemplateMixin, BaseWidget], {
baseClass: 'jimu-widget-myWidget',
onOpen: function () {
this.inherited(arguments);
console.log('onOpen');
this.myDialog = new Dialog({
title: this.title,
content: this.myTemp
})
this.myDialog.show();
},
Solved! Go to Solution.
Joel,
The issue is that you are using the myTemp div as a container for the dialog and thus when it becomes a dialog you no longer have access to the this.btn1 as it is no longer part of the widget template but is now part of the dialog's Dom. I normally would create the buttons programatically too.
Joel,
A big issue I see is that you are creating a dialog decoratively and programatically. You should remove
data-dojo-type="dijit/Dialog"
from your div and just create the dialog programatically.
Robert,
Thanks. I can now create a dialog box programatically, and set the content as "this.myTemp" to get the template from Widget.html.
I guess I'm confused on how to access the button though, so I can add functionality to it. I could call the following "btn1" from my JS, but as soon as I add the data-dojo-type="dijit/form/button" on there, I can no longer call it. But if I leave it off, it's no longer a "dojo/button" and it loses it's style. Does that make sense?
<div data-dojo-attach-point="myTemp" title="My Title">
<button class="btn" data-dojo-attach-point="btn1"></button>
</div>
Joel,
The issue is that you are using the myTemp div as a container for the dialog and thus when it becomes a dialog you no longer have access to the this.btn1 as it is no longer part of the widget template but is now part of the dialog's Dom. I normally would create the buttons programatically too.
Ah, I see what you're saying. I made the changes and got it going. Thank you very much!!