topic Why won't my code run a second time on lost focus of an element? in ArcGIS JavaScript Maps SDK Questions

Why won't my code run a second time on lost focus of an element?

ChrisSergent — Sun, 12 Dec 2021 04:57:06 GMT

I run a block of code that runs off of lost focus. It runs fine the first time, but then I try to set focus to a textbox(which appears not to work) so I click in the textbox and tab out. The lost focus event does not work that time? Why is that?

Here is the related code:

 on(document.getElementById('ownerAddress'), 'focusout', checkAddress);


                 on(document.getElementById('ownerAddress'), 'focusin', getElementId);


                 function getElementId() {
                                                               
                     node = document.activeElement.id;
                    
                 }




                 function checkAddress() {
                     console.log(node);
                     var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer");
                     //console.log(document.getElementById('ownerAddress').value);
                     //node = document.getElementById('ownerAddress');
                     node = document.getElementById(node);
                     // according to your service it takes Single Line
                     var params = {
                         "Single Line Input": node.value
                     };
                     locator.addressToLocations(params).then(function (addressCandidates) {
                         //console.log('success', addressCandidates);
                         //console.log(addressCandidates.length);


                         data = {
                             identifier: "id",
                             items: []
                         };


                         layout = [[
                        //   {'name': 'FID', 'field': 'id', 'width': '50px'},//
                           { 'name': 'Address', 'field': 'address', 'width': '200px' }
                         ]];
                         if (addressCandidates.length > 1) {
                             for (a = 0; a < addressCandidates.length; a++) {
                                 // This is the address that should go into a grid cell
                                 data.items.push(lang.mixin({ id: a + 1 }, { address: addressCandidates.address }));
                                 console.log(addressCandidates.address);




                             }
                             console.log(addressCandidates);
                             items = arrayUtils.map(addressCandidates, function (result) {
                                 console.log(result);
                                 return result;
                             });
                             console.log(items);
                         }




                         console.log("Log" + data);
                         if (window.grid) {
                             Maingds
                             dojo.destroy('grid');
                             dijit.byId('grid').destroy(true);
                             registry.remove(dom.byId('gridDiv'));
                         }
                         store = new ItemFileWriteStore({ data: data });
                         grid = new DataGrid({
                             id: 'grid',
                             store: store,
                             structure: layout,
                             autoWidth: true,
                             autoHeight: false,
                             rowSelector: '20px'
                         });


                         
                         // display grid
                         //document.getElementById("grid").style.display = "block";
                         //alert("hello " + addressCandidates.length);
                         // Show modal
                         if (addressCandidates.length >= 1) {
                             $("#myModal").modal("show");
                             $('#myModal').show(function () {
                                 $(this).trigger('isVisible');




                             });


                             //registry.byId("grid").display=block;
                             grid.on("rowclick", onRowClickHandler);
                             //console.log(addressCandidates.length);




                             //hookup the event
                             $('#myModal').bind('isVisible', isVisible);




                             var adresses = addressCandidates.map(function () {
                                 return x.address;


                             });
                             //console.log(adresses);
                         }
                         else
                         {
                             alert("This address does not appear to be a city address. Please try again.");
                             document.getElementById(node).focus();
                         }


                     }).otherwise(function (err) {
                         console.log('somethings wrong', err);
                     });




                 }




                 //declare event to run when div is visible
                 function isVisible() {
                     /*append the new grid to the div*/
                     grid.placeAt("gridDiv");
                     /*Call startup() to render the grid*/
                     grid.startup();


                 }


                 function onRowClickHandler(evt) {
                     console.log(evt);
                     var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
                     console.log(clickedAddress);
                     alert(clickedAddress);
                     //  console.log(evt.explicitOriginalTarget.data);
                 }
             });

Re: Why won't my code run a second time on lost focus of an element?

ChrisSergent — Sun, 12 Dec 2021 04:57:09 GMT

What I needed to do was to evaluate the number of addresses at the beginning of my statement. Here is the resolution:

<!DOCTYPE html>

<html>

<head>

<style>

#gridDiv {

height: 100%;

width: 100%;

}

        #myModal {
            height: 100%;
            width: 100%;
        }


        .modal-body {
            height: 300px;
        } 
    </style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>


   
    <body class="claro">
        <form id="frmTest">
            <label id="lblOwnerAddress" for="ownerAddress">Owner's Address</label>
            <input type="text" id="ownerAddress" name="ownerAddress" value="111 S Main" />
            <div id="mainDiv" class="container">




                <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">




                        <!-- Modal content-->
                        <div class="modal-content">


                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Select an Address</h4>


                            </div>


                            <div class="modal-body">
                                <div id="gridDiv"></div>
                            </div>
                            <div class="modal-footer">


                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <script>
            var items
           


            require([
                    "dojo/on",
                    "dojo/_base/array",
                    "esri/tasks/locator",
                    "dojox/grid/DataGrid",
                    "dojo/data/ItemFileWriteStore",
                    "dijit/registry", "dojo/parser",
                    "dijit/registry",
                    "dojo/dom",
                    "dojo/_base/lang",
                    "dijit/layout/ContentPane",
                    "dojo/domReady!"
            ],
            function (on, arrayUtils, Locator, DataGrid, ItemFileWriteStore, registry, parser, registry, dom, lang) {
                parser.parse();


                var store, grid, data, layout, node;


                //document.getElementById("grid").style.display = "none";
                               


                on(document.getElementById('ownerAddress'), 'focusout', checkAddress);


                on(document.getElementById('ownerAddress'), 'focusin', getElementId);


                function getElementId() {
                                                             
                    node = document.activeElement.id;
                   
                }




                function checkAddress() {
                    console.log(node);
                    var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer");
                    //console.log(document.getElementById('ownerAddress').value);
                    //node = document.getElementById('ownerAddress');
                    node = document.getElementById(node);
                    // according to your service it takes Single Line
                    var params = {
                        "Single Line Input": node.value
                    };
                    locator.addressToLocations(params).then(function (addressCandidates) {
                        //console.log('success', addressCandidates);
                        //console.log(addressCandidates.length);
                        if (addressCandidates.length >= 1) {
                            console.log(addressCandidates.length);
                            data = {
                                identifier: "id",
                                items: []
                            };


                            layout = [[
                            //  {'name': 'FID', 'field': 'id', 'width': '50px'},//
                              { 'name': 'Address', 'field': 'address', 'width': '200px' }
                            ]];
                            if (addressCandidates.length > 1) {
                                for (a = 0; a < addressCandidates.length; a++) {
                                    // This is the address that should go into a grid cell
                                    data.items.push(lang.mixin({ id: a + 1 }, { address: addressCandidates.address }));
                                    console.log(addressCandidates.address);




                                }
                                console.log(addressCandidates);
                                items = arrayUtils.map(addressCandidates, function (result) {
                                    console.log(result);
                                    return result;
                                });
                                console.log(items);
                            }




                            console.log("Log" + data);
                            if (window.grid) {
                                dojo.destroy('grid');
                                dijit.byId('grid').destroy(true);
                                registry.remove(dom.byId('gridDiv'));
                            }
                            store = new ItemFileWriteStore({ data: data });
                            grid = new DataGrid({
                                id: 'grid',
                                store: store,
                                structure: layout,
                                autoWidth: true,
                                autoHeight: false,
                                rowSelector: '20px'
                            });




                            // display grid
                            //document.getElementById("grid").style.display = "block";
                            alert("hello " + addressCandidates.length);
                            // Show modal


                            $("#myModal").modal("show");
                            $('#myModal').show(function () {
                                $(this).trigger('isVisible');




                            });
                           
                            //registry.byId("grid").display=block;
                            grid.on("rowclick", onRowClickHandler);
                            //console.log(addressCandidates.length);




                            //hookup the event
                            $('#myModal').bind('isVisible', isVisible);


                        }
                        else
                        {
                            alert("This does not appear to be an address in the city of Decatur. Please try again.");
                           
                            dom.byId(node).focus();
                            dom.byId(node).value = "";
                           
                        }
                            var adresses = addressCandidates.map(function () {
                                return x.address;


                            });
                            //console.log(adresses);




                    })
                        .otherwise(function (err) {
                           
                            console.log('somethings wrong', err);
                        });
                   
                   
                }




                //declare event to run when div is visible
                function isVisible() {
                    /*append the new grid to the div*/
                    grid.placeAt("gridDiv");
                    /*Call startup() to render the grid*/
                    grid.startup();


                }


                function onRowClickHandler(evt) {
                    console.log(evt);
                    var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
                    console.log(clickedAddress);
                    alert(clickedAddress);
                    //  console.log(evt.explicitOriginalTarget.data);
                }
            });
        </script>
</body>
</html>