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