I've been using the python and WTForms to do some dropdown select boxes. I've been applying JS Select2 on them for extra customization.
So far, I've had no issues with getting this format to work on other pages, but am now having issues when trying to use the form multiple times on the same page.
The JS Select2 is only applying to ONE of the TWO forms. I've tried so many different things to get it to work on both fields, but here is the most recent.
Form
class SelectRecipe(FlaskForm):
rqty = DecimalField("Multiplyer", validators=[validators.InputRequired()])
name = SelectField(
"Recipe",
validators=[validators.InputRequired()],
validate_choice=False,)
submit = SubmitField("Submit")
Python (NOTE: THIS IS INCOMPLETE AS I AM TRYING TO GET THE JS FUNCTION WORKING FIRST)
@app.route("/weekly_plan")
def weekly_plan():
monday_form = SelectRecipe()
a = db.session.query(Recipe.name).order_by(Recipe.name)
a = [i[0] for i in a]
monday_form.name.choices = [("")] + [(x) for x in a]
tuesday_form = SelectRecipe()
tuesday_form.name.choices = [("")] + [(x) for x in a]
if monday_form.validate_on_submit():
return render_template(
"weekly_planner.html",
monday_form=monday_form,
tuesday_form=tuesday_form,
a=a,
)
return render_template(
"weekly_planner.html",
monday_form=monday_form,
tuesday_form=tuesday_form,
a=a,
)
And the HTML/JINJA with the JS Script:
<b>Monday</b>
<form method="POST">
{{ monday_form.hidden_tag() }} {{
monday_form.rqty.label(class="form-label") }}{{
monday_form.rqty(class="form-control w-50") }} <br />
{{ monday_form.hidden_tag() }} {{
monday_form.name.label(class="form-label") }}{{
monday_form.name(class="monday") }}
</form>
<b>Tuesday</b>
<form method="POST">
{{ tuesday_form.hidden_tag() }} {{
tuesday_form.rqty.label(class="form-label") }}{{
tuesday_form.rqty(class="form-control w-50") }} <br />
{{ tuesday_form.hidden_tag() }} {{
tuesday_form.name.label(class="form-label") }} {{
tuesday_form.name(class="tuesday") }}
</form>
<script>
$(document).ready(function () {
$(".monday").select2({
placeholder: "{{ monday_form.name.label.text }}",
allowClear: true,
width: "100%",
});
$(".tuesday").select2({
placeholder: "{{ tuesday_form.name.label.text }}",
allowClear: true,
width: "100%",
});
});
</script>
So, the issue is that I can get my desired affect to work perfectly. For ONLY 1 field (Monday OR Tuesday)...I've been playing around with this so much, I can't remember all that I've tried. In the above example, it is working on the Tuesday Form, but not the Monday.
If I were to change within the HTML file:
{{monday_form.name(class="monday") }} --> {{monday_form.name(class="form-control")}}
And the:
{{tuesday_form.name(class="tuesday") }} --> {{tuesday_form.name(class="form-control")}}
And then change the JS script to:
<script>
$(document).ready(function () {
$("#name").select2({
placeholder: "{{ monday_form.name.label.text }}",
allowClear: true,
width: "100%",
});
$("#name").select2({
placeholder: "{{ tuesday_form.name.label.text }}",
allowClear: true,
width: "100%",
});
});
</script>
Then it only applies to the Monday Field.
How do I get this select feature to apply to multiple fields without having to create a different field in my Form (eg. name1, name2, name3, etc). I want to avoid that.
Thanks