File Upload with Inline Edit Button Not Working

dennisgaudenzi

Hi, I am trying to use the example here for file upload (https://editor.datatables.net/examples/advanced/upload.html) and move the click of the button outside the table to an inline edit link like this: https://editor.datatables.net/examples/simple/inTableControls.html

I have the invoke of the edit modal with the file upload working fine from the edit link. The upload actually works and the preview of the image is there as expected in the modal. BUT, when I click the update button to push to the datatable, it is not appearing in the data like in the upload example above.

If I use the edit button outside of the table, it all works fine like the example and pushes to the datatable. Any thoughts on the issue? thank you!

This is the code for the edit link:

                    columns: [
                        { data: "first_name" },
                        { data: "last_name" },
                        { data: "phone" },
                        { data: "city" },
                        {
                            data: "image",
                            render: function ( file_id ) {
                                return file_id ?
                                    '<a target="_blank" href="https://www.google.com"><img src="'+editor.file( 'files', file_id ).web_path+'" width="40"/></a>' :
                                    null;
                            },
                            defaultContent: "No image",
                            title: "Image"
                        }
                        ,{
                             data: null,
                             className: "center",
                             defaultContent: '<a href="" class="editor_edit">Edit</a>'
                        }
                    ]

Invoke the modal: (working fine)

            // Edit record
            $('#example').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();
                editor.edit( $(this).closest('tr'), {
                    title: 'Edit record',
                    buttons: 'Update'
                });
            });

Is there a working example with inline edit to file upload modal?

As far as I can see, the results in the NETWORK tab are exactly the same, except for the fact it calls a GET right after the post when using the inline edit link. Why is it doing that? The IDs are the same, everything else is identical. WEIRD!!!

URL:

http://[myurl]/data/orders?draw=46&columns%5B0%5D%5Bdata%5D=first_name&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=last_name&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=phone&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=city&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=image&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=2&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1606881836659

thank you!!

dennisgaudenzi

It looks like the issue was since I had serverSide: true on. UGHHHHH.

https://datatables.net/examples/server_side/simple.html

The next question related - can you use this with file upload? I really need it since I want to keep things on my server instead of clientside for larger data sets.

Thanks!

allan

Good to hear you got that sorted out!

Yes, you can use file upload and server-side processing. There is an example of server-side processing with Editor here and all three of our server-side libraries support server-side processing.

Allan

dennisgaudenzi

The issue seems to be that extra GET that is sent to the browser after the POST from the save of data and push of the file back to the datatable. That seems to be where the image does not save inline like it does without server side. you can even see the second POST here as well after saving on network tab: https://editor.datatables.net/examples/simple/server-side-processing.html

But, yours saves and mine does not for some reason...

dennisgaudenzi

Here is the full script, does it have something to do with the way it renders with serverside on?

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

        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor({
                ajax: "/SAVE-URL",
                table: "#example",
                fields: [{
                        label: "First name:",
                        name: "first_name"
                }, {
                        label: "Last name:",
                        name: "last_name"
                }, {
                        label: "Phone #:",
                        name: "phone"
                }, {
                        label: "City:",
                        name: "city"
                }, {
                        label: "Image:",
                        name: "image",
                        type: "upload",
                        display: function ( file_id ) {
                            return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                        },
                        clearText: "Clear",
                        noImageText: 'No image'
                }]
            });

            // Edit record
            $('#example').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();
                editor.edit( $(this).closest('tr'), {
                    title: 'Edit record',
                    buttons: 'Update'
                });
            });

            var table = $('#example').DataTable( {
                dom : '<"#add">frtip', //Bfrtip
                order: [[2, 'asc']],
                rowGroup: {
                    dataSrc: "phone"
                },
                processing: true,
                serverSide: true,
                ajax: "/DATA-URL",
                columnDefs: [
                    {
                        targets:2, 
                        visible:false
                    }
                ],
                columns: [
                    { data: "first_name" },
                    { data: "last_name" },
                    { data: "phone" },
                    { data: "city" },
                    {
                        data: "image",
                        render: function ( file_id ) {
                            return file_id ?
                                '<a target="_blank" href="https://www.google.com"><img src="'+editor.file( 'files', file_id ).web_path+'" width="40"/></a>' :
                                null;
                                //https://editor.datatables.net/examples/advanced/upload.html
                        },
                        defaultContent: "No image",
                        title: "Image"
                    }
                    ,{
                         data: null,
                         className: "center",
                         defaultContent: '<a href="" class="editor_edit">Edit</a>'
                         //https://editor.datatables.net/examples/simple/inTableControls.html
                    }
                ]
                /*,
                select: true,
                buttons: [
                    { extend: "edit",   editor: editor }
                ]*/
            }); 

            //$('<label/>').text('my dropdown').appendTo('#add')
            $select = $('<select/>').appendTo('#add')
            $('<option/>').val('1').text('option #1').appendTo($select);
            $('<option/>').val('2').text('option #2').appendTo($select);
            $('<option/>').val('3').text('option #3').appendTo($select);

            $("#add select").addClass("p-2");

        });

allan

The second post is because Editor will call draw() when the edit is complete (to update the DataTable). When using server-side processing that means it will perform a request to the server to get the new data.

What the problem might be is that your DataTable isn't configured to send a POST:

ajax: "/DATA-URL",

will do a GET by default. You need to use:

ajax: {
  url: '/DATA-URL',
  type: 'post'
}

If that isn't working for you, can you link to a page showing the issue so I can help to debug it please?

Thanks,
Allan

dennisgaudenzi

That did not work, i am going to email you a link Allen. thanks!