Tengo una aplicación de websockets donde muestro los clientes conectados. Yo uso matraz para el front-end.
Cuando se conecta un nuevo cliente, lo agrego a la lista de clients en python.
Del lado de HTML, tengo una tabla que recibe la lista de clientes a través de Jinja y crea una fila para cada cliente conectado. Esta tabla se actualiza cada 2 segundos con js.
Mi lista de clientes es una lista de diccionarios:
clients = [ { 'cp_id':'Jhon', 'last_heartbeat_from_now':datetime.utcnow() } ... ]Tengo mi mesa así:
<table id="clients"> <tr> <th>Name</th> <th>Last time connected </th> <th>Health</th> </tr> {% for i in clients %} <tr> <td>{{ i['cp_id'] }}</td> <td>{{ i['last_heartbeat_from_now'] }}</td> <td><img src="{{ url_for('static', filename='green.png') }}" class="health"></td> </tr> {% endfor %} </table> Quiero hacer que se pueda hacer clic en cada fila <tr> y redirigir a una URL dinámica con el nombre de la persona. Por ejemplo, cuando hago clic en Jhon en el HTML, quiero crear la URL dinámica: localhost:5000/dashboard/Jhon.
Traté de usar
<tr onclick="{{ url_for('dashboard', cp_id = i['cp_id']) }}">Pero no hace nada. Intenté hacer un data-href:
<tr data-href="{{ url_for('dashboard', cp_id = i['cp_id']) }}">Pero no estoy seguro de cómo usar esto.
Y finalmente mi código Python para la parte de la ruta es este:
@app.route('/dashboard/<string:cp_id>', methods=["GET", "POST"]) def dashboard(cp_id): return render_template('dashboard.html')¡Ya casi estabas allí!
La mejor manera de hacer esto es usando data-href :
<tr data-href="{{ url_for('dashboard', cp_id = i['cp_id']) }}">Sus filas se agregan dinámicamente, por lo que su script necesita delegar eventos. Esto significa que el evento onclick debe provenir de un elemento principal estático (si puede, el más cercano de los elementos secundarios dinámicos, en este caso uso el documento).
Si no delega eventos del padre estático al hijo dinámico, no funcionará. Así por ejemplo:
jQuery("tr[data-href]").on("click", function () ...Esto no funcionará en tu html.
Delegar controladores de eventos hará el trabajo.
Y agregas tu script jQuery:
<script type="text/javascript"> jQuery(document).ready(function () { jQuery(document).on("click", "tr[data-href]", function() { window.location.href = jQuery(this).attr('data-href'); }); }); </script>Y si desea agregar el efecto 'mano' al pasar el cursor por la fila, simplemente agregue esto a su CSS:
[data-href] { cursor: pointer }