topic Form not Displaying During Click Event in ArcGIS JavaScript Maps SDK Questions

Form not Displaying During Click Event

ChrisSergent — Sat, 11 Dec 2021 23:17:38 GMT

I have changed a variable that used to be supportId for streetSigns and supports, but I needed to separate the values for querying purposes. I am supposed to be able to click on the sign layer and my form should open, but it does nothing. Any ideas?

Here is the click event code:

/* Update Sign Layer Begin */
        app.signLayer.on("click", function (evt) {


            


            var installed, signId, facing, visibility, condition, text, color1, delineator, illum, offset;
            var mountht, backing, width, height, txtSize, numSize, comments, twoSided, attachType, attachNum, attachLoc, siteObs, signShape, color2, mutcd;
            var signObjectId;


            signObjectId = evt.graphic.attributes.OBJECTID;
            mutcd = evt.graphic.attributes.MUTCD;
            installed = evt.graphic.attributes.INSTALLED;
            signId = evt.graphic.attributes.SIGNID;
            facing = evt.graphic.attributes.FACING;
            visibility = evt.graphic.attributes.VISIBILITY;
            condition = evt.graphic.attributes.CONDITION_;
            signSupportId = evt.graphic.attributes.SUPPORTID;
            text = evt.graphic.attributes.TEXT;
            color1 = evt.graphic.attributes.COLOR1;
            delineator = evt.graphic.attributes.DELINEATOR;
            illum = evt.graphic.attributes.ILLUM;
            offset = evt.graphic.attributes.OFFSET;
            mountht = evt.graphic.attributes.MOUNTHT;
            backing = evt.graphic.attributes.BACKING;
            width = evt.graphic.attributes.WIDTH;
            height = evt.graphic.attributes.HEIGHT;
            txtSize = evt.graphic.attributes.TXTSIZE;
            numSize = evt.graphic.attributes.NUMSIZE;
            comments = evt.graphic.attributes.COMMENTS;
            twoSided = evt.graphic.attributes.TWOSIDED;
            attachType = evt.graphic.attributes.ATTACHTYPE;
            attachNum = evt.graphic.attributes.ATTACHNUM;
            attachLoc = evt.graphic.attributes.ATTACHLOC;
            siteObs = evt.graphic.attributes.SITEOBS;
            signShape = evt.graphic.attributes.SIGNSHAPE;
            color2 = evt.graphic.attributes.COLOR2;
            




            // Clear form of values before connecting current values
            document.getElementById("signForm").reset();


            /* Enter your domain item and then the element to populate */
            populateSelect("MUTCD", "mutcd", "sign");
            populateSelect("VISIBILITY", "visibility", "sign");
            populateSelect("CONDITION_", "condition", "sign");
            populateSelect("COLOR1", "color1", "sign");
            populateSelect("DELINEATOR", "delineator", "sign");
            populateSelect("ILLUM", "illum", "sign");
            populateSelect("BACKING", "backing", "sign");
            populateSelect("ATTACHTYPE", "attachType", "sign");
            populateSelect("ATTACHLOC", "attachLoc", "sign");
            populateSelect("SITEOBS", "siteObs", "sign");
            populateSelect("SIGNSHAPE", "signShape", "sign");
            populateSelect("COLOR2", "color2", "sign");
            




            /* Populate form with data */
            
            document.getElementById("signObjectId").value = signObjectId;
            document.getElementById("mutcd").value = mutcd;
            document.getElementById("installed").value = installed;
            document.getElementById("signId").value = signId;
            document.getElementById("facing").value = facing;
            document.getElementById("visibility").value = visibility;
            document.getElementById("condition").value = condition;
            document.getElementById("signSupportId").value = signSupportId;
            document.getElementById("text").value = text;
            document.getElementById("color1").value = color1;
            document.getElementById("delineator").value = delineator;
            document.getElementById("illum").value = illum;
            document.getElementById("offset").value = offset;
            document.getElementById("mountht").value = mountht;
            document.getElementById("backing").value = backing;
            document.getElementById("width").value = width;
            document.getElementById("height").value = height;
            document.getElementById("txtSize").value = txtSize;
            document.getElementById("numSize").value = numSize;
            document.getElementById("signComments").value = comments;
            document.getElementById("twoSided").value = twoSided;
            document.getElementById("attachType").value = attachType;
            document.getElementById("attachNum").value = attachNum;
            document.getElementById("attachLoc").value = attachLoc;
            document.getElementById("siteObs").value = siteObs;
            document.getElementById("signShape").value = signShape;
            document.getElementById("color2").value = color2;




            if (app.supportLayer.visible == true) {
                document.getElementById("btnSignPrevious").style.visibility = "visible";
                document.getElementById("btnSignNext").style.visibility = "visible";
            } else {
                // url the query task is to be performed on
                var query = new esriQuery();
                var queryTask = new QueryTask(config.signLayerUrl);




                // count related records
                query.where = "SUPPORTID = " + signSupportId;


                // display number of related records in console
                queryTask.executeForCount(query, function (count) {
                    console.log(count);
                    if (count > 1) {
                        document.getElementById("btnSignPrevious").style.visibility = "visible";
                        document.getElementById("btnSignNext").style.visibility = "visible";
                    } else {
                        document.getElementById("btnSignPrevious").style.visibility = "hidden";
                        document.getElementById("btnSignNext").style.visibility = "hidden";
                    }


                })
            
            }




            


          
            document.getElementById("btnSignUpdate").style.visibility = "visible";
            // Show signs form for updating
            app.attributesSignModal.modal("show");


            ii = -1;




        });
        /* Update Sign Layer End */

And here is the HTML form that it is supposed to open:

<!-- Attributes Sign Modal Begin -->
    <form id="signForm">
        <div id="attributesSignModal" class="modal fade" style="display: none;" aria-hidden="true">
            <!-- Modal Dialog Begin -->
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Add/Edit Sign</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="signObjectId">Object ID</label>
                            <input type="number" class="form-control" name="signObjectId" id="signObjectId" readonly>
                        </div>
                        <!-- Mutcd Begin -->
                        <div class="form-group">
                            <label for="mutcd">MUTCD</label>
                            <select id="mutcd" class="form-control" name="mutcd" required></select>
                        </div>
                        <!-- Mutcd End -->
                        <!-- - Begin -->
                        <div class="form-group">
                            <label for="installed">Installed</label>
                            <input type="date" class="form-control" name="installed" id="installed" />
                        </div>
                        <!-- Installed End -->
                        <!-- Sign ID Begin -->
                        <div class="form-group">
                            <label for="signId">Sign ID</label>
                            <input type="number" class="form-control" placeholder="Sign ID" name="signId" id="signId" />
                        </div>
                        <!-- Sign ID End -->
                        <!-- Facing Begin -->
                        <div class="form-group">
                            <label for="facing">Facing</label>
                            <input type="text" class="form-control" placeholder="Facing" name="facing" id="facing" />
                        </div>
                        <!-- Facing End -->
                        <!-- Visibility Begin -->
                        <div class="form-group">
                            <label for="visibility">Visibility</label>
                            <select id="visibility" class="form-control" name="visibility" required></select>
                        </div>
                        <!-- Visibility End -->
                        <!-- Condition Begin -->
                        <div class="form-group">
                            <label for="condition">Condition</label>
                            <select id="condition" class="form-control" name="condition" required></select>
                        </div>
                        <!-- Condition End -->
                        <!-- Support ID Begin -->
                        <div class="form-group">
                            <label for="signSupportId">Support ID</label>
                            <input type="number" class="form-control" name="signSupportId" id="signSupportId" />
                        </div>
                        <!-- Support ID End -->
                        <!-- Text Begin -->
                        <div class="form-group">
                            <label for="text">Text</label>
                            <input type="text" class="form-control" name="text" id="text" />
                        </div>
                        <!-- Text End -->
                        <!-- Color 1 Begin -->
                        <div class="form-group">
                            <label for="color1">Color 1</label>
                            <select id="color1" class="form-control" name="color1" required></select>
                        </div>
                        <!-- Color 1 End -->
                        <!-- Delineator Begin -->
                        <div class="form-group">
                            <label for="delineator">Delineator</label>
                            <select id="delineator" class="form-control" name="delineator" required></select>
                        </div>
                        <!-- Delineator End -->
                        <!-- Illum Begin -->
                        <div class="form-group">
                            <label for="illum">Illum</label>
                            <select id="illum" class="form-control" name="illum" required></select>
                        </div>
                        <!-- Illum End-->
                        <!-- Offset Begin -->
                        <div class="form-group">
                            <label for="offset">Offset</label>
                            <input type="text" class="form-control" name="offset" id="offset" />
                        </div>
                        <!-- Offset Ends -->
                        <!-- Mountht Begin -->
                        <div class="form-group">
                            <label for="mountht">MOUNTHT</label>
                            <input type="text" class="form-control" name="mountht" id="mountht" />
                        </div>
                        <!-- Mountht End -->
                        <!-- Backing Begin -->
                        <div class="form-group">
                            <label for="backing">Backing</label>
                            <select id="backing" class="form-control" name="backing" required></select>
                        </div>
                        <!-- Backing End -->
                        <!-- Width Begin -->
                        <div class="form-group">
                            <label for="width">Width</label>
                            <input type="text" class="form-control" name="width" id="width" />
                        </div>
                        <!-- Width End -->
                        <!-- Height Begin -->
                        <div class="form-group">
                            <label for="height">Height</label>
                            <input type="text" class="form-control" name="height" id="height" />
                        </div>
                        <!-- Height End -->
                        <!-- Txt Size Begin -->
                        <div class="form-group">
                            <label for="txtSize">Text Size</label>
                            <input type="text" class="form-control" name="txtSize" id="txtSize" />
                        </div>
                        <!-- Txt Size End -->
                        <!-- Num Size Begin -->
                        <div class="form-group">
                            <label for="numSize">Numsize</label>
                            <input type="text" class="form-control" name="numSize" id="numSize" />
                        </div>
                        <!-- Num Size End -->
                        <!-- Comments Begin -->
                        <div class="form-group">
                            <label for="signComments">Comments</label>
                            <input type="text" class="form-control" name="signComments" id="signComments" />
                        </div>
                        <!-- Comments End -->
                        <!-- Two Sided Begin -->
                        <div class="form-group">
                            <label for="twoSided">Two Sided</label>
                            <input type="text" class="form-control" name="twoSided" id="twoSided" />
                        </div>
                        <!-- Two Sided End -->
                        <!-- Attach Type Begin -->
                        <div class="form-group">
                            <label for="attachType">Attach Type</label>
                            <select id="attachType" class="form-control" name="attachType" required></select>
                        </div>
                        <!-- Attach Type End -->
                        <!-- Attach Num Begin  -->
                        <div class="form-group">
                            <label for="attachNum">Attach Num</label>
                            <input type="text" class="form-control" name="attachNum" id="attachNum" />
                        </div>
                        <!-- Attach Num End -->
                        <!-- Attach Loc Begin -->
                        <div class="form-group">
                            <label for="attachLoc">Attach Loc</label>
                            <select id="attachLoc" class="form-control" name="attachLoc" required></select>
                        </div>
                        <!-- Attach Loc End -->
                        <!-- siteObs Begin -->
                        <div class="form-group">
                            <label for="siteObs">Siteobs</label>
                            <select id="siteObs" class="form-control" name="siteObs" required></select>
                        </div>
                        <!-- siteObs End -->
                        <!-- Sign Shape Begin -->
                        <div class="form-group">
                            <label for="signShape">Sign Shape</label>
                            <select id="signShape" class="form-control" name="signShape" required></select>
                        </div>
                        <!-- Sign Shape End -->
                        <!-- Color 2 Begin -->
                        <div class="form-group">
                            <label for="color2">Color 2</label>
                            <select id="color2" class="form-control" name="color2" required></select>
                        </div>
                        <!-- Color 2 End -->








                        <button id="btnSignSubmit" class="btn btn-success" type="submit" style="visibility:hidden">Submit</button> 
                        <button id="btnSignUpdate" class="btn" type="submit" style="visibility:hidden">Update</button>
                        <button class="btn btn-default" type="button">Cancel</button>    
                        <button id="btnSignPrevious" type="button" style="visibility:hidden">Prev</button>  
                        <button id="btnSignNext" type="button" style="visibility:hidden">Next</button>


                    </div>
                </div>
            </div>
            <!-- Modal Dialog End -->
        </div>
    </form>
    <!-- Attributes Sign Modal End -->

And the full version of the app is here:

csergent45/streetSigns at 1e5ccad65dbcdb7c427a2d248dd98a3d8a48e532 · GitHub

Re: Form not Displaying During Click Event

ChrisSergent — Sat, 11 Dec 2021 23:17:41 GMT

I actually had to comment out the console.log line to remove it's error as shown below:

/* Evaluate if any web services are not running */
        app.map.on("layer-add-result", function (evt) {
            //console.log(evt);
         
            var evalLayers = evt.layer.valueOf();


            if (evalLayers._div == null) {
               
                /* Page Redirect */
                window.location.assign("http://www.w3schools.com")
            }
           
        });

and I had to change the name of a button that was not on the HTML form:

// Changed name to correct button name
        on(dom.byId("btnSignPrevious"), "click", function () {
            console.log("Previous Works");
            var query = new esriQuery();
            var queryTask = new QueryTask(config.signLayerUrl);
            query.returnGeometry = false;
            query.outFields = ["*"];

So this solved two questions that I had, so I just marked them assumed answered. Left it up for informational reasons; but didn't want to take points for figuring it out myself.