CODEWITHSUNDEEP
pythonflaskjinja2
pikafan_8080
pikafan_8080

Reputation: 379

Passing a string in Python as a variable to render_template() in Flask

Consider an HTML File (with name 'index.html'), which contains a code for making a drop down menu. This code is shown below : 

    <select name = "from_length">
      <option value = "choose_1" {{ select_1_1 }}>Metre</option>
      <option value = "choose_2" {{ select_1_2 }} >Kilometre</option>
      <option value = "choose_3" {{ select_1_3 }}>Millimetre</option>
    </select>

Above code creates a drop down menu in HTML. The ' {{ }} ' braces will be rendered by Jinja, where one of 'select_1_1', 'select_1_2' or 'select_1_3' will be finally passed a value "selected". That is, when I try to render the above code with the help of render_template in Flask, by the following code:

return render_template('index.html', select_1_2 = "selected")

The above code shall be rendered as below: 

    <select name = "from_length">
      <option value = "choose_1">Metre</option>
      <option value = "choose_2" selected >Kilometre</option>
      <option value = "choose_3">Millimetre</option>
    </select>

This means that when the webpage index.html shall be displayed to the user, the user shall see 'Kilometre' by default on the drop down menu (and not 'metre', which is the first option)

So, in short, I am trying to display the user a default list option (i.e. either one of 'Metre', 'Kilometre' or 'Millimetre'). The default list option depends on the choice of user, and therefore, might vary.

Now, I come to the pythonic part of my question. Suppose a variable named a_string stores which out of {{select_1_1}}, {{select_1_2}} or {{select_1_3}} shall be passed as "selected" to render_template. So, if I wanted that 'select_1_2' should be the selected option (i.e if I want the user to see 'Kilometre' by default when the webpage is opened), then, a_string shall be storing 'select_1_2', or:

a_string = "select_1_2"

As I have mentioned, the string contained by a_string may change depending upon the user behavior with the webpage.

Now I face a dilemma here. Suppose a_string stores "select_1_2" (i.e. I expect the default option to be shown to the user as 'Kilometre'). When I try to put the following code in python, (with the intention that the default option being shown to the user shall be 'Kilometre'):

return render_template('index.html',a_string = "selected")

I get 'Metre' (which is the first option) being displayed on the web page (instead of 'Kilometre').

So, I wanted to know, if there is way by which I can pass the string stored in a_string as selected while using render_template.

Thanks in advance for helping me out.

Upvotes: 2

Views: 3829

Answers (3)

Ajax1234
Ajax1234

Reputation: 71471

@larsks's answer is the best Pythonic approach, however, if you do not want to greatly restructure the data that you are passing to the template, you can simply use Jquery:

In your template, pass back the HTML value of the option tag that you wish to be selected:

return render_template('index.html', to_select = "choose_2") #for 'Kilometre' to be selected

Then, in your template:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name = "from_length" data-select='{{to_select}}' id='select_pannel'>
  <option value = "choose_1">Metre</option>
  <option value = "choose_2" >Kilometre</option>
  <option value = "choose_3">Millimetre</option>
</select>
<script>
   $(document).ready(function(){
      var to_select = $("#select_pannel").data('select');
      $('option').each(function(){
         if ($(this).val() === to_select){
            $(this).attr('selected', true)
         }
      });

   });
</script>

Upvotes: 0

Molitoris
Molitoris

Reputation: 1035

I am not sure, if I understood your question correctly. Your goal is to dynamically pre-selected an option in a dropdown?

If this is the case, create the option labels from a list and pass an integer which indicates which options should be pre-select.

render_tempalte('index.html', options=["Meter", "Kilometer", "Millimeter"], preselect= 1)

index.html snipped 

<select name = "from_length">
    {% for option in options%}
        {% if loop.index0 == preselect %}
            <option selected>{{option}}</option>
        {% else %}
            <option>{{option}}</option>
        {% endif %}
    {% endfor %}
</select>

PS: You might want to pass a list of tuples (instead of just a list), if you also want to control the values besides the labels of the options.

Upvotes: 0

larsks
larsks

Reputation: 312710

There a couple of ways of approaching this question.

I think the simplest answer is "do it a different way". Rather than embedding the menu statically in your HTML, you should generate it:

<select name = "from_length">
{% for optval, optinfo in options.items() %}
<option value="optval" {% if optinfo.selected|default(false) %}selected{% endif %}>
{{ optinfo.name }}
</option>
{% endfor %}
</select>

Then in your Python code, you would define the menu:

options = {
    'choose_1': {'name': 'Metre'},
    'choose_2': {'name': 'Kilometre'},
    'choose_3': {'name': 'Millimetre'},
}

options['choose_2']['selected'] = True

This makes handling the "which item is selected" logic much easier.

However, to continue with your original approach, if you have:

a_string = "select_1_2"

Then you can call render_template like this:

return render_template('index.html', **{a_string: "selected"})

Upvotes: 3

Related Questions