Open a jquery ui dialog box for the layer selected when clicking a button outside the map

Question

I have a leaflet map with multiple layers. I can draw polylines, delete and edit them for a particular layer and then, send some informations with a jquery ui dialog box, to my postGis db.

No problem for drawing and delete my polylines. I click on a button outside the map and can continue drawing a selected layer or delete polylines from a layer.

But now, how can I click on a button outside my map and open a dialog box relative to the layer I'm editing ?

I've tried calling my save button on the "oneachfeature" of my layer, so then when I select a layer and click on my save button, it first opens the dialog box relative to the layer selected but after, it also opens the dialog box for my other layer.

Here some code to explain what I'm doing :

 //I'm calling my first WFS layer var ajaxlayer1 = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parameterslayer1), dataType : 'jsonp', jsonpCallback: 'calllayer1' }); ajaxlayer1.done(layer1); function layer1 (reseaulayer1) { conduites_layer1 = new L.geoJson(reseaulayer1, { onEachFeature: eachfeaturelayer1 }); return layer1; } function eachfeaturelayer1 (feature, layer) { layer.on('click', function(e){ if(selectedFeature) selectedFeature.disableEdit(); map.closePopup(); selectedFeature = e.target; e.target.enableEdit(); }); layer.on('editable:enable',function (e) { //do some stuff here }); $('#saveBtn').on('click',function(e){ layer.disableEdit(); //open a jquery ui dialog box with informations from my second layer //var dialog1 = ... dialog_layer1.dialog("open"); }); layer.on('editable:disable',function (e) { // Some code to recover layer's coordinates, ... }); } //I'm calling my second WFS layer var ajaxlayer2 = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parameterslayer2), dataType : 'jsonp', jsonpCallback: 'calllayer2' }); ajaxlayer2.done(layer2); function layer2 (reseaulayer2) { conduites_layer2 = new L.geoJson(reseaulayer2, { onEachFeature: eachfeaturelayer2 }); return layer2; } function eachfeaturelayer2 (feature, layer) { layer.on('click', function(e){ if(selectedFeature) selectedFeature.disableEdit(); map.closePopup(); selectedFeature = e.target; e.target.enableEdit(); }); layer.on('editable:enable',function (e) { //do some stuff here }); $('#saveBtn').on('click',function(e){ layer.disableEdit(); //open a jquery ui dialog box with informations from my second layer //var dialog2 = ... dialog_layer2.dialog("open"); }); layer.on('editable:disable',function (e) { // Some code to recover layer's coordinates, ... }); } 

Answer 1

I would suggest something like this, where the dialog is defined and later adjusted when the save action is needed.

Working Example: https://jsfiddle.net/Twisty/f1gvo1h6/

HTML

<div>
  <div class="artwork">
  </div>
  <button id="saveBtn">
    Save
  </button>
</div>

<div id="saveDialog" title="Save Layer">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Do you wish to save the changes to this layer?</p>
</div>

jQuery

$(function() {

  $("#saveDialog").dialog({
    autoOpen: false,
    resizable: false,
    height: "auto",
    width: 400,
    modal: true
  });
  $("#saveBtn").click(function() {
    // Gather the layer that is being edited
    // Create actions and buttons
    $("#saveDialog").dialog("option", "buttons", [{
      text: "Save",
      click: function() {
        // Do stuff for the layer save
        // layer.disableEdit();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    // Open Save Dialog
    $("#saveDialog").dialog("open");
  });
});

Some of this is from the Modal Confirmation Example . Basically, we know that on any layer, the save button might be called. We do not need to create a unique dialog for each. We can create one, and then modify the buttons as needed.