Динамически обновлять переменные Javascript, используя Jinja?

Question

У меня есть веб-форма, которая требует создания шаблона пользователем.Вызов всех предыдущих записей, которые являются шаблонами, не проблема, но передача информации в форму при вызове кажется сложной.По сути, я хочу, чтобы пользователь мог выбрать шаблон из выпадающего списка (см. Скриншоты и прочее ниже), а затем, основываясь на их выборе, обновить переменные в сценарии для автозаполнения данных формы.Прямо сейчас он выбирает только самую последнюю запись.Это возможно только с помощью python / flask / javascript или я что-то упустил?Любая помощь будет оценена!Спасибо!

Выпадающий шаблон

    <label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id='template_select' onchange='changeTemplate()'>
<option value=''></option>

{% for template_info in template_search %}
<option value='{{template_info.client_name}}'>{{template_info.client_name}}</option>
{% endfor %}

</select>

Javascript для изменения значений

{% for template_info in template_search %}

<script>
function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').value='{{template_info.client_name}}';
    document.getElementById('client_name').innerHTML='{{template_info.client_name}}';
}
</script>

{% endfor %}

Переход на PythonЗапрос

template_search = newmatter_model.NewClientMatter.query.filter_by(
            creator=verifier, is_template='on').all()

Answer 1

Ваша ошибка заключается в создании кода Javascript в цикле.Вам не нужно этого делать.

То, что вы хотите сделать, это думать о данных, отправляемых в браузер, как независимых .Заставь это работать сначала без Flask и Jinja2Создайте статическую страницу, которая работает и делает то, что вы хотите.

Следующий код будет работать со статическими данными:

function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').innerHTML = template;
}

<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id="template_select" onchange="changeTemplate()">
<option value=""></option>

<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
</select>

<div id="client_name"><i>No client set</i></div>

Это HTML-код для поля выбора, отдельного элемента <div> и кода Javascript для копирования значения выбранного параметра в <div>.Обратите внимание, что код Javascript ничего не знает о том, какие данные задействованы;имена клиентов не хранятся в коде.Все, что делает маленькая функция, это копирует значение из текущей выбранной опции в другое место.

Как только работает самостоятельно , вы можете начать думать о том, как вы собираетесь вставитьзначения из вашего приложения.В приведенном выше коде все, что нужно заменить, это раскрывающиеся опции, потому что код Javascript может затем получить доступ ко всему, что ему нужно, из значения элемента <select>.

Таким образом, код Javascript не нужногенерироваться на всех , вы генерируете только элементы <option>, как вы уже делали в своем вопросе.

Вам редко требуется генерировать динамический код Javascript, и для вашего приложения будет намного лучше, еслиты неСтатический код Javascript может обслуживаться CDN и кэшироваться в браузере, что устраняет необходимость повторного использования этого приложения для всех клиентов.Постарайтесь свести это к минимуму.

Вместо этого сгенерируйте только данные , с которыми должен работать код.

• Вы можете поместить эту информацию в теги HTML.В приведенном выше примере ваши данные помещаются в повторяющиеся теги <option>.Или
• вы можете добавить атрибуты данных в ваш HTML , которые доступны как для кода Javascript, так и для CSS.Или
• используйте AJAX для асинхронной загрузки данных;например, когда вы выбираете опцию в поле <select>, используйте Javascript и AJAX для вызова отдельной конечной точки на вашем сервере Flask, которая предоставляет больше данных в виде JSON или готового HTML, а затем используйте код Javascript для обновления вашей веб-страницы на основе этого.Или
• сгенерируйте данные JSON и поместите их прямо на свою HTML-страницу.Достаточно просто <script>some_variable_name = {{datastructure|tojson|safe}};<script> раздела;затем получите доступ к этому some_variable_name из своего статического кода Javascript, чтобы делать интересные вещи на странице.JSON - это (почти полностью) подмножество Javascript, и работа фильтра tojson гарантированно создаст для вас Javascript-совместимую структуру данных.Браузер загрузит его так же, как и любой другой встроенный код Javascript.