Call function inside dojo.ready

Question

I have code ArcGIS Javascript like this:

<script type="text/javascript">
      require(["dojo/ready",
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory", 
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map", 
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/layers/FeatureLayer",
      "dojo/dom-class",
      "dojo/dom-construct",
      "dojo/on", 
      "esri/InfoTemplate",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "dojo/_base/declare", 
      "dojo/number", 
      "dojo/on",
      "dojox/charting/Chart",
      "esri/renderers/UniqueValueRenderer",
      "dojo/parser",
      "dojo/_base/Color", 
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
      ], function (
        ready,
        Grid, 
        Selection, 
        Memory, 
        array,
        domStyle,
        registry,
        Map,
        Popup,
        PopupTemplate, 
        FeatureLayer,
        domClass,
        domConstruct,
        on, 
        InfoTemplate,
        SimpleLineSymbol,
        SimpleFillSymbol,
        QueryTask,
        Query,
        declare, 
        dojoNum, 
        on,
        Chart, 
        UniqueValueRenderer,
        parser
      ) {
        ready(function() {

          parser.parse();

          var popup = Popup({
            titleInBody: false
          },domConstruct.create("div"));

          // create the dgrid
          window.grid = new (declare([Grid, Selection]))({
            // use Infinity so that all data is available in the grid
            bufferRows: Infinity,
            columns: {
              "FID": "FID",
              "PROV": "PROV"
            }
          }, "grid");
          // add a click listener on the ID column
          grid.on(".field-id:click", selectState);

          var initialExtent = new esri.geometry.Extent({"xmin":89.971,"ymin":-12.472,"xmax":144.301,"ymax":9.511,"spatialReference":{"wkid":4326}});
          map = new esri.Map("map", { extent: initialExtent,infoWindow: popup});

          //var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
          var basemap2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer",{"opacity":0.4});
          map.addLayer(basemap2);
          //map.addLayer(basemap);


          domClass.add(window.map.infoWindow.domNode, "myTheme");
            var template = new PopupTemplate({
            title: "Data Luas Lahan Sawah {PROV}",
            description: "of starters from {PROV} finished",
          });

          window.statesUrl = "http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8";
          window.outFields = ["FID","PROV"];

          var fl = new FeatureLayer(window.statesUrl, {
            id: "stat",
            mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
            infoTemplate:template,
            outFields: window.outFields
          });

          fl.on("load", function() {
            fl.maxScale = 0; // show the states layer at all scales
            fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
          });

          fl.on("click", selectGrid);

          // change cursor to indicate features are click-able
          fl.on("mouse-over", function() {
            map.setMapCursor("pointer");
          });
          fl.on("mouse-out", function() {
            map.setMapCursor("default");
          });


          map.addLayer(fl);

          map.on("load", 
            function addFeatureLayer() {
              var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
              defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);

              //create renderer
              var renderer = new UniqueValueRenderer(defaultSymbol, "PROV");

              //add symbol for each possible value
              renderer.addValue("Banten", new SimpleFillSymbol().setColor("#00FA1D"));
              renderer.addValue("Dki Jakarta", new SimpleFillSymbol().setColor("#FA0000"));
              renderer.addValue("Jawa Barat", new SimpleFillSymbol().setColor("#FAFA00"));
              renderer.addValue("Jawa Tengah", new SimpleFillSymbol().setColor("#00FA1D"));
              renderer.addValue("Daerah Istimewa Yogyakarta", new SimpleFillSymbol().setColor("#FAFA00"));
              renderer.addValue("Jawa Timur", new SimpleFillSymbol().setColor("#FAFA00"));
              var template = new PopupTemplate({
                title: "Data {PROV}",
                description: "Data Luas Lahan Sawah {PROV}",
              });
              var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8", {
                mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
                infoTemplate:template,
                outFields: window.outFields
              });

              featureLayer.setRenderer(renderer);
              map.addLayer(featureLayer);
            } ,
            function( evt ){
              // show the border container now that the dijits 
              // are rendered and the map has loaded
              domStyle.set(registry.byId("container").domNode, "visibility", "visible");
              populateGrid(Memory); // pass a reference to the MemoryStore constructor
          });

          function populateGrid(Memory) {
            var qt = new QueryTask(window.statesUrl);
            var query = new Query();
            query.where = "1=1";
            query.returnGeometry = false;
            query.outFields = window.outFields;
            qt.execute(query, function(results) {
              var data = array.map(results.features, function(feature) {
                return {
                  // property names used here match those used when creating the dgrid
                  "FID": feature.attributes[window.outFields[0]],
                  "PROV": feature.attributes[window.outFields[1]]
                }
              });
              var memStore = new Memory({ data: data });
              window.grid.set("store", memStore);
            });
          }
          // fires when a row in the dgrid is clicked
          function selectState(e) {
            // select the feature
            var fl = map.getLayer("stat");
            var query = new Query();
            query.objectIds = [parseInt(e.target.innerHTML)];
            fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
              if ( result.length ) {
                // re-center the map to the selected feature
                window.map.centerAt(result[0].geometry.getExtent().getCenter());
              } else {
                console.log("Feature Layer query returned no features... ", result);
              }
            });
          }

          // fires when a feature on the map is clicked
          function selectGrid(e) {
            var profinsi = e.graphic.attributes.PROV;
            var id = e.graphic.attributes.FID;
            // select the feature that was clicked
            var query = new Query();
            query.objectIds = [id];
            var states = map.getLayer("stat");
            states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
            // select the corresponding row in the grid
            // and make sure it is in view
            grid.clearSelection();
            grid.select(id);
          }

          function test(){
            alert("alert");
          }
        });
    });
</script>

I want call function inside dojo.ready function. For example, I want call function test() with onclick with this:

<input type="submit" value="Submit" onclick="test();">

but still not work.
Can anybody help me explain how to call function inside dojo.ready?

Answer 1

The way Asynchronous Module Definition (AMD) works is that all your variables are held within the scope of the function. There's no global google or esri object on which everything else is built (though in esri's case, the global object was left so that older scripts didn't break). Like a self executing JavaScript function, all the functions and variables declared within dojo.ready are stuck within the dojo.ready function.

If you really want to access a function or variable outside of dojo.ready, you could make the function/variable global by attaching it to the window object. Something like this:

window.test = function () {
  alert("alert");
};

Generally speaking, filling the window object with globals is kinda frowned upon, because you never know when someone else will overwrite your global "test" function with something else that doesn't do what you want it to do. If I wanted your submit button to run the test method without polluting the global namespace, I'd add "dojo/query" to your require list for something like this:

require([..., "dojo/query", ...],
  function (..., dojoQuery, ...) {
      ...
      dojoQuery("input[type='submit']").on("click", test);
      ...
  }
);