CODEWITHSUNDEEP
javascriptpythonflask
HHTEST TESTING
HHTEST TESTING

Reputation: 33

Dynamically update Javascript variables using Jinja?

I have a web form created that requires template creation by the user. Calling all previous entries that are templates isn't an issue, but passing the information to the form when called seems to be tricky. Basically I want the user to be able to select a template from the dropdown (See the screenshots and stuff below), then based on their selection, update the variables in the script to autofill form data. Right now, it only selects the most recent entry. Is this possible just using python/flask/javascript or am I missing something? Any help would be appreciated! Thanks!

Template Dropdown

    <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 to change values

{% 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 Passing in the Query

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

Upvotes: 3

Views: 3442

Answers (1)

Martijn Pieters
Martijn Pieters

Reputation: 1121972

Your mistake is to create Javascript code in a loop. You don't need to do this.

What you want to do is think of the data sent to the browser as independent. Make it work first without Flask and Jinja2. Create a static page that works and does what you want.

The following code would work with static data:

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>

That's HTML for a select box, a separate <div> element, and Javascript code to copy the selected option value into the <div>. Note that the Javascript code doesn't know anything about what data is involved; no client names are stored in the code. All that the small function does is to copy the value from the currently selected option, to somewhere else.

Once that works on its own you can start thinking about how you are going to insert the values from your application. In the above code, all that needs replacing is the dropdown options, because the Javascript code can then access everything it needs from the <select> element value.

So the Javascript code doesn't need to be generated at all, you only generate the <option> elements, as you already did in your question.

You rarely need to generate dynamic Javascript code, and it would be much better for your app if you don't. Static Javascript code can be served by a CDN and cached in the browser, removing the need for your app to keep serving that again and again for all clients. Try to minimise that whenever you can.

Instead, generate just the data that the code needs to operate on.

  • You can put that information in HTML tags. In the above example, your data is put in the repeated <option> tags. Or
  • you could add data attributes to your HTML, which are accessible both to Javascript code and to CSS. Or
  • use AJAX to load data asynchronously; e.g. when you pick an option in the <select> box, use Javascript and AJAX to call a separate endpoint on your Flask server that serves more data as JSON or ready-made HTML, then have the Javascript code update your webpage based on that. Or
  • generate JSON data and put it directly into your HTML page. Just a <script>some_variable_name = {{datastructure|tojson|safe}};<script> section is enough; then access that some_variable_name from your static Javascript code to do interesting things on the page. JSON is a (almost entirely a) subset of Javascript, and the way the tojson filter works is guaranteed to produce a Javascript-compatible data structure for you. The browser will load it just like any other embedded Javascript code.

Upvotes: 3

Related Questions