Add marker on a map and catch the point-value to a django form? Ajax / Geodjango

Question

Im playing around with Django/GeoDjango (and leaflet maps) but my lack of experience in Javascript/AJAX makes me want to check with you guys on this.

Say I want to add a marker with a position and some other information fields (and save it as a new Django model intance).

I want to click on the map, put a marker on the position, and open a form in a modal. Which then already has the position data from the map click. And some empty fields. And if a click a new place it updates itself.

• Should I bind a modal to the map click and then fill in the pointfield in a "hidden" field of some kind?
• Or "POST" the click-point-data to a django-view that catches the point and somehow sends back the form with this point-field filled in?
• Alternative solutions?

Im interested in your opinion on the best way construct this?

Answer 1

I would setup the modal and create your form on the client side on the map click rather than going back to the server to render the form. Since you don't need to hit the server to show the form, doing so will needlessly couple your client side and server side logic. And yes, you can just store the value of you marker position in a hidden field (or hidden fields, if you want to store latitude and longitude separately).

Edit:

I'm not really sure about how your architecture is setup, but on the javascript side you can add pointvalue directly into your form once you open the dialog. The following is a very rough example, and obviously won't be directly applicable in map context, but it may give you an idea of where to start. So let's say you have the following html from rendering your Django-form (along with a button to click):

<form id="dialogform" style="display: none">
    <input type="hidden" id="point" name="point"/>
    <input type="text" id="other" name="other"/>
</form>

<button id="map">Show Dialog</button>

You could then do something like this with your javascript:

// rather than bind a button called #map, you 
// would bind to whatever map click event is available
$('#map').click(function (event) {
    // get the point value from whatever map API you are using 
    var pointval = 123;

    // set the value of the hidden input
    $('#point').val(pointval);

    // open the dialog
    $( "#dialogform" ).dialog();    
});

You can then setup whatever logic you want to submit the dialog form. The hidden value will be submitted along with the rest of your inputs.

Answer 2

This is what Im trying with. A bit of the function. It seems to add the value to the input-field in my dialog-form for a second when i click the map but it disappears again. I have not included the rest of the function which is some form validation but i don't think it matters because i've tried without that part. It seems to work if I place the input outside of the dialog. Yes im a beginner over here.

function onMapClick(e) {
      var lat = e.latlng.lat;
      var lng = e.latlng.lng;

      if (typeof marker != 'undefined') {
          map.removeLayer(marker);
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }
      else {
          marker = L.marker([lat, lng], {icon: redMarker}).addTo(map);
      }


      $('#upload-modal').load('upload/ #myform');

      $('#test_input').val(lng + ',' + lat); //This is what Im trying <----

        $('#upload-modal').dialog({
              height: 550,
              width: 500,
              modal: false,