AnsweredAssumed Answered

Pass variable value from 1 page to another?

Question asked by john_richardson_1969 on Nov 2, 2018
Latest reply on Nov 5, 2018 by rscheitlin

In my app, I have a jquery UI datepicker widget in an iframe ... I wish to pass the value of the date that is chosen into a query against a featurelayer that is in a map on my main application page ... just not sure at all how to do this.

 

Also not sure if my question makes sense, now that I read over it again. I don't know of any other way to ask it though.

 

Just before the closing </body> tag of my main app page (Crime2018.html) is my iframe :

 

<iframe id = "calFrame" src = "calPage2.html" frameBorder="0"></iframe>

 

The iframe page (calPage2.html) looks like this :

 

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../jQueryUI/jquery-ui-1.12.1.custom/jquery-ui.css">
        <!--<link rel="stylesheet" href="/resources/demos/style.css">-->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="../jQueryUI/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
        <script src="https://js.arcgis.com/4.8/"></script>
        <script src="js/Map.js"></script>

  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>

</head>
<body>

<p class = "theDate" onchange = "allyBoy()" style = "color:white;font-weight:bold;font-size:20px">Choose A Date: <input type="text" id="datepicker"></p>

<script>
function allyBoy() {
    nutDate = $("#datepicker").datepicker("getDate");
    nutDate2 = $.datepicker.formatDate('mm' + '/' + 'dd' + '/' +'yy', nutDate);
    alert(nutDate2);
};
</script>




</body>
</html>

 

I want to pass the value of nutDate2 (01/01/2018 for example) into a query against a feature layer that is shown in a map in a div on my main page (Crime2018.html) :

 

<div id="mapBox"></div>

 

The map itself is drawn using a javascript file called Map.js :

 

require([
      "esri/Map",
      "esri/views/MapView",
      //"esri/views/SceneView",
      "esri/widgets/Home",
      "esri/widgets/Search",
      "esri/widgets/BasemapGallery",          //loading the necessary libraries and classes and objects from the ESRI API
      "esri/widgets/Expand",
      "esri/layers/FeatureLayer",
      "esri/layers/ImageryLayer",
      "esri/widgets/LayerList",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/geometry/SpatialReference",
      "esri/PopupTemplate",
      "esri/widgets/Legend",
      "esri/widgets/Popup",
      "esri/widgets/Feature",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"

      ],function(Map, MapView, Home, Search, BasemapGallery, Expand, FeatureLayer, ImageryLayer, LayerList, QueryTask, Query, GraphicsLayer, Graphic, SpatialReference, PopupTemplate, Legend, Popup, Feature, dom, on) {

      var map = new Map({     //creates new empy map, with streets as basemap
      basemap: "streets",
      });

      var view = new MapView({      //creates the map view and shows the map in the mapBox container
      container: "mapBox",
      map: map,
      zoom: 13,
      center: [-85.675, 40.09],      //centers map on Anderson, Indiana
      });

 

How do I do this?

Outcomes