通过传单中的AJAX更新弹出窗口的内容
Update content of popup via AJAX in leaflet
我正在尝试更新传单中弹出窗口的内容。首先,我创建标记并将弹出窗口绑定到它们:
$.ajax({
type: "GET",
url: "/?p=map&json=1"+filter,
dataType: 'json',
success: function (response) {
geojson = L.geoJson(response, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: onEachFeature
});
markers.addLayer(geojson);
map.addLayer(markers);
});
}
});
var layers = [];
function onEachFeature(feature, layer) {
feature.layer = layer;
layer.origID = feature.properties.id;
if (feature.properties && feature.properties.project_name) {
var divNode = document.createElement('DIV');
divNode.innerHTML = 'initial popup content from database <button onclick="makeAjaxCall('+feature.properties.id+')">more</button>';
layer.bindPopup(divNode);
}
layers.push(layer);
}
最初,弹出窗口中有一个按钮,它触发ajax调用以获取更新的弹出内容。
该ajax调用返回并调用setPopupContent():
function setPopupContent(id,data){
for(var i=0;i<layers.length;i++){
if(layers[i].origID == id){
console.log(layers[i]);
var p = layers[i].getPopup();
p.setContent(data);
p.update();
}
}
}
一切都按预期进行,但弹出窗口的大小没有更新到新内容。它保持在301像素。p.update()不应该也更新弹出窗口的大小吗?
或者有更好的方法来处理从弹出窗口中触发的弹出内容更新吗?
以下是一个示例:http://plnkr.co/edit/LUyOWqkSVazhiadEix2q?p=preview(thx iH8!)
谢谢你的帮助!
您的弹出窗口宽度受到L.Popup
的maxWidth
选项的限制,该选项默认为300px:
http://leafletjs.com/reference.html#popup-最大宽度
这可以在绑定/初始化弹出窗口时轻松设置,如下所示:
L.Marker([0, 0]).bindPopup('Lorem', {maxWidth: 600}).addTo(map);
Plunker上的叉子:http://plnkr.co/edit/nfxhuUV40dfRV21YKFpu?p=preview
相关文章:
- $.ajax().done()中的window.open和弹出窗口拦截器
- 窗口确认在 AJAX 帖子中打印 HTML 标签
- Ajax WordPress 帖子弹出窗口与 SimpleModal 和 jQuery
- ajax成功响应和firefox弹出窗口阻止程序
- 防止多次显示弹出窗口.Ajax添加结果已在DOM中注册
- 模态窗口yii2中的Ajax验证数据
- Firefox弹出窗口“;这个网页被重定向到一个新的位置“;在每个requestPromise ajax调用上,有什么方
- AJAX查询处于活动状态时禁用窗口大小调整
- 如何获得AJAX的UI设计器窗口
- 区分程序化Bing AJAX地图导航与用户平移/缩放和窗口大小
- 如何在 ajax 调用后生成弹出窗口
- 在 Ajax 调用中 Firefox 中的弹出窗口阻止程序问题已成功
- Ajax 模态窗口可以访问父窗口 PHP 数据吗?
- Ajax 请求未拉出 jQuery 对话框窗口
- 关闭窗口时触发 ajax 调用
- JavaScript 弹出窗口阻止程序和 Ajax 回调 - C# MVC 应用程序
- 如何从 Ajax 响应中执行主窗口中定义的 Javascript 函数
- 谷歌地图信息窗口 ajax 加载内容
- 无法使用引导弹出窗口(ajax)加载远程html
- 火虫停止窗口.ajax调用后的位置