Возвращается URL при попытке получить значение из тега select - PullRequest
Новая
       1

Возвращается URL при попытке получить значение из тега select

0 голосов
/ 17 марта 2019

Я новичок в flask и Javascript. Все, что я пытаюсь сделать, это создать форму с динамическим выпадающим списком, получить выбранные значения и поместить их в базу данных.

Сейчас я нахожусь на первом этапе получения динамических выпадающих списков.

Вот моя часть кода на python. 

class Form(FlaskForm):
    site = SelectField('Site', choices=[(' ', ' '), ('International', 'International'), ('Domestic', 'Domestic')])
    location = SelectField('Location', choices=[])
    city = SelectField('City', choices=[])
    street = SelectField('Street', choices=[])
    sub_street = SelectField('BuildingStreet', choices=[])
    floor = SelectField('Floor', choices=[])
    room = SelectField('Room', choices=[])
    side = SelectField('Side', choices=[])

@app.route('/')
def basic():
    return render_template('basic.html')

@app.route('/Welcome', methods=['GET', 'POST'])
def index():
    form = Form()

    location_choice_list = [(locations.id, locations.location) for locations in
                            Hostname.query.filter_by(site='International').all()]
    form.location.choices = remove_duplicates.unique_list(location_choice_list)

    city_choice_list = [(cities.id, cities.city) for cities in Hostname.query.filter_by(site='International').all()]
    form.city.choices = remove_duplicates.unique_list(city_choice_list)

    street_choice_list = [(streets.id, streets.street) for streets in
                          Hostname.query.filter_by(site='International').all()]
    form.street.choices = remove_duplicates.unique_list(street_choice_list)

    sub_street_choice_list = [(sub_streets.id, sub_streets.sub_street) for sub_streets in
                              Hostname.query.filter_by(site='International').all()]
    form.sub_street.choices = remove_duplicates.unique_list(sub_street_choice_list)

    floor_choice_list = [(floors.id, floors.floor) for floors in
                         Hostname.query.filter_by(site='International').all()]
    form.floor.choices = remove_duplicates.unique_list(floor_choice_list)

    room_choice_list = [(rooms.id, rooms.room) for rooms in Hostname.query.filter_by(site='International').all()]
    form.room.choices = remove_duplicates.unique_list(room_choice_list)

    side_choice_list = [(sides.id, sides.side) for sides in Hostname.query.filter_by(site='International').all()]
    form.side.choices = remove_duplicates.unique_list(side_choice_list)

    return render_template('index.html', form=form)

@app.route('/location/<site>')
def location(site):
    print(site)

    choice_list = Hostname.query.filter_by(site=site).all()

    locationObjp = {'id': '', 'location': ''}
    c = [{'id': ' ', 'location': ' '}]
    for location in choice_list:
        locationObj = {}
        locationObj['id'] = location.location
        locationObj['location'] = location.location

        if locationObj['location'] != locationObjp['location']:
            c.append(locationObj)
            locationObjp = locationObj
        else:
            locationObjp = locationObj

    return jsonify({'Location_Choice_list': c})

@app.route('/city/<location>')
def city(location):
    print(location)

    choice_list = Hostname.query.filter_by(location=location).all()

    cityObjp = {'id': '', 'city': ''}
    c = [{'id': ' ', 'city': ' '}]
    for city in choice_list:
        cityObj = {}
        cityObj['id'] = city.city
        cityObj['city'] = city.city

        if cityObj['city'] != cityObjp['city']:
            c.append(cityObj)
            cityObjp = cityObj
        else:
            cityObjp = cityObj

    return jsonify({'City_Chocie_list': c})

Итак, сначала я создал класс со всеми раскрывающимися списками, которые пользователь может выбрать из формы. За исключением сайта, все остальные варианты изначально заполняются параметрами, соответствующими "International". все местоположения, соответствующие «Международному», все города, соответствующие «Международному» и так далее. Я использовал небольшую функцию, которую я поставил как модуль, чтобы удалить дубликаты записей в базе данных, которых нельзя избежать. Изначально, когда отображается форма, все работает как положено. Я не поднял файл basic.html, потому что он просто содержит ссылку на "/ Welcome". Также нет проблем с функцией remove_duplicates, которую я использовал в качестве модуля.

Это моя HTML часть кода. 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



    </head>
    <body>
        <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.site.label }} {{ form.site }}
        {{ form.location.label }} {{ form.location }}
        {{ form.city.label }} {{ form.city }}
        {{ form.street.label }} {{ form.street }}
        {{ form.sub_street.label }} {{ form.sub_street }}
        {{ form.floor.label }} {{ form.floor }}
        {{ form.room.label }} {{ form.room }}
        {{ form.side.label }} {{ form.side }}
        <input type="submit">
        </form>
        <script>
                var site_select = document.getElementById("site");
                var location_select = document.getElementById("location");
                console.log(site_select);
                console.log(location_select);
                site_select.onchange = function()  {

                    site = site_select.value;
                    console.log(site);

                    fetch('/location/' + site).then(function(response) {
                        response.json().then(function(data) {
                            var optionHTML = '';
                            for (var location of data.Location_Choice_list) {
                                optionHTML += '<option value="' + location.id + '">' + location.location + '</option>';
                                }

                                location_select.innerHTML = optionHTML;



                            })

                        })
                }

                var city_select = document.getElementById("city");
                location_select.onchange = function()  {

                    location = location_select.value;
                    alert(location);


                    fetch('/city/' + location).then(function(response) {
                        response.json().then(function(data) {
                            var optionHTML = '';
                            for (var city of data.City_Choice_list) {
                                optionHTML += '<option value="' + city.id + '">' + city.city + '</option>';
                                }

                                city_select.innerHTML = optionHTML;


                            })

                        })
                }



        </script>

    </body>
    </html>

Вот в чем проблема. Как мы видим, есть два маршрута '/ location /' и '/ city /'. Эти два маршрута должны возвращать jsonified версию местоположений, которые принадлежат определенному сайту и городам, которые принадлежат определенному местоположению. Javascript выполняет выборку этих URL-адресов, а затем использует записи в выводе jsonified для формирования операторов выбора для следующих выпадающих списков. Теперь здесь первый зависимый выпадающий список (местоположение), при выборе «сайта», меняется совершенно, как и ожидалось. Я только что написал точную функцию для получения городов для определенного места. Как видно из кода, значения onchange сайта и местоположения получаются через обычный (.value) атрибут оператора select. Для сайта я получаю правильное значение после выбора. Но для местоположения после выбора возвращаемое значение (я предупредил) равно "http://127.0.0.1:5000/Welcome", и поэтому это значение используется JavaScript при извлечении, что, очевидно, приведет к ошибке 404.

Так что я не уверен, почему первая функция работает нормально, а вторая - нет. Я хочу знать причину, по которой значение местоположения захватывается как URL, а не выбранное значение. Поскольку он возвращается в виде URL, я получаю ужасный «Uncaught (обещание) неожиданный токен <в позиции 0. Я также попытался распечатать начальные значения site_select и location_select, которые также хороши без каких-либо ошибок. </p>

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

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 18 марта 2019

Ваша переменная location конфликтует с переменной window.location, которая принимает текущий документ url- https://developer.mozilla.org/en-US/docs/Web/API/Window/location

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];

const countries = document.querySelector('#countries');
let optionHTML = ""; 

list.forEach((obj) => {
    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';
});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {
    location = this.value;
    // alert(location);
    alert(window.location === location);
});
<select name="" id="countries"></select>

Вместо этого используйте другую переменную, отличную от location, или используйте переменную block-scoped, используя let или const, которые не подняты и не конфликтуют с глобальными переменными. 

var list = [{"id":" ","location":" "}, {"id":"CN0","location":"CN0"},{"id":"India","location":"India"},{"id":"Japan","location":"Japan"},{"id":"Honkong","location":"Honkong"},{"id":"GB0","location":"GB0"}];


const countries = document.querySelector('#countries');

let optionHTML = ""; 

list.forEach((obj) => {
    optionHTML += '<option value="' + obj.id + '">' + obj.location + '</option>';
});

countries.innerHTML = optionHTML;

countries.addEventListener('change', function() {
    let location = this.value;
    console.log(location);
});
<select name="" id="countries"></select>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...