We Keep Coding

Flask apply filter with multiple checkboxes

Hey good people of stackoverflow,
My application randomly selects a recipe from MongoDB (using pymongo) and displays it to the user.
My intention is to be able to apply filters (vegetarian, fish, beef and so on) to the next "random" selection after hitting Something else button.
I think I can achieve it by using request.form.getlist and creating the form in the pick_meal.html but it feels a bit overkill.
So far I am unable to figure it out.
Any help would be greatly appreciated.
The html and python function looks like this:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<h3>{% block title %} You should cook: {% endblock %}</h3>
<div class="row">
<div class="col-md-5 align-self-center text-center">
<span>{{ dish.dish_name }}</span>
</br>
</br>
<a class="btn btn-outline-success" href="{{ dish['dish_source'] }}" role="button">Go to web</a>
</div>
<div class="col-md-4">
<img src="{{ dish.dish_image }}" width="250px">
</div>
</div>
</br>
<div class="row">
<div class="col-md-5">
<button class="btn btn-primary">Something else</button>
<button class="btn btn-primary">Configrm choice</button>
<button class="btn btn-primary">Already cooked</button>
</div>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="vegetarian" id="flexCheckDefault" name="property_checkbox">
<label class="form-check-label" for="flexCheckDefault">Vegetarian</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="grill" id="flexCheckDefault" name="property_checkbox">
<label class="form-check-label" for="flexCheckDefault">Grill</label>
</div>
</div>
</div>
</div>
{% endblock %}
#app.route('/pick_meal/<string:dish_type>')
def pick_meal(dish_type):
# pick random meal based on category
dish = list(coll.aggregate([
{'$match':{
'cooked': False,
'dish_type': dish_type}},
{ '$sample':{
'size': 1 } }]))[0]
return render_template('pick_meal.html', dish=dish, dish_type=dish_type)

Jinja2-Flask bootstrap modal inside a for loop doesn't work

I am trying to list a bunch of information on a table and I want user to be able to click an icon and see the description of the content. My project is TODO list. I am showing the user {{ task.title }} within a for loop and I have an icon/button next to it to open the modal.
When I put my modal button inside my for loop and modal content outside the for loop, I am not able to catch the current data, example:
{{ task.description }} I can't catch this information from my database because I am outside the loop and I get jinja2 error because of this saying task is undefined.
If I put my modal content inside the for loop, then my modal is not working properly, modal screen kinda gets foggy and faded. I am adding an image of this error here.
IMG when I put my modal content inside the for loop, I get this screen
Anyone solved this issue before? It probably has an easy solution but I've been trying for days now I am kinda tilted...
My code:
<tbody class="align-middle">
{% for task in active_tasks: %}
<tr>
<td>{{task.deadline}}</td>
<td>
<a type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
Title
</a>
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ task.description }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
<td>
{% if task.priority == "High Priority": %}
<span class="badge bg-danger">{{ task.priority }}</span>
{% elif task.priority == "Medium Priority": %}
<span class="badge bg-warning">{{ task.priority }}</span>
{% else: %}
<span class="badge bg-success">{{ task.priority }}</span>
{% endif %}
</td>
<td>
<a href="{{ url_for('complete_task', id=task.id) }}" data-mdb-toggle="tooltip" title="Complete">
<i class="bi bi-check-lg check-icon"></i></a>
<a href="{{ url_for('delete_task', id=task.id, status='active') }}" data-mdb-toggle="tooltip" title="Remove">
<i class="bi bi-trash trash-icon"></i></a>
</td>
</tr>
{% endfor %}
</tbody>

Don't add your modal into your for loop. You can access the data using vanilla javascript. Search this in Google or YouTube
access table data with button using vanilla javascript

Colapsable Button Bootstrap Django

I'm trying to create a social media news feed, with the posts, but I dont want to show the comments just if the user presses the button Show Comments. The problem is that when I press the button of one post, all the post will extend comments. I don't really know how to solve this...
{% for post in posts %}
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}" alt="Mouse0270" />
<h3 class="author">{{post.author}}</h3>
<h5><span>Shared publicly</span> - <span> {{post.date_posted}} </span> </h5><br>
</div>
<div class="panel-body">
{% if user == post.author %}
<a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
<a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>
{% endif %}
<p>{{post.content}}</p>
{% if post.image %}
<img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
{% endif %}
{% if post.video %}
<video width="250" controls >
<source src="{{post.video.url}}" type="video/mp4" >
</video>
{% endif %}
</div>
<br/>
<div class="container" >
<button class="btn btn-primary">Add comment</button>
</div>
<br>
<button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
<div id="demo" class="collapse">
{% for comment in post.comments.all %}
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">
<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">
{{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is with the collapsable button above {% for comment in post.comments.all %}, but I dont know how to make it unique for every post.

Passing a python Value into form through a button ref in Django

I'm using the following view function to iterate over 3 values (Channels_collection) within a form:
def index(request):
template = loader.get_template('adray/home page.html')
Channels_collection = ['You Tube', 'Google search', 'Google search']
return render(request, 'adray/home page.html', {'Channels_collection': Channels_collection})
Within the home page.html, i'm creating 3 bootstrap modals using a for loop using the 3 of the values that were passed by the view.
These modals, that are launched through a button, (the "start test" button, its really a link) redirect the user into another input data form, as following:
{% extends "base.html" %}
{% block content %}
<div id="page-inner">
<div class="row">
{% for channel_type in Channels_collection %}
<div class="panel panel-default">
<div class="panel-heading">
Testing {{ channel_type}}
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click To launch {{ channel_type}} Experiment
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Set Up {{ channel_type}} Experiment</h4>
</div>
<div class="modal-body">
Welcome to our tests, set up your experiment for {{ channel_type}} </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<form action="{% url 'input_data' %}" method="POST">
Start Test
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Each iteration of the modal has its own channel_type value, my question is:
How can i save the value of channel type, when the button is being clicked?
Any help on that would be great!

Proper link not working in django

Okay so I am creating an app which displays a picture with title and description. Here it is
{% block content %}
<!-- MODAL IMAGE - This is the preview -->
{% if projects %}
{% for project in projects %}
<div class="col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="{{ project.preview.url }}" alt="">
<figcaption>
<h5>{{ project.title }}</h5>
<a data-toggle="modal" href="#modal1" class="btn btn-primary btn-lg">Take a Look</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL DETAIL - This is suppos to show the details -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{ project.title }}</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="{{ project.preview.url }}" alt=""></p>
<p>Category: {{ project.category }}</p>
<p>Detail: {{ project.detail }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endfor %}
{% endif %}
{% endblock %}
So the app is working, when I add a new project image it shows the preview of all projects created. But when I click on the "Take a look" it does show the pop up window but the image and title always refer to the first image and title. IN SHORT MY MODAL DETAIL ALL REFER TO THE FIRST IMAGE AND TITLE.
Thank you.
eak,

You can have only one element with a given ID (modal1 in your case). All of your "Take a look" links open the first element with the modal1 ID, because the rest of the elements' IDs are disregarded. You need to render unique IDs for each project, e.g.:
...
<a data-toggle="modal" href="#modal{{ project.pk }}" class="btn btn-primary btn-lg">Take a Look</a>
...
<div class="modal fade" id="modal{{ project.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...