Inline Editor UploadMany Delete Button Not Working?

terinfire

I have an UploadMany that doesn't appear to fire a callback thru AJAX when an item is "Deleted" (X clicked on the right):

            editor = new $.fn.dataTable.Editor(
                {
                    ajax: { 
                        data: 
                        function(d) {
                            d.DT_RowID = editor.ids();
                        },
                        type: "POST",
                        url: "/AudioClips/Edit"
                    },
                    idSrc: "id",
                    table: "#Table_be6112dc6271436db5230ee7143273b7",
                    fields: [
                        {
                            name: "name",
                            label: "Name"
                        },
                        {
                            name: "clips",
                            label: "Audio Clip",
                            type: "uploadMany",
                            noFileText: "No Clips Uploaded.",
                            display: function (file)
                            {
                                if(file.fullyQualifiedID)
                                    return '<audio controls src="/AudioClips/Clip/?source=' + file.fullyQualifiedID + '" />';
                                else
                                    return '<audio controls src="/AudioClips/Clip/?source=' + editor.ids() + '_' + file + '" />';
                            }
                        }
                    ]
            } );

            $('#Table_be6112dc6271436db5230ee7143273b7').on('click', 'tbody td.dt-editable', function (e)
            {
                editor.inline(this);
            } );

    var dataTable = $("#Table_be6112dc6271436db5230ee7143273b7").DataTable(
        {
            processing: true,
            serverSide: true,
            filter: true,
            order: [0, 'asc'],
            orderMulti: false,
            ajax: {
                url: "/AudioClips/Items?id=2dac5d78-3373-47cf-815a-4cd8e9b78c3e",
                type: "POST",
                datatype: "json"
            },
            columns: [
                {
                    className: "dt-editable",
                    data: "name",
                    name: "Name",
                    autoWidth: true
                },
                {
                    className: "dt-editable",
                    data: "clips",
                    name: "Audio Clip",
                    render: function (d)
                    {
                        if (d.length)
                        {
                            return "<button class=\"btn btn-sm btn-outline-secondary dt-editable\">" + d.length + " Clips</button>";
                        }

                        return  "No Clips Uploaded.";
                    },
                    autoWidth: true,
                },
                {
                    data: "hasChildren",
                    name: "Is Variable?",
                    autoWidth: true
                },
                {
                    data: "id",
                    orderable: false,
                    render: function (data, type, row, meta)
                    {
                        return '<button class=\"btn btn-sm btn-outline-success Table_be6112dc6271436db5230ee7143273b7-details\">Details</Button>&nbsp;<button class="btn btn-sm btn-outline-danger" onclick="DeleteAudioClip(\''+data+'\');">Delete</button>';
                    }
                }]
        });

I'm getting not JS errors in Chrome and the break-point for the ajax() call in the editor itself is not being hit. I was curious if it was, perhaps, an issue with losing focus (I know that sometimes things don't update until focus is lost), but the break-point is still never hit and the server doesn't seem to get any calls either (from verbose logging).

It's fine if I need to tie into a custom parameter or something -- I just need to know what's up.

colin

Hi @terinfire ,

As shown in this example here, the server isn't contact when the 'x' is pressed, only when 'update' is pressed. Are you seeing the same behaviour?

Cheers,

Colin

terinfire

Hi colin,

How would one handle this if it were an inline editor, then? This is all "inline" functionality. My use case is an inline editor, not a "bubble" editor.

Thank you!

allan

It should really make any difference whether its an inline edit or anything else. When you press the x button what happens is just that the local array of items for the files referenced is modified. Only when you actually submit the field will it be submitted.

Is the issue that you aren't sure how to submit the uploadMany field type? You'll probably need to use a submit button like that in this example. The other option might be to listen for a change event on that field (dependent()) and then immediately submit, but the user might want to make other changes.

Allan

terinfire

Thank you, allan. That's what I figured I would have to do, but I was hoping I wouldn't. :-) It would be nice if there was a "pushOnRemove" or something setting that would automatically commit the change to the server (re: for inline editing).

terinfire

One more question -- sorry for the nuisance. Is there a way to hide/prevent/control the "Delete" button from showing? Looking through the source, it does not seem possible, but I could be mistaken as I'm not really a JS developer. :-)

colin

Hi @terinfire ,

If you mean the button to remove the row, yep, see this example here You just need to remove that line towards the end where the buttons are defined.

Cheers,

Colin

terinfire

No, I meant to remove the button on the File Upload itself when something is present (and to insert my own).

The solution was to css it.

<style>
    button.remove {
        visibility: hidden;
    }
</style>

Did the trick. Unfortunately, most of the DT-E work I am doing is requiring me to roll my own validators/applicators because it needs to access intermediary models that are cached on the web server and not immediately in the database (although they do eventually get pushed into the database).

Thanks again for the help and direction in the least!