Editor not updating page after submit

dmckim1977

I am using Editor with Django and after a really long time of messing with it I finally got my database updating from editor. The problem I have now is the page isn't refreshing after submit. I have patched the code together from different places so I am not sure if I made a mistake in the javascript code. I searched the forums and google but I couldn't find anything that helped me.

Here is my javascript:

<script type="text/javascript" charset="utf-8">
// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
             url: '/invoices/invoices/_id_/',
             type: 'PUT',
             headers: {'X-CSRFToken': '{{ csrf_token }}'},
            },
        "table": "#example",
        "idSrc":  'id',
        "fields": [
                {
                    "label": "Invoice Number:",
                    "name": "invoice_number",
                },
                {
                    "label": "Bill Name:",
                    "name": "bill_name",
                },
                {
                    "label": "Ordered By:",
                    "name": "ordered_by",
                },
                {
                    "label": "Job Type:",
                    "name": "job_type",
                },
                {
                    "label": "Well Name:",
                    "name": "well_name",
                },
                {
                    "label": "Contractor:",
                    "name": "contractor",
                },
                {
                    "label": "Creation Date:",
                    "name": "creation_date",
                },
                {
                    "label": "Invoice Office Code:",
                    "name": "invoice_office_code",
                },
                {
                    "label": "Invoice Total:",
                    "name": "invoice_total",
                },
                {
                    "label": "Date sent for signature:",
                    "name": "date_sent_for_signature",
                    "type": "date",
                },
                {
                    "label": "Method Sent:",
                    "name": "method_sent"
                },
                {
                    "label": "Person sent with invoice:",
                    "name": "person_sent_with_invoice"
                },
                {
                    "label": "Date invoice returned:",
                    "name": "date_signed_invoice_returned",
                    "type": "date",
                },
                {
                    "label": "Date submitted:",
                    "name": "date_submitted",
                    "type": "date",
                },
                {
                    "label": "Notes:",
                    "name": "notes"
                }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    $('#example').DataTable( {
        "dom": "Bfrtip",
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "order": [[0, 'desc' ]],
        "ajax": {
         url: '/invoices/invoice/',
         dataSrc: '[]'
        },
        "columns": [
            { "data": "invoice_number" },
            { "data": "bill_name" },
            { "data": "ordered_by" },
            { "data": "job_type" },
            { "data": "well_name" },
            { "data": "contractor" },
            { "data": "creation_date" },
            { "data": "invoice_office_code" },
            { "data": "invoice_total" },
            { "data": "date_sent_for_signature" },
            { "data": "method_sent" },
            { "data": "person_sent_with_invoice" },
            { "data": "date_signed_invoice_returned" },
            { "data": "date_submitted" },
            { "data": "notes" },
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
    } );
     } );
</script>

Here is my the response from the server:

[{"id": 4, "invoice_number": 115155, "bill_name": null, "ordered_by": null, "job_type": null, "well_name": null, "contractor": null, "creation_date": null, "invoice_office_code": null, "invoice_total": null, "date_sent_for_signature": "2018-01-01", "method_sent": "SAL", "person_sent_with_invoice": "dmckim", "date_signed_invoice_returned": "2018-01-02", "date_submitted": "2017-01-03", "notes": "this certainly doesn't seem to be working", "is_void": null, "is_paid": null}]

The column I updated in this example is 'notes': 'this certainly doesn't seem to be working'. The database updates but the page will remain the same with no errors.

kthorngren

If you reload the page does the data show correctly?

The only thing I see is your JSON has two extra fields:

    "is_void": null,
    "is_paid": null

I'm not sure if this would cause issues with the Editor updating the table display.

Kevin

dmckim1977

I didn't even notice that those extra values were in there but unfortunately that didn't help. I am wondering if maybe I am missing a success message or something. Everything updates on the server side but it only sends a 200

kthorngren

Looks like you need to return the response in a data object as described here:
https://editor.datatables.net/manual/server#Server-to-client

Should look something like this:

{
    "data": [
        {
    "id": 4,
    "invoice_number": 115155,
    "bill_name": null,
.....
    "date_signed_invoice_returned": "2018-01-02",
    "date_submitted": "2017-01-03",
    "notes": "this certainly doesn't seem to be working",
        }
    ]
}

Kevin

dmckim1977

Yes if I reload the page it shows the updates I made.

dmckim1977

I tried that too. Since I have

dataSrc: '[]' 

I think I need to leave the "data" key out. I will try again though just to make sure I didn't make a mistake.

allan

I think I need to leave the "data" key out.

Not in the case of Editor. ajax.dataSrc is only a DataTables option. In the case of Editor, as Kevin says, you need to have a data attribute in the object with the data being returned. This is to allow for other information such as options to also be sent to the client-side.

The full documentation for the client / server data interchange that Editor uses is available in the manual here.

Allan

dmckim1977

Ok, thank you Kevin and Allen! This is why sometimes you need to step away and take a break sometimes. I tried appending data before but I didn't notice it was putting the inside of the array in a string or in quotes.