0

I've been teaching myself python and Django and wanted to show a clickable map on a webpage. I don't know javascript but I found jvectormap and it seems to be easy and works well.

However I am confused about template tags. With the code below I can show a world map, and using the onregion function can get the country code and send it to an alert, if I comment out the alert, I can send using the Django URL tag to another web page. 

{% load static %}
{% load static %}
{{params}}
    <!DOCTYPE html>
    <html>
    <head>
      <title>jVectorMap demo</title>
      <link href="{% static 'css/jquery-jvectormap-2.0.5.css' %}" rel="stylesheet" type="text/css" media="screen"/>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="{% static 'js/jquery-jvectormap-2.0.5.min.js' %}"></script>
      <script src="{% static 'js/jquery-jvectormap-world-mill-en.js' %}"></script>
    </head>
    <body>
      <div id="world-map" style="width: 600px; height: 400px"></div>
      <script>
      $(function(){
          $('#world-map').vectorMap({ map: 'world_mill_en',
                onRegionClick:function(event, code){
                  var message = (code);
                 alert( code );
                window.location.assign ("{% url 'mainapp:home2' %}")
              }
          });
      });
      </script>
    </body>
    </html>

So a couple of questions:

  1. I thought I should be able to use the template tag in the alert like alert( {{params}} ) but that doesn't seem to work. I thought you might be able to pass the string in params that way. I saw found a different post that suggested wrapping the variable with a tag '''
{{ params }}

''' is that a good approach to use tags to get variables into the javascript?

  1. More importantly with the URL template tag, I would like to pass the country code or other information back to the view. In the documentation it looks like you can either use:
{% url 'some-url-name' v1 v2 %}

or

{% url 'some-url-name' arg1=v1 arg2=v2 %}

How would I modify my current view and URL with that approach? 

def home(request):
    params='this is the home page '
    return render(request,'mainapp/home.html',{'params':params})

Do I just start by replacing the return with a redirect?

return redirect('some-view-name', params= code )

and then set up a url path where the code is passed as an id or a slug or something?

  1. Is there different way I should be trying where the onregion or an java onclick script sends something back to django?

Sorry for the multiple questions, but in learning mode...

UVphoton
  • 176
  • 1
  • 10
  • I think I understand a little more. The template is rendered on the server side, and before the java script runs. So it looks like I could use a series of if statements one for each country and jump permanent URLS that way. Or it seems that some people put a placeholder in an URL and so the template is written with that place holder. Then in the javascript replace the placeholder with the desired string. – UVphoton May 24 '20 at 00:57

1 Answers1

1

To answer my own question, I found the following on stack overflow that were helpful in understanding.

Django Template Variables and Javascript

Get javascript variable's value in Django url template tag

and several others.

The short answer is that the template tags once rendered are just text in the html file.

1) You can assign a javascript variable something from a template tag, but that is probably not a great idea in some cases since it could be misused.

2) Since the template tag is just text in the file, there are ways to put a placeholder and then use the .replace function to alter the placeholder and then reverse the URL. The usual way seems to have the placeholder be a number that would never be accessed and and replace the placeholder with a pk or an object id.

3) Some people point out that using GET statement is better and simpler. Somehow AJAX can be used to do this. I'm just learning how to spell Ajax so I will leave it to others to explain.

UVphoton
  • 176
  • 1
  • 10