JQuery Ajax Call click button in popup to get data from json

Chang-HengYang — Sat, 11 Dec 2021 19:02:28 GMT

Hi All,

I appreciate your time in advance. I want to create a button inside the infoWindow (Popup). Ideally, users click the button('ElectricityMeter'), which calls the Ajax and display the JSON data in the Dialog (JQuery) on the map. The codes below are the snippet of my codes. It would be appreciated if you all could provide your opinions.

The workflow:

First: the new Popup, okMap is the object and the 'infoContainer' is the 'id ' for the infoWindow

 okMap.popup = new Popup({
                    lineSymbol:symbolLine,
                    fillSymbol:symbolFill,
                    markerSymbol:null
                },  "infoContainer");‍‍‍‍‍

Second: the JQuery and Ajax part inside the head within the HTML file. Here the attribute 'COMMENTS' works as the primary key (i.e. 54156635) to match the value provided by the common column name ('MeterNumber') in the 'ElecMeter.json' file. Inside the main HTML file, I also created two divs one for 'dialogs' and the other for 'EM-template'.

<script>
            $(document).ready(function(){
                var $dialogs = $('#dialogs');
                var emTemplate = $('#EM-template').html();

                function emTemplateCreator(em) {
                    $dialogs.html(Mustache.render(emTemplate,em))
                }

                $("div#infoContainer").find("button").click(function () {
                    $("#dialogs").dialog()
                    $.ajax({
                        type:'GET',
                        url:'data/ElecMeter.json',
                        success: function (ems) {
                            $.each(ems, function (i, em) {
                                if (em.MeterNumber == feature.feature.attributes.Comment){
                                    emTemplateCreator(em)
                                }
                            });
                        }

                    })
                })
            });
        </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Final, the button inside the info template

else if (feature.layerName === "ElctPole") {
                        feature.feature.setInfoTemplate(new InfoTemplate(feature.layerName,
                            "<b>Park Name</b>: ${Park_Name}<br>" +
                            "<b>Material</b>: ${Material}<br>" +
                            "<b>Line Branch</b>: ${LnBranch}<br>" +
                            "<b>Light</b>: ${Light}<br>" +
                            "<b>Switch</b>: ${Switch}<br>" +
                            "<b>Meter</b>: ${Meter}<br>" +
                            "<b>Transformer</b>: ${Transfmer}<br>" +
                            "<b>Attach Other</b>: ${OthrAttach}<br>" +
                            "<b>Condition</b>: ${Condition}<br>"+
                            "<b>Inspection Date</b>: ${InspctDtt}<br>" +
                            "<b>Comment</b>: ${Comment}<br>"+
                            "<button id='btnElectricityMeter'>ElectricityMeter</button>"

                    ));
                        infoPopupFeatures.push(feature.feature);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks,

Changheng

topic JQuery Ajax Call click button in popup to get data from json in ArcGIS JavaScript Maps SDK Questions

JQuery Ajax Call click button in popup to get data from json