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

[Chang-HengYang]

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