0

Working on a creating a custom CRS Leaflet map. On map rightclick, show a popup with select boxes for users interaction.

var submit_Loc_popup = L.popup();
map.on('contextmenu', onPopupBoxSubmit);
var featureGroup = L.featureGroup().addTo(map);

I have the select box's hidden, until something is chosen, shown here Fiddle#1: https://jsfiddle.net/ay9pso8L/

I'd like to have those select options inserted into my maps popupContent. Unsuccessfully tried different ways but nothing produces the JSfiddles clean selects/hidden content... I manually created the Div + select(s) with a gigantic HTML string, but I'm unable to hide content as they are embedded in quotes since it's a string... JSFiddle #2 Here: https://jsfiddle.net/0x16zqkc/

Excerpt from JSfiddle#2;

function onPopupBoxSubmit(eb) {

       var xy = map.project([eb.latlng.lat,eb.latlng.lng],6); 
       console.log(xy);
       var coords3 = convertToInGameCords(xy);
       console.log(coords3);
       var popupContent = <seeJSFiddle#2 for HTML>
submit_Loc_popup
                .setLatLng(eb.latlng)
                .setContent(popupContent + '"x": ' +coords3.y+', "y": '+coords3.x)
                .openOn(map);
          };

Reading the documentation: https://leafletjs.com/reference-1.4.0.html#popup-setcontent Maybe I've tried a function to create the DIV and pass that in but its still not modifiable.

I've been researching for a week and this Answer is somewhat similar to what I want... Kind of, but its for a marker and when I tried to do that with the popUpcontent it didn't work. Dynamically create leaflet popup via JavaScript Object

Long story short;

How can I merge JS fiddle#1 hidden_select_(#node_resource) into JS Fiddle#2's popup.setContent()?

EDIT#1 Based on Toms reply, JS Fiddle updated https://jsfiddle.net/q5cdhw3e/1/ Drop downs are working when including the handlers INSIDE a mymap.on('popupopen', However, my onSubmit is not working, I will dig around to see what I can find.

EDIT#2 JS Fiddle updated https://jsfiddle.net/Ls1zax5c/

Placing the eventlistener first solved the on_submit problem

  document.querySelector("#node_submission_form2").addEventListener("submit", function(e) {
1

There is no way of setting existing HTML element as popup content. The only way is to supply string description of HTML content via setContent method.

In your second JSFiddle, where you try to do this, there are several things wrong. First there is missing reference to BootStrap library:

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Then the static popup HTML code is not identical to the one that is dynamically created in your first JSFiddle. It should look like this:

<form id="node_submission_form2" onsubmit="return false;">
  <div class="node_submission_form_group" id="types">
    <select class="form-control" id="node_resource">
      <option disabled="" value="disabled" selected="">Select Type</option>
    <option value="resource_mining">resource_mining</option><option value="resource_lumberjacking">resource_lumberjacking</option><option value="resource_sickle">resource_sickle</option><option value="resource_monster">resource_monster</option><option value="resource_hands">resource_hands</option><option value="resource_poi">resource_poi</option></select>
  </div>
  <div class="container_node_resource">
    <div class="resource_mining" style="display: none;">
      Node Type for resource_mining
      <br>
      <select id="resource_mining">         
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_lumberjacking" style="display: none;">
      Node Type for resource_lumberjacking
      <br>
      <select id="resource_lumberjacking">       
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_sickle" style="display: none;">
      Node Type for resource_sickle
      <br>
      <select id="resource_sickle">        
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_monster" style="display: none;">
      Node Type for resource_monster
      <br>
      <select id="resource_monster">       
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_hands" style="display: none;">
      Harvesting Node Type for resource_hands
      <br>
      <select id="resource_hands">      
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
    <div class="resource_poi" style="display: none;">
      Node Type for resource_poi
      <br>
      <select id="resource_poi">         
      <option value="1">Opt 1</option><option value="2">Opt 2</option><option value="3">Opt 3</option><option value="4">Opt 4</option><option value="5">Opt 5</option></select>
    </div>
  </div>
  <button class="btn btn-primary" type="submit" value="submit">Submit to map!</button
</form>

Then you also have to set handlers for your popup form:

mymap.on('popupopen', function(e) {
  $('#node_resource').bind('change',
    function() {
      var elements = $('div.container_node_resource').children().hide(); // hide all the elements
      var value = $(this).val();

      if (value.length) { // if somethings' selected

        elements.filter('.' + value).show(); // show the ones we want

      }
    }).trigger('change');   
  document.querySelector("#node_submission_form2").addEventListener("submit", function(e) {
    if (!doValidation()) {
      e.preventDefault(); //stop form from submitting
      //alert(selectedValue);
      //add database submissions here
    }
  });
}); 

function doValidation() //Make sure they selected a Harvesting type, and return the one theey selected
  {
    var selectDocID = document.getElementById("node_resource");
    var selectedValueinDropdown = selectDocID.options[selectDocID.selectedIndex].value;
      var arrayLength = myStringArray_node_resource.length;
    if (selectedValueinDropdown == "disabled")
    {
      alert("Please Select Harvesting Type!");
      exit();
    }
    else
    {
        for (var i = 0; i < arrayLength; i++) 
        { 
          if (selectedValueinDropdown == myStringArray_node_resource[i])
          { 
            alert("myStringArray_node_resource[i] = " + myStringArray_node_resource[i]);
            var selectDocID2 = document.getElementById(myStringArray_node_resource[i]);

              var selectedValueinSubDropdown = selectDocID2.options[selectDocID2.selectedIndex].value;
              alert("selectedValueinSubDropdown = " + selectedValueinSubDropdown);
            }
        }
    }
 }

Now popup form will work, the only thing left is to adjust it to the right size. I'll leave this to you.

  • I've updated the JS fiddle, it works: jsfiddle.net/q5cdhw3e/1 Question, mysubmit is not picking up when submitted... Its not even recognizing the submit. (I have it to not submit as FALSE in the HTML but even when true, it reloads the page without catching the event listener) BTW TomazicM, you're a master, thank you so much! I've learned a lot from you're other posts across this forum. I didn't know where to set handlers with the form being a string into setContent, I didn't think of setting them inside mymap.on('popupopen', function(e). The way you suggested worked perfectly! – cattboy Apr 14 at 0:06
  • Tom, I figured it out.. I had to change the order inside the map.on('popupopen', function(e) { document.querySelector("#node_submission_form2").addEventListener("submit", function(e) { needed to be before all the creation of the select/options – cattboy Apr 14 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.