Search code examples
javascriptpythonhtmldjangofolium

How to show a text on the same webpage by pressing a button, button is on a popup on Folium map

As you all know we can print a text on the same webpage by this code on the HTML:

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

 </script>
 </body>

In my code the button is on the popup on the Folium map which looks like this: More info button on the folium popup

So, I would like to write "hi" on the h1 tag, onclick function for this button "More info!" on the same page:

in HTML file:

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

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

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

And I am using Django, so, the I predefined the popup like this:

In 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)

So, when I click on the button, I didn't get any response just like I showed in the first HTML code. Do you have any idea about the problem?

UPDATE I tested the AJAX JQUERY as well. the button outside the folium's popup will work onclick, but when the button is transferred to the popup, it would not work.

It came to my mind that maybe I can work with "link", instead of "button". The question is that: is it possible to have a link (href) that direct user to the same page without reloading? just like what AJAX does for buttons!

Solution

  • After a lot of research, I concluded that it is impossible to get a response from the Folium map click. For me, I used Leaflet and Ajax jQuery. I defined the map on the HTML file and used a function on-clicking the geo points. The function returned the point data to the views.py, some works were done, and the response was sent back to the HTML file in jQuery's success function. You can follow my code lines in my other qs: How to send a simple data by Ajax jQuery to views.py in Django?