How can I post data back to a Flask route?

SGiou

I am using Flask and passing the table data to a url in json format. The data is displaying well in the datatable. I have set the table cells to editable (using contenteditable=true in the html table div). I would like for the user to be able to commit any edits they make by clicking on a button. As far as I understand, I think this would involve updating the edited table data to the same url that it was originally retrieved from. However, I've not been able to get this working yet.

My datatables implementation:

<script>

                /* script to commit table edits, and reload the table's data without refreshing the page */
                var Table;

                var columns_all = {{columns_all|safe}};

                $(document).ready(function () {
                    $('#table1').dataTable({
                        destroy: true,
                        scrollX: true,
                        scrollY: '50vh',
                        scrollCollapse: true,
                        paging: false,
                        searching: true,
                        sort: true,
                        "columns": columns_all,
                        "ajax": {
                            url: "/index_get_data",
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            "dataType": "json",
                            "dataSrc": "data",
                            "contentType": "application/json"
                        },
                        "dom": '<"dt-buttons"Bf><"clear">lirtp',
                        "buttons": [
                            {extend: 'copy', className: 'copyButton'},
                            {extend: 'csv', className: 'csvButton'},
                            {extend: 'excel', className: 'excelButton'},
                            {extend: 'print', className: 'printButton'}
                        ],
                        "select": true,
                        "fixedColumns": {
                            leftColumns: 4
                        }
                    });
                });

                $("#commitButton").on("click", function (event) {
                    $.ajax({
                        url: "/index_get_data",
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        "dataType": "json",
                        "dataSrc": "data",
                        "contentType": "application/json"
                    }).done(function (result) {
                        Table.clear().draw();
                        Table.rows.add(result).draw();
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                    // needs to implement if it fails
                    });
                });
</script>

The html table div:

<table contenteditable='true' id="table1" class="tableBody dataTable table-bordered cell-border nowrap hover order-column" style="width:100%" >
<button type="button" class="btn-sm btn-success btn-space" id = "commitButton">Commit</button>
<button type="button" class="btn-sm btn-warning btn-space" id = "reverseButton">Reverse</button>

<thead>
     <tr>
         {%  for item in cols %}
         <th>{{ item }}</th>
          {% endfor %}
     </tr>
</thead>

</table>

In this case I'm not able to provide a working codepen/datatable example, as my data is sourced from a url with the route on my local computer.

Thanks in advance for any help with this.

kthorngren

As far as I understand, I think this would involve updating the edited table data to the same url that it was originally retrieved from.

There is no Datatables requirement for this. You are using jQuery Ajax to send your data to the server. You can send to any URL you want as long as you have a Flask route setup. You do have one problem in your ajax request: "dataSrc": "data",. jQuery Ajax doesn't have an option for dataSrc, this is a Datatables option (ajax.dataSrc) to tell datatables where the JSON data is if its not in the expected data object. Anyway you will want to use the data option, something like "data": "data",.

You can use a combination of console.log statements in the click handler and the browser's developer tools > network to debug what is sent to the Flask server and the response. This is the place to start.

Kevin

SGiou

Thanks for your help @kthorngren. That makes sense, but I'm still having issues with the implementation. I made some progress, and I've been able to get example data posted back to the url now, but I'm still having trouble accessing the data within the datatable. I've created a new related question here: https://datatables.net/forums/discussion/58487/how-can-i-access-the-data-in-a-datatable-using-ajax/p1?new=1