Calling a Javascript function from flask / python

Question

I know Python very well, but I'm new to web-stuff and JavaScript. I found a post about Calling a python function from button on website (Flask).

I want to do the following: I want to add a new row to an HTML table. The data will be coming from Python. I already found out that refreshing the site isn't a good way to do it, instead it seems JavaScript should be used. Say I have the following HTML code:

<table class="table" id="myTable">
  <thead>
    <tr>
      <th colspan="2">This is a table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>entry 1</td>
      <td>entry 2</td>
    </tr>
  </tbody>
</table>
<script src="js/scripts.js"></script>

and in the scripts.js I have the following function (from the linked post):

function appendRow(table_id) {
  var table_ref = document.getElementById(table_id).getElementsByTagName('tbody')[0];
  var new_row = table_ref.insertRow(table_ref.rows.length);
  var new_cell = new_row.insertCell(0);
  var new_text = document.createTextNode('New row');
  new_cell.appendChild(new_text);
}

Now disregarding the details how the function works / what can be optimized etc. my real question is: How can I call this function from Python / flask?

Additionally: How can I pass data (say a JSON-structure) to the JavaScript function?

Many thanks in advance!

Related / duplicate of - https://stackoverflow.com/questions/298772/django-template-variables-and-javascript — shad0w_wa1k3r, Sep 13 '17 at 18:00
There are many tutorials and articles on the internet about how ajax works. It's not really something that can be explained in a few sentences. For simple stuff like this, you would use a callback function. So you can almost think of it as passing the function to the data, instead of passing data to the function. — Håken Lid, Sep 13 '17 at 21:34

score 1 · Answer 1 · answered Sep 13 '17 at 21:09

See this link you can use ajax to load the table with out refreshing the page.

you can use flask jsonify to return json from your flask app. See this link and below example from flask doc

from flask import jsonify
@app.route('/_get_current_user')
def get_current_user():
    return jsonify(username=g.user.username,
                   email=g.user.email,
                   id=g.user.id)

will return the following json

{
    "username": "admin",
    "email": "admin@localhost",
    "id": 42
}

You may also want to use websockets if you want to be able to push new data to already opened pages without knowing when it will be sent. — jrtapsell, Sep 13 '17 at 22:14

score 0 · Answer 2 · answered Jul 20 '20 at 11:42

You could use socket.io.

The python implementation would be the server side, and it can be done using python-socketio.

This code is a basic implementation starting the socket server at localhost:5000

import eventlet
import socketio
import json

sio = socketio.Server()
app = socketio.WSGIApp(sio)

@sio.event
def connect(sid, environ):
    print('connect ', sid)

@sio.event
async def message(sid, data):
    print("message ", data, json.loads(data))
    # send a reply to the sender client socket 
    # await sio.emit('reply', room=sid)

@sio.event
def disconnect(sid):
    print('disconnect ', sid)

if __name__ == '__main__':
    eventlet.wsgi.server(eventlet.listen(('', 5000)), app)

The your client in the javascript side, using socket.io client api

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:5000');
  var to_python = {
    title: "this is just",
    body: "sample data to send to python"
    user: {
      "name": "",
      "email": "" 
    }
  }
  socket.emit('message', JSON.stringify(to_python));
</script>

I use this implementation in several applications, mind that, the socket.io protocol implementation must be compatible in both client-side (js) and server-side (python).

Calling a Javascript function from flask / python

2 Answers2