How i keep the rendered tamplete with large amount of data to orthers route in Flask - database

Question

I'm having difficulties trying to create a modal with a new link on my webpage. I want the model to appear on top of the searched data.
I can't use session because the data is non json serializable.
#app.route('/search/<string:subject_in_box>', methods=['POST', 'GET'])
def show_data_subject(subject_in_box):
if request.method == 'POST':
subject_in_box = request.form['subject'].upper()
search_by_subject = Collegiate.query.filter_by(subject=subject_in_box).order_by(Collegiate.available.desc()).all()
return render_template(r'show_data.html', data=search_by_subject, subject_search=subject_in_box)
elif request.method == 'GET':
search_by_subject = Collegiate.query.filter_by(subject=subject_in_box).order_by(Collegiate.available.desc()).all()
return render_template(r'show_data.html', data=search_by_subject, subject_search=subject_in_box)
#app.route('/search/<string:subject_in_box>/<int:row_id>')
def modal_popup(row_id, subject_in_box):
return render_template('modal.html')
show_data.html
<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<!--<th class="th-sm">xxxxxx</th>-->
<!--<th class="th-sm">xxxxx</th>-->
<th class="th-sm">xxxx</th>
<th class="th-sm">xxx xxxOfer</th>
<th class="th-sm">xxxx xxxvagas</th>
<th class="th-sm">xxxx</th>
</tr>
</thead>
<tbody>
{% for item in data %}
<tr class="clickable"
onclick="window.location='{{url_for('modal_popup', row_id=item.row_id, subject_in_box=subject_search)}}'">
<!--<td>{{ item.collegiate }}</td>-->
<!--<td>{{ item.subject }}</td>-->
<td>{{ item.classes }}</td>
<td>{{ item.offered }}</td>
<td>{{ item.demand }}</td>
<td>{{ item.available }}</td>
</tr>
{% endfor %}
</tbody>
</table>

Answer 1

If I understand correctly, your problem is that clicking an item renders the modal.html and the original page isn't visible behind that modal page?
It's kind of hard to determine what you need to do without seeing the html files. Or without any error message. However here's 3 things you could try depending on your situation:
One
If your modal.html file contains the same html content as show_data.html plus some kind of modal window then you'll need to add the same data in the return statement of your modal_popup route
So something along these lines:
#app.route('/search/<string:subject_in_box>/<int:row_id>')
def modal_popup(row_id, subject_in_box):
search_by_subject = Collegiate.query.filter_by(subject=subject_in_box).order_by(Collegiate.available.desc()).all()
return render_template('modal.html', data=search_by_subject, subject_search=subject_in_box)
Two
If not and your modal.html file contains just the html for the modal part you could take a look at this stackoverflow question Open a new page as modal window
Three
Restructure your show_data.htmlto include the modal and its data. For example using bootstrap's modal https://getbootstrap.com/docs/5.3/components/modal/
Then you won't need your modal.html file anymore.