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:
- 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 '''
''' is that a good approach to use tags to get variables into the javascript?
- 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?
- 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...
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.