マップ外のボタンをクリックしたときに選択されたレイヤーのjquery UIダイアログを開く

Question

複数のレイヤーを持つチラシマップがあります。私はポリラインを描き、特定のレイヤーに対してそれらを削除して編集してから、jquery UIダイアログボックスでいくつかの情報を私のpostGis dbに送ることができます。

ポリラインの描画と削除に問題はありません。 マップ外のボタンをクリックして、選択したレイヤーを引き続き描画したり、レイヤーからポリラインを削除したりすることができます。

しかし、マップの外にあるボタンをクリックして、編集しているレイヤーに対して相対的なダイアログボックスを開くにはどうしたらいいですか？

私は、レイヤーを選択して保存ボタンをクリックすると、選択したレイヤーに対してダイアログボックスを開きますが、その後、レイヤーの "oneachfeature"に保存ボタンを呼び出してみました。他のレイヤーのダイアログボックスも開きます。ここで

私がやっているかを説明するためにいくつかのコード：

//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

を私は保存するアクションが必要な場合、ダイアログが定義され、後に調整されている。このようなものを、お勧めします。

実施例：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"); 
    }); 
}); 

これのいくつかはModal Confirmation Exampleからです。基本的には、どのレイヤーでも保存ボタンが呼び出されることがあります。それぞれに固有のダイアログを作成する必要はありません。作成し、必要に応じてボタンを変更することができます。