I added a div with a submit button to an Expand Widget; how do I access the submit button via a click evt? I'm guessing via the view?
var node = domConstruct.create("div", {
innerHTML: "Select files: <input type='file' multiple><br>" +
"<input type='submit' id='btnSubmit'>"
});
const addAttach = new Expand({
view: view,
expanded: false,
expandTooltip: "Add Attachment",
content: node
});
view.ui.add(addAttach, "top-right");
I tried normal jQuery, which I am using successfully for other buttons not in the Expand, with no result.
$('#btnSubmit').click(function(evt){
console.log("submit clicked")
});
Solved! Go to Solution.
Here is a sample that shows how to handle this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Event in Expand</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#instruction {
z-index: 99;
position: absolute;
top: 15px;
left: 50%;
padding: 5px;
margin-left: -175px;
height: 20px;
width: 350px;
background: rgba(25, 25, 25, 0.8);
color: white;
}
.myPanel {
background: rgba(25, 25, 25, 0.8);
color: white;
padding: 5px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Expand",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"esri/core/watchUtils"
], function(Map, MapView, Expand, domConstruct, dom, on, watchUtils) {
// Create the Map
var map = new Map({
basemap: "streets-navigation-vector"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-116.3031, 43.6088],
zoom: 12
});
var node = domConstruct.create("div", {
className: "myPanel",
innerHTML: "Select files: <input type='file' multiple><br>" +
"<input type='submit' id='btnSubmit'>"
});
const addAttach = new Expand({
view: view,
expanded: false,
expandTooltip: "Add Attachment",
content: node
});
view.ui.add(addAttach, "top-right");
watchUtils.whenTrueOnce(addAttach, 'expanded', function(){
on(dom.byId("btnSubmit"), 'click', function(){
console.log("submit clicked");
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Here is a sample that shows how to handle this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Event in Expand</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#instruction {
z-index: 99;
position: absolute;
top: 15px;
left: 50%;
padding: 5px;
margin-left: -175px;
height: 20px;
width: 350px;
background: rgba(25, 25, 25, 0.8);
color: white;
}
.myPanel {
background: rgba(25, 25, 25, 0.8);
color: white;
padding: 5px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Expand",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"esri/core/watchUtils"
], function(Map, MapView, Expand, domConstruct, dom, on, watchUtils) {
// Create the Map
var map = new Map({
basemap: "streets-navigation-vector"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-116.3031, 43.6088],
zoom: 12
});
var node = domConstruct.create("div", {
className: "myPanel",
innerHTML: "Select files: <input type='file' multiple><br>" +
"<input type='submit' id='btnSubmit'>"
});
const addAttach = new Expand({
view: view,
expanded: false,
expandTooltip: "Add Attachment",
content: node
});
view.ui.add(addAttach, "top-right");
watchUtils.whenTrueOnce(addAttach, 'expanded', function(){
on(dom.byId("btnSubmit"), 'click', function(){
console.log("submit clicked");
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
This worked perfect!
Thanks once again Robert!!