时间戳

首页 > 解决方案 > 如何通过按下按钮在同一网页上显示文本，按钮位于 Folium 地图上的弹出窗口中

javascript - 如何通过按下按钮在同一网页上显示文本，按钮位于 Folium 地图上的弹出窗口中

问题描述

众所周知，我们可以通过 HTML 上的以下代码在同一网页上打印文本：

<body>
    <button onclick="myFunction()">Click me</button>
    <h1 id="myHeader"></h1>
 <script>
      function myFunction()
      {
       document.getElementById("myHeader").innerHTML = "hi";
      }

 </script>
 </body>

在我的代码中，按钮位于 Folium 地图上的弹出窗口中，如下所示： folium 弹出窗口上的更多信息按钮

所以，我想在 h1 标签上写“hi”，这个按钮的 onclick 功能“更多信息！” 在同一页上：

在 HTML 文件中：

<h1 id="myHeader">SSSSSS</h1>

    <div>
        <form name="AAA" >
            <center>
                {{ map| safe }}
            </center>
        </form>
    </div>

 <script>
 function showsth()
     {
     document.getElementById("myHeader").innerHTML = "hi";
     }
 
 </script>

我正在使用 Django，所以，我预定义了这样的弹出窗口：

在views.py中：

popup_t = (...
           + '<button onclick="showsth()">More info!</button>'
           )
test = folium.Html(popup_t, script=True)
popup = folium.Popup(test, min_width=150, max_width=500)

所以，当我点击按钮时，我没有得到任何响应，就像我在第一个 HTML 代码中显示的那样。你对这个问题有任何想法吗？

更新 我也测试了 AJAX JQUERY。folium 弹出框外的按钮将在点击时起作用，但是当按钮转移到弹出框时，它将不起作用。

我想到也许我可以使用“链接”而不是“按钮”。问题是：是否有可能有一个链接（href）将用户引导到同一页面而无需重新加载？就像 AJAX 对按钮所做的一样！

标签： javascriptpythonhtmldjangofolium

解决方案

经过大量研究，我得出结论，Folium地图点击是不可能得到响应的。对我来说，我使用 Leaflet 和 Ajax jQuery。我在 HTML 文件上定义了地图，并使用了单击地理点的功能。该函数将点数据返回给views.py，完成了一些工作，并将响应发送回jQuery 的成功函数中的HTML 文件。您可以在我的其他 qs 中按照我的代码行： 如何通过 Ajax jQuery 将简单数据发送到 Django 中的 views.py？

推荐阅读