CODEWITHSUNDEEP
pythontemplatesflaskjinja2
user2671513
user2671513

Reputation:

Jinja2 to put a whole element in <option>

I need to dynamically select from the following:

So that I can show the selected element depending on POST request.

I want to templatize selected="selected" so that I can choose where to put.

<select name="my_name">
    <option value="5min">5-Min</option>
    <option value="1hour" selected="selected">Hour</option>
    <option value="1day">Day</option>
</select>

Upvotes: 1

Views: 9998

Answers (3)

user52366
user52366

Reputation: 1137

It is not totally clear to me what the background of your question is. If the reason is that you can't use wtf.quick_form(yourform) because you need some customization, you could simply use

{{ form.workers.__call__(**{'class': 'form-control'}) }}

for the respective field in your Jinja2 template. This selects the posted element in the form. Note how I define additional attributes (a class).

The result will be (for example):

<select class="form-control" id="worker" name="worker">
   <option value="0">text1</option>
   <option selected value="1">text2</option>
   <option value="2">text3</option>
</select>

This of course requires that you have a properly defined form:

class yourform(FlaskForm):
    workers = SelectField(
        'name',
        validators=[Required()],
        choices=[(0, 'text1'), (1, 'text2'), (2, 'text3')],
        coerce=int
    )
    (... whatever other fields here ...)

Upvotes: 0

Ricardo Silva
Ricardo Silva

Reputation: 388

Using the same approach as Pawel did, I just changed some small things in order to work with my actual version of Jinja2:

<select class="form-control" id="worker" name="worker">
     {% for key in workers %}
     <option value="{{key}}" {% if key == people.worker %} selected="selected" {% endif %}>
        {{key}}
     </option>
     {% endfor %}
</select>

And from the controller:

workers = {'First One','Second One', 'Third One'}
return render_template('edit.html', people=people, workers=workers)

Remember to put the controller code within the controller which is passing the data for the view.

Upvotes: 0

PawelP
PawelP

Reputation: 1180

Assume target is the desired value that you want to select (obtained from the POST dictionary). Then you need two things:

Prepare a dictionary containing value - display text pairs for all options in the select, e.g 

mydict = {'5min': '5-Min', '1hour': 'Hour', '1day': 'Day'}

In yourtemplate.html:

<select name="my_name">
    {% for key, value in mydict.items() %}
        <option value="{{key}}" 
        {% if (key == target) %} selected="selected" { %endif %}
        >
        {{value}}
        </option>
    {% endfor %}
</select>

How to pass the target - in your view you need to do this (I assume you know the basics of views in Flask)

    target = request.form['key_of_the_data_we_need'] # the value that should be selected
    mydict = {'5min': '5-Min', '1hour': 'Hour', '1day': 'Day'} # helper for the select
    return render_template('yourtemplate.html', target=target, mydict=mydict)

This way, the data is sent to yourtemplate.html which contains the code discussed above, therefore selecting the desired <select> option.

Upvotes: 4

Related Questions