How to update a popup content from its marker?

Question

I created a popup with Leaflet doing so:

marker.bindPopup(content).openPopup();

How can I update the content value afterwards?

I suppose to do it from the marker, something like this:

marker.updatePopup(newContent);

Answer 1

_popup has an underscore in front of it to indicate that it's a private / member instance, and should not be accessed directly. The correct API is Layer.setPopupContent(). e.g.

marker.setPopupContent(newContent);

Answer 2

I suppose you want the content to be changed after some event occured, like mouseover, contextmenu, or anything else.

To do so, you can use the following code:

//marker creation
var marker = L.marker([44.63, 22.65]).bindPopup('something').addTo(map);
marker.openPopup();

//changing the content on mouseover
marker.on('mouseover', function(){
    marker._popup.setContent('something else')
});

As you can see, you can acccess the popup for the desired marker using marker._popup method, and then use setContent method to change the text inside it.

popup.setContent method reference

Here's some code on Plunker demonstrating this: http://plnkr.co/edit/vjS495QPXiJpKalrNpvo?p=preview

Answer 3

Might be to late to reply, but for others, I think the best ways is here

http://jsfiddle.net/cPTQF/

$('button').click(function() {
   // Update the contents of the popup
   $(popup._contentNode).html('The new content is much longer so the popup should update how it looks.');

   // Calling _updateLayout to the popup resizes to the new content
   popup._updateLayout();

   // Calling _updatePosition so the popup is centered.
   popup._updatePosition();
   return false;
});

Answer 4

You can get the popup content with:

marker.getPopup().getContent();

Set the content it with:

marker.getPopup().setContent("123");
marker.getPopup().update();

Answer 5

marker5.bindPopup(html).openPopup();

                var html = `
                    <div class="popup-box">
                    <div class="title">`+title+`</div>
                    <div class="popup-data">
                        <div class="popup-title">长度: `+(totalDistance).toFixed(2)+` 千米</div>
                    </div>
                    <div class="popup-data">
                        <div class="popup-title">名称: </div>
                        <input id="linename" class="popup-data-input" value="`+ response.rows[i].name  + `" />
                    </div>
                    <div class="popup-data">
                        <div class="popup-title">管辖派出所: </div>
                        <select id="aioConceptName" class="popup-data-input" id="select">
                          <option value="管辖派出所601" selected>`+response.rows[i].mark + `</option>
                          <option value="管辖派出所602">管辖派出所602</option>
                          <option value="管辖派出所603">管辖派出所603</option>
                          <option value="管辖派出所604">管辖派出所604</option>
                        <select/>
                    </div>
                    <div class="popup-button">
                        <button class="del" onclick="polylineDelete(`+ myPolyLine.id +`)">删除</button>
                        <button class="confirm" onclick="polylineEdit(`+ myPolyLine.id + `,'`+ myPolyLine.name + `','`+ myPolyLine.mark + `'` +`)">保存</button>
                    </div>
                    </div>
                `;

---

function polylineEdit(id,names,mark) {
    // alert(id + name + mark)
    // name = '111图形955800';
    // alert($('#mark').val())
    var conceptName = $('#aioConceptName').val();
    // alert(conceptName)
    //地图划线保存+渲染
    var name = $('#linename').val();
    // var mark = $('#mark').val();
    console.log("地图划线修改+渲染");
    // var _list = [ [30.28990324883237,123.43688964843751],[29.54717721331581,123.26934814453126],[29.475470141887214,122.55523681640626],[30.0381887651539,122.50030517578126]];

    /*var myPolyLine = new polyLine();
    /!*myPolyLine.name = "图形51300";
    myPolyLine.type = "1";
    myPolyLine.latlng = _list;dashArray
    myPolyLine.mark = "300";*!/
    myPolyLine.name = name;
    myPolyLine.type = type;
    myPolyLine.latlng = latlng;
    myPolyLine.mark = marks;*/
    // console.log(JSON.stringify(myPolyLine));
    $.operate.save("popup/poly_line/edit",{id:id,name:name,type:2,mark:conceptName},console.log("修改成功"));
}
function polylineDelete(id) {
    $.operate.save("popup/poly_line/edit",{id:id,markone:'del'},console.log("删除成功"));
}

---

this my dynamic editor content.

Answer 6

I found that if you use a unique tag for the marker you can dynamically change the title information. If however, like I did you use just "marker" for the tag, then the title will not change if you update it.