Synopsis

I am trying to understand the correct approach for capturing data returned from a JS call to a third party, and ensuring it finds it’s way to my database. The page and form is in live view, and I would like to avoid breaking form validation or upsetting the live view life cycle.

NB: I played around with Phoenix ~4 years ago, and enjoyed it, but had to work on other technologies since.
I am back now, and intend to work with Elixir and Phoenix more seriously for a large side project.

Requirement I am implementing

I have a live view page that lists ‘locations’. To the UI, these are names, (EG: Home) and addresses.

To the backend, locations are all of the address constituents plus geometry (lat/lon). I have already setup PostGIS and geometry fields to capture this data enrichment.

At the bottom of the list of locations is a form to add new locations.

I have opted to obtain the geocoded address data from the front end in this case, simply because the library that gives me address autocomplete, returns the geocoded data in it’s response which is very convenient.

Running some sort of background job to geocode on the backend is less cost efficient in terms of the geocoding service, and would be wasted effort.

I have added javascript to app.js to perform ‘address autocomplete’ with the placekit.io service

As you can see from this javascript, I am using a very old (like me) web development trick where I set these values returned in the placekit api callback, into hidden field values.

function initPlaceKitAutocomplete() {
  const input = document.getElementById('lookup-address-input');
  if (input) {
    const pka = placekitAutocomplete('apikey-nothing-to-see-here', {
      target: '#lookup-address-input', // the 'id' in the HEEx <.input>
    });

    pka.on('pick', (value, item, index) => {
      console.log('pick', value, item, index);
      console.log('full address data', item);
      document.getElementById('latitude').value = item.lat;
      document.getElementById('longitude').value = item.lng;
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  loadPlaceKitAPI(initPlaceKitAutocomplete);
});

The idea being that the data will then be available in the form changeset on submission (I hope)

Question

Is this a reasonable / best practice approach? It feels hacky.

I have a sense that it would be possible (and perhaps cleaner, although more work) to have the pka.on event update the form changeset by speaking directly to the live view component somehow (and perhaps not require hidden input fields?)

So the UI would send the geocoded data to the backend, which would in turn cause live view to update the UI.

I would be very grateful for any advice on design and or implementation.

Thanks for reading

PS: Happy to add template and elixir for context if that helps