jcbridwe jcbridwe - 3 months ago 9
Javascript Question

Triggering function by dropdown menu choice

enter image description here
I am trying to highlight specific grid cells based on what a user chooses in a dropdown menu. First, I have some drop down menu html.

<select id="Status" class="dropdown-submenu">
<option selected disabled>Status</option>
<option value="NEW">New</option>
<option value="EXPORTED">Exported</option>
<option value="CHECKEDIN">Checked In</option>
<option value="POSTED">Posted</option>
</select >


I also have a global array that collects the job data (including the status for each job) and relates it to a grid cell on the map through a key, "CID."

var JobsArray = [];


Then I have a javascript variable that changes the style of the grid cell.

//variable to highlightJob cells
var highlightJob = {
fillColor: '#FF0000',
fillOpacity: 0.5,
weight: 0.25,
dashArray: ''
};


Next, I get the user's choice and then, searching through each item in my jobsArray, look to see if the user's status choice matches the status of that job. If it does (and that job matches a cell on the map through the "cid" comparison), then it calls the
.setStyle(highlightJob)
method on the layer.

document.getElementById("Status").onchange = function() {
var status = document.getElementById("Status").value;
console.log(status);
};

onEachFeature: function( feature, layer ){
var id = feature.properties.CID;

JobsArray.forEach(function (item) {
if(item.status === status && item.cid === id) {
layer.setStyle(highlightJob);
};
return false;
});


This works if I hardcode a choice in for the
item.status
such as

if(item.status === 'NEW' && item.cid === id) {... };


The sticking point seems to be getting the
status
variable in the loop.

Note#2: This is an edit from my original post. I have tried additional solutions since the above but cannot seem to get the
layer.setStyle(highlightJob);
part to work. I added the below section (and a few variations) to handle getting the current status value from the user's choice in the dropdown menu. All of the
console.log()'s
are returning the desired values. For instance, if I change the status to 'NEW', the
console.log(status)
return the value 'NEW' and the
console.log(stat)
returns the value of 1.

console.log(status);
JobsArray.forEach(function (item) {
if(item.status === 'NEW' && item.cid === id) {
console.log('Yay');
document.getElementById("Status").onchange = function() {
var status = document.getElementById("Status").value;
console.log(status);
if(status === 'NEW') {
layer.setStyle(highlightJob);
console.log("Whew");
stat = "1";
// } else {
// layer.setStyle(resetStyle);
};
console.log(stat);
var stat = "1";
if(stat === "1") {
console.log("yikes");
layer.setStyle(highlightJob);
};
};
};
return false;
});

Answer

After much trial and error, I was able to resolve this issue by using a slightly alternative method. First, when I employed the .setStyle(); Leaflet method under document.getElementById("Status").onchange = function{...}; did actually work to a limited degree. But it only worked on one (the first item in the array) instance. I also had my dropdown menu set up incorrectly. I was originally using

 <select class="dropdown menu">
  <option value="NEW">New</option>
  ....
 </select>

I changed it to use the more standard html dropdown menu list that allows the user to click the actual item in the sub-menu list. It now looks like

<ul class="dropdown-menu" aria-labelledby="dLabel">
              <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Status <span class="caret"></span></a>
                <ul class="dropdown-menu" aria-labelledby="dLabel">   
                  <li class="new"><a tabindex="-1" href="#">New</a></li>
                  <li class="exported"><a tabindex="-1" href="#">Exported</a></li>
                  <li class="checkedin"><a tabindex="-1" href="#">Checked In</a></li>
                  <li class="posted"><a tabindex="-1" href="#">Posted</a></li>
                </ul>
              </li>

Next, I created js variables to show different highlight colors to apply using the .setStyle(); method.

var redJob = {
  fillColor: '#FF0000',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var blueJob = {
  fillColor: '#038ef0',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var greenJob = {
  fillColor: '#26b426',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

var purpleJob = {
  fillColor: '#b22ea3',
  fillOpacity: 0.5,
  weight: 0.25,
  dashArray: ''
};

Finally, under onEachFeature: and the JobsArray.forEach(function (item) {...} section, I just added click event handlers using .on. Note: I am still in the process of turning the click handlers off when a different status option is clicked, but so far it works. If anyone can give me a pointer on how to handle clicking on different status options, let me know.

nEachFeature: function( feature, layer ){
          var id = feature.properties.CID;

          JobsArray.forEach(function (item) {
            $(".new").on("click", function() {
              if (item.status === "NEW" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(redJob);
              };
            });
            $(".exported").on("click", function() {
              if (item.status === "EXPORTED" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(blueJob);
              };
            });
            $(".checkedin").on("click", function() {
              if (item.status === "CHECKEDIN" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(greenJob);
              };
            });
            $(".posted").on("click", function() {
              if (item.status === "POSTED" && item.cid === id) {
                console.log("Victory");
                layer.setStyle(purpleJob);
              };
            });
          });