Question

I have a JavaScript map that takes some coordinates from a django view/function when the template page first loads up like this:

<script type="text/javascript">    
...
map.setCenter(new f.LatLng{{lat_long}}, 11);
...
</script>

I also have another function on the same views.py file handling an ajax request that does some calculations and returns new coordinates that supposed to update the same spot where {{lat_long}} tag is.

So in a way I should make the {{lat_long}} coming from the function when the page first loads up disappear and replace it with a new {{lat_long}} that’s coming form the function handling the ajax request.

What would be the best way to go about this so both functions can update the same lat/long in the javascript code above? Real examples will be truly appreciated.

Answer 1

What Chris said is correct. You want to dynamically update the value from the server. Putting the code where you have it now just does it when the page is loaded, you need to use an AJAX request to keep asking the server for the latest value.

What you need to do is make another Django View that just returns the latitude and longitude, JSON being the easiest way (i.e. in the form {“latitude”: 12.2, “longitude”: 11.1}).

Your view will do the following:

1. Get latitude/longitude values from models
2. Convert to JSON format
3. Return a HTTPResponse object using render_to_response or whatever

On your client side, here is an example using the jQuery Javascript library to do an AJAX request:

<script type="text/javascript">


//Run When page first loads
map.setCenter(new f.LatLng{{lat_long}}, 11);


var updateLatLng = function () {
    $.ajax({
       type: "GET",
       url: "/url/to/latlng/view",
       data: "mapID=7", //Whatever extra parameters you need will go here
       success: function(data) {
         //This is run when we get data back from the server,
         //If you send back the data in JSON format
         //Then you can access the data using "data.latitude" and "data.longitude"
         map.setCenter(new f.LatLng(data.latitude, data.longitude});
       }
     });
};

//Call updateLatLng every two seconds
window.setInterval(updateLatLng , 2000);

</script>