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