Access div in Expand Widget

AndreaGrygo2 — Sat, 11 Dec 2021 15:21:09 GMT

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")  
});‍‍‍

Re: Access div in Expand Widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:21:12 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Access div in Expand Widget

AndreaGrygo2 — Fri, 03 May 2019 21:52:22 GMT

This worked perfect!

Thanks once again Robert!!

topic Re: Access div in Expand Widget in ArcGIS JavaScript Maps SDK Questions

Access div in Expand Widget

Re: Access div in Expand Widget

Re: Access div in Expand Widget