Jeditable puts entire table in edited cell with Python Flask

Question

I am using Datatables with the jQuery plugin, Jeditable in my Flask site to allow users to edit table contents which gets sent back to the Flask server as a POST request.

The POST portion works fine, but rather than showing the edited value in the cell, the entire tables gets stuffed in the cell and I can't figure out why.

I am referencing the example at: http://legacy.datatables.net/release-datatables/examples/api/editable.html

my code:

__init__.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def landing_page():

    if request.method == 'POST':
        print request.form
    return render_template('home.html')

app.run(debug=True)

home.html

<!DOCTYPE html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

    <script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
    </script>

    <script>
    $(document).ready(function() {
        /* Init DataTables */
        var oTable = $('#example').dataTable();

        /* Apply the jEditable handlers to the table */
        oTable.$('td').editable( 'http://127.0.0.1', {
            "callback": function( sValue, y ) {
                var aPos = oTable.fnGetPosition( this );
                oTable.fnUpdate( sValue, aPos[0], aPos[1] );
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id":oTable.fnGetPosition( this )[1],
                    "column": oTable.fnGetPosition( this )[2]
                };
            },
            "height": "14px",
            "width": "100%"
        } );
    } );

    </script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="30%">
        <thead>
            <tr>
                <th id="Name">Name</th>
                <th>Position</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
            </tr>

        </tbody>
    </table>
</body>
</html>

Pics of pre and post-edit:

Jeditable puts entire table in edited cell with Python Flask

0 Answers0