Following some flask tutorials I've built a table with clickable rows. Upon clicking any Index column value, user is redirected to a new route named after the clicked index value e.g. @app.route(/1). This however, is not what exactly what I want and I'm struggling in adjusting the app to my needs.
I would like user to be moved to a route 'XYZ' no matter the value clicked. Then, the 'XYZ' route should print/store the Index value clicked by user.
How can I change the HTML anchor value to static and at the same time store the clicked value?
HTML
{% extends "bootstrap/base.html" %}
{% block content %}
<head>
<script type="text/javascript" src="{{ url_for('static', filename='js/click_table.js') }}"></script>
</head>
<table id="data" class="table table-striped">
<thead>
<tr>
<th>Index</th>
<th>Playlist Name</th>
<th>Playlist ID</th>
</tr>
</thead>
<tbody>
{% for index, row in playlists_df.iterrows() %}
<tr>
<td><a href="{{ row['index'] }}"> {{ row['index'] }} </a></td>
<td>{{ row['name'] }}</td>
<td>{{ row['id'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
{% endblock %}
JS
$(document).ready(function() {
$('#data tr').click(function() {
var index = $(this).find("a").attr("href");
if(index) {
window.location = index;
}
});
});
Python part I'm going for:
@app.route('/XYZ')
def get_clicked_index_value():
# request index_value from JS
return Index