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 ing 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!

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 ing 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!

• javascript
• python
• flask

Share Improve this question Follow asked Sep 13, 2017 at 17:58 wese3112wese3112 9311 gold badge11 silver badge77 bronze badges 2

• Related / duplicate of - stackoverflow./questions/298772/… – shad0w_wa1k3r Commented Sep 13, 2017 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 Commented Sep 13, 2017 at 21:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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 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 patible in both client-side (js) and server-side (python).