Блог

Казалось бы, это правильный вопрос для новичков, поэтому прошу прощения, но я, похоже, не могу его решить, поэтому обращаюсь за помощью.

В моем файле .js есть функция, которая взаимодействует с библиотекой Google Places для автозаполнения поля в форме. Затем у меня есть функция ajax, которая запускается при нажатии кнопки отправки, которая создает переменные в сеансе django. Интересующие меня данные — это lat and long .

Однако по какой-то причине я не могу передать данные для передачи от одного к другому. Я знаю, что функция ajax работает, потому что, если я ввожу фиксированные значения, они передаются в django, но, похоже, я не могу заставить его динамически обновляться.

 const csrf = document.getElementsByName('csrfmiddlewaretoken');
var lat;
var lng;

function autocomplete_location() {
    let defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(49.6331, -11.7247),
        new google.maps.LatLng(59.4850, 1.5906));

    let input = document.getElementById('id_your_location');
    let options = {
        bounds: defaultBounds,
        types: ["address"],
        fields: ["name", "geometry"],
    };

    let autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.addListener('place_changed', function() {

        // Get place info
        let place = autocomplete.getPlace();

        // Do whatever with the value!
        lat = place.geometry.location.lat()
        lng = place.geometry.location.lng()

        console.log(lat)
        console.log(lng)
    })
}


$(document).ready(function (){
    $(".btn").click(function (){
        $.ajax({
                url: '',
                type: 'POST',
                data: {
                    'csrfmiddlewaretoken': csrf[0].value,
                    'lat': lat,
                    'long': lng,
                },
                success: function (response) {
                    console.log(response)
                    window.location.replace('/new_path/')
                },
                error: function (error) {
                    console.log(error)

                }
        })
    })
})
  

Обновить ————————————————————

Мне удалось заставить это работать. Я переместил вызов ajax в функцию автозаполнения, но он работает только тогда, когда я нажимаю кнопку отправки, он не работает, когда я нажимаю клавишу ввода, поэтому мне нужно освежить свои JS и ajax, чтобы решить эту проблему.

 const csrf = document.getElementsByName('csrfmiddlewaretoken');

function autocomplete_location() {
    let defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(49.6331, -11.7247),
        new google.maps.LatLng(59.4850, 1.5906));

    let input = document.getElementById('id_your_location');
    let options = {
        bounds: defaultBounds,
        types: ["address"],
        fields: ["name", "geometry"],
    };

    let autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.addListener('place_changed', function() {

        // Get place info
        let place = autocomplete.getPlace();

        // Do whatever with the value!
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

        console.log(lat)
        console.log(lng)

        $("form").submit(function (){
            $.ajax({
                    url: '',
                    type: 'POST',
                    data: {
                        'csrfmiddlewaretoken': csrf[0].value,
                        'lat': lat,
                        'long': lng,
                    },
                    success: function (response) {
                        console.log(response)
                        // this is not good. But I couldn't find a better way to redirect
                        // window.location.replace('/coach/')
                    },
                    error: function (error) {
                        console.log(error)

                    }
            })
        })
    })
}
  

куда вы звоните autocomplete_location() ? попробуйте передать lat и long в этой функции в качестве параметров, например autocomplete_location(lat, long)