1

So I am using the Geolocation module, specifically with the google maps API. I have a geolocation field. This field is unlimited to allow for adding multiple points to a map. This all works fine.

I added some Javascript that allows someone to basically enter an address into a modal window, and get the Geocoded latitude and longitude. I then take this latitude and longitude, change the relevant lat/lng fields in the geolocation widget, and trigger a change event so that the map marker is added to the map (or changed). This all works great as well. You can see the code that does this below:

$('#geocode_buttons').on('click', '.geocode_button', function() {
            var lat = $(this).data('lat');
            var lng = $(this).data('lng');

            console.log(lat, lng);
            
            if (selectedLat_id !== false && selectedLng_id !== false) {
                //change the value
                $('#' + selectedLat_id).val(lat);
                $('#' + selectedLng_id).val(lng);
                $('#' + selectedLat_id).attr('value', lat);
                $('#' + selectedLng_id).attr('value', lng);

                //trigger the ajax so the point appears on the map
                $('#' + selectedLat_id).trigger('change');
                geocode_modal.dialog( "close" );
                setTimeout(() => {
                    $('input.geolocation-input-longitude').each($.processLatLng);
                }, 500);
            }


        })

You can see I simply get the lat/long, set the value, then trigger the change event at a brief delay. The process LatLng function you see being called in the each function simply updates address labels, and has no bearing on my issue.

Anyways, so this widget has an "Add More" button, which lets you add additional geolocation (lat/long) fields. I have added a custom AJAX callback to this button (rather than the default one), in the field_widget_complete_form hook, like so:

$element['widget']['add_more']['#ajax']['callback'] = 'addMoreCallback';

This works fine, and my callback function can be seen here:

function addMoreCallback(array &$form, FormStateInterface $form_state) {
    dd($form_state->getValues());
    $form = GeolocationGoogleWidget::addMoreAjax($form, $form_state);
    
    


    return $form;
  }

The problem is, when I change an empty geolocation field set using the above process, in the ajax callback, that second fieldset (lat/long) that was changed via javascript is empty, and is cleared when the callback returns.

I'm assuming something is wrong with how I set the values of those lat/long fields with the javascript that is causing it to not register the values. Any idea what I am doing wrong?

Here are some screenshots of the general process to help visualize my problem:

step 1: Initial load

Step 2: Geocoding new Location

Step 3: Location selected

Step 4: Clicked add more, 2nd location cleared

Please note in the final screenshot there are 3 geolocation field sets, which is correct, but the 2nd field set was cleared.

1
  • for anyone who comes across this and has a similar issue, problem is that the fields are disabled when running the AJAX (same issue would happen if trying to submit the whole form). I used Javascript to make these fields not disabled. I had also been disabling the fields via the form API. I switched to using Javascript to disable for fields on page load, and enable the fields when the form is submit, or the ajax is about the run. That seemed to work. Dec 13, 2023 at 19:16

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.