I'm having trouble saving a geolocation to a Postgres database using Django-leaflet. I keep getting an error message that says
Uncaught TypeError: L.GeometryField is not a constructor
. My code involves AJAX calls.
<script>
var csrftoken = "{{ csrf_token }}";
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
{% endblock %}
<strong>Location Input:</strong>
<p id="demo" onload="getLocation()"></p>
<form method="post" >
{% csrf_token %}
{{ form.as_p }}
</form>
<script type="text/javascript">
var x=document.getElementById("demo").addEventListener("change",save_data);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function save_data(){
var token=$("{{ csrf_token }}");
var pos =$("#demo").val();
console.log("THIS IS:",x);
$.ajax({
type:"POST",
headers:{"X-CSRFToken":token},
url: "{% url 'shop:user-create' %}",
data:{pos:pos},
});
}
</script>
Error:
<script type="text/javascript">
var geodjango_id_user_loc = {};
geodjango_id_user_loc.fieldid = 'id_user_loc';
geodjango_id_user_loc.modifiable = true;
geodjango_id_user_loc.geom_type = 'Point';
geodjango_id_user_loc.srid = 4326;
function id_user_loc_map_callback(map, options) {
geodjango_id_user_loc.store_class = L.FieldStore;
(new L.GeometryField(geodjango_id_user_loc)).addTo(map);
};
</script>