submit not calling ajax url

smoldovanskiy

Using datatables serverside, populated via c# mvc.

upgraded to newest versions of all libraries. Now submit is not calling my ajax url. The initsubmit even is called, but it does not go past that.

it was working prior to updating to lastest.

I apologize for not being able to provide a link to a working example.

smoldovanskiy

does not submit inline or bubble. Does not throw any error.

smoldovanskiy

here is link to debugger upload

https://debug.datatables.net/axodin

smoldovanskiy

editor version 1.9.5
datatables version 1.10.22

smoldovanskiy

  //
 editor = new $.fn.dataTable.Editor({
            ajax: "@Url.Action("UpdateFees", "Proforma", new { id = Model.ProformaID, TaskListCode = Model.TaskListCode , ActivityListCode = Model.ActivityListCode, FlatFeeListCode = Model.FlatFeeListCode })",
            table: '#fees',
            idSrc: 'FeeID',
            fields: [
                {
                    label: "",
                    name: "NarrativeNew",
                    type: "textarea",
                    className: "edittextarea"
                },
                
            ],
            formOptions: {
                inline: {
                    submit: 'changed',
                }
            }
        });


$('#fees').on('click', 'tbody td div', function (e) {
            editor.inline($(this).parent(), {
                onBlur: 'submit'
            });
        });


 $('#fees').dataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "@Url.Action("GetFees", "Proforma", new { id = Model.ProformaID, TaskListCode = Model.TaskListCode , ActivityListCode = Model.ActivityListCode, FlatFeeListCode = Model.FlatFeeListCode })",
                type: 'POST'
            },
            pagingType: "full_numbers",
            fixedHeader: {
                header: true,
                footer: true,
                headerOffset: 65,
                footerOffset: 45
            },
            stateSave: true,
            order: [[1, "desc"]],
            lengthMenu: [[50, 100, -1], [50, 100, "All"]],
            rowCallback: function (row, data) {
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).addClass('selected');
                }
            },
            columns: [
                {
                    width: "10px",
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false,
                    searchable: false
                },
                {
                    data: "FeeIndex"
                },
                {
                    data: "FeeDateDisplay"
                },
             
                {
                    data: "NarrativeNew",
                    render: function (data, type, full, meta) {
                        var result = "";
                        result += "<div style='cursor:pointer'>" + full.NarrativeNew + "</div>";

                        if (full.Narrative != full.NarrativeNew) {
                            result += "<a tabindex='0' class='badge badge-danger' role='button' data-toggle='popover' data-trigger='focus' title='Original Narrative' data-content='" + full.Narrative + "'><svg class='bi bi-exclamation-triangle text-white' width='16px' height='16px' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z' /><path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z' /></svg></a>";
                        }
                        return result;
                    }
                },
});
//

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

smoldovanskiy

  

    $(document).ready(function () {


        editor = new $.fn.dataTable.Editor({
            ajax: "@Url.Action("UpdateFees", "Proforma", new { id = Model.ProformaID, TaskListCode = Model.TaskListCode , ActivityListCode = Model.ActivityListCode, FlatFeeListCode = Model.FlatFeeListCode })",
            table: '#fees',
            idSrc: 'FeeID',
            fields: [
                {
                    label: "",
                    name: "NarrativeNew",
                    type: "textarea",
                    className: "edittextarea"
                },
                {
                    label: "",
                    name: "Comments",
                    type: "textarea",
                    className: "edittextarea"
                },
                {
                    label: "",
                    name: "WorkedRateNew",
                    type: "currency",
                },
                {
                    label: "",
                    name: "WorkedHoursNew",
                    type: "hours",
                },
                {
                    label: "",
                    name: "WorkedValueNew",
                    type: "currency",
                },
                {
                    label: "",
                    name: "ActionEditFieldValues",
                    type: "action",
                },
                {
                    label: "",
                    name: "TaskCodeIDNew",
                    type: "select",
                },
                {
                    label: "",
                    name: "ActivityCodeIDNew",
                    type: "select",
                },
                {
                    label: "",
                    name: "FlatFeeCodeIDNew",
                    type: "select",
                }
            ],
            formOptions: {
                inline: {
                    submit: 'changed',
                }
            }
        });

      

        $('#fees').on('click', 'tbody td div', function (e) {
            editor.inline($(this).parent(), {
                onBlur: 'submit'
            });
        });


        $('#fees').on('click', 'tbody td h5', function (e) {
            editor.inline($(this).parent(), {
                onBlur: 'submit',
            });
        });

        editor.on('initSubmit', function (e, action) {
            alert('test');
        });


        $('#fees').dataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "@Url.Action("GetFees", "Proforma", new { id = Model.ProformaID, TaskListCode = Model.TaskListCode , ActivityListCode = Model.ActivityListCode, FlatFeeListCode = Model.FlatFeeListCode })",
                type: 'POST'
            },
            pagingType: "full_numbers",
            fixedHeader: {
                header: true,
                footer: true,
                headerOffset: 65,
                footerOffset: 45
            },
            stateSave: true,
            order: [[1, "desc"]],
            lengthMenu: [[50, 100, -1], [50, 100, "All"]],
            rowCallback: function (row, data) {
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).addClass('selected');
                }
            },
            columns: [
                {
                    width: "10px",
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false,
                    searchable: false
                },
                {
                    data: "FeeIndex"
                },
                {
                    data: "FeeDateDisplay"
                },
                {
                    data: "NarrativeNew",
                    render: function (data, type, full, meta) {
                        var result = "";
                        result += "<div style='cursor:pointer'>" + full.NarrativeNew + "</div>";

                        if (full.Narrative != full.NarrativeNew) {
                            result += "<a tabindex='0' class='badge badge-danger' role='button' data-toggle='popover' data-trigger='focus' title='Original Narrative' data-content='" + full.Narrative + "'><svg class='bi bi-exclamation-triangle text-white' width='16px' height='16px' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z' /><path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z' /></svg></a>";
                        }
                        return result;
                    }
                },
            ],
            drawCallback: function () {
                $('[data-toggle="popover"]').popover();
            },
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
        });


        $('#fees tfoot').on('click', 'tr td button.feeSelectAll', function () {
            var table = $('#fees').DataTable();
            table.rows().select();
        });


        $('#fees tfoot').on('click', 'tr td button.feeDeSelectAll', function () {
           var table = $('#fees').DataTable();
           table.rows().deselect();
        });

    });



</script>
@if (Model?.Fees?.Any() ?? false)
{
<table id="fees" class="table table-sm table-responsive-lg table-hover table-striped" style="font-size:.9em;width:100%;border-collapse:separate !important;">
    <thead style="font-weight:400; vertical-align:bottom;">
        <tr>
            <th></th>
            <th>Index</th>
            <th>Date</th>
            <th>Timekeeper</th>
            <th>Narrative</th>
            <th>Task</th>
            <th>Activity</th>
            <th>Flat Fee Code</th>
            <th>Rate</th>
            <th>Hours</th>
            <th>Amount</th>
            <th>Action</th>
            <th>Notes</th>
        </tr>
    </thead>
    <tbody></tbody>

</table>

smoldovanskiy

this is the list of js files I am including

"~/Scripts/dist/jszip.js",
"~/Scripts/moment.js",
"~/Scripts/DataTables/jquery.datatables.js",
"~/Scripts/DataTables/dataTables.buttons.js",
"~/Scripts/DataTables/buttons.flash.js",
"~/Scripts/DataTables/buttons.html5.js",
"~/Scripts/DataTables/buttons.print.js",
"~/Scripts/DataTables/dataTables.bootstrap4.js",
"~/Scripts/DataTables/dataTables.fixedHeader.js",
"~/Scripts/DataTables/dataTables.select.min.js",
"~/Scripts/DataTables/select.bootstrap4.min.js",
"~/Scripts/DataTables/select.dataTables.js",
"~/Scripts/DataTables/datetime-moment.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/Editor/dataTables.editor.min.js",
"~/Scripts/Editor/editor.bootstrap4.min.js"

kthorngren

Are any console errors generated?

Kevin

smoldovanskiy

no errors

smoldovanskiy

just does not submit, it was working up until i updated my javascript files to newest version

smoldovanskiy

tried every possible option from the documentation. This should not be this hard...

Am I missing something in my configuration?

allan

I don't believe you are missing anything from looking over what you have above, but obviously something somewhere is going wrong.

Couple of initial questions:

1. What version did you upgrade from?
2. What happens if you remove the initSubmit?
3. It looks like you have editor the variable as a global. Do you have others with the same name on the page?

Are you able to give me a link to the page please? You can send it to me privately by clicking my forum user name above and then "Send message".

I'm not aware of a fundamental error in Editor 1.9.5 - as you can see on this page it will submit to the URL given.

Thanks,
Allan

smoldovanskiy

I am not sure what version it was previously. I was having an issue with the inline blur submit. It was not working correctly when clicking into another row, it would try to the editor for that new cell prior to the other one finishing being saved.

I used the debug tool and it showed that I was using old versions of all the libraries. So I updated them by dowloading the newest files.

After the update, the inline blur submit is not working at all.

I put the initSubmit there to see if any events are getting called. There is not change if it is there or not. It's supposed to call the ajax right after the initSubmit event, but it does not.

There is only one editor.

I am not able to send you a link, at this point of development the new app only resides on my development machine.

Does this have something to do with it being an MVC project using bootstrap for styles?

It was working (with the issue described above) until I updated the files.

Am I missing a reference? Do I have a conflicting js file? using Jquery 3.5.1 and jquery ui 1.12.1.

Could it have something to do with moment.js? Does that need to be a specific version? I have 2.27.0

smoldovanskiy

I think there is some sort of problem with editor and mvc.

I just separated the editable grid onto its own view. I am loading only the js and css files shown in the working example directly from the cdn source (except the editor).

Still getting the same issue. It looks to me like the issue is with dataTables.editor.min.js

smoldovanskiy

I debugged the datatables.editor.js code and I see where the issue is. One of my fields (Comments) is always coming back as processing. So it exists out of the submit.

smoldovanskiy

correction. multiple fields have the processing css set to block

smoldovanskiy

this is the culprit here

Editor.prototype._noProcessing = function (args)
{
let processing = false;

$.each(this.s.fields, function(name, field) {
    if (field.processing()) {
        processing = true;
    }
});

if (processing) {
    this.one('processing-field', function () {
        // Are any other fields in a processing state? - Might need to wait again
        if (this._noProcessing(args) === true) {
            this._submit.apply(this, args);
        }
    });
}

return ! processing;

};

I tried removing all of the fields except one, and that fixes this.

But I am back to the issue I was having before, if I click outside of the grid, then the submit happens and the grid reloads.

If i click on another row, it throws error here on detach due to not being able to load the node.

    // Remove from DOM, keeping event handlers, and include text nodes in remove
    var children = node.contents().detach();

I have seen some other posts with this issue, but have not found a solution.

So after the upgrade I have two problems, the node issue and multiple fields processing when they are not...

This seems like I have an issue with my setup.... What am I doing wrong? Am I calling the editor incorrectly? Are my field definitions wrong?

I was using some custom editor fields, I have removed those and still see this issue.

Is it just an issue with server side processing and inline edit?

This is very frustrating. What am I doing wrong?

smoldovanskiy

I made my code as simple as possible, just one field and still have the issue with node being null when clicking into another row.
....

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href='@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseUrl"]' />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Paperless Proforma</title>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="~/Scripts/Editor/dataTables.editor.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link href="~/Content/Editor/editor.dataTables.min.css" rel="stylesheet" />

</head>
<body>

<script>


$(document).ready(function () {


    var selected = [];

    editor = new $.fn.dataTable.Editor({
        ajax:
        {
            url: "@Url.Action("UpdateFees", "Proforma", new { id = Model.ProformaViewModel.ProformaID, TaskListCode = Model.ProformaViewModel.TaskListCode , ActivityListCode = Model.ProformaViewModel.ActivityListCode, FlatFeeListCode = Model.ProformaViewModel.FlatFeeListCode })",
            type: "PUT",
        },
        table: '#fees',
        idSrc: 'FeeID',
        fields: [
            {
                label: "Narrative",
                name: "NarrativeNew",
                type: "textarea",
            },
        ],
    });

    $('#fees').on('click', 'tbody td', function (e) {
        editor.inline($(this), {
            onBlur: 'submit',
        });
    });

    $('#fees').dataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "@Url.Action("GetFees", "Proforma", new { id = Model.ProformaViewModel.ProformaID, TaskListCode = Model.ProformaViewModel.TaskListCode , ActivityListCode = Model.ProformaViewModel.ActivityListCode, FlatFeeListCode = Model.ProformaViewModel.FlatFeeListCode })",
            type: 'POST'
        },
        order: [[0, "desc"]],
        lengthMenu: [[50, 100, -1], [50, 100, "All"]],
        columns: [
            {
                data: "NarrativeNew"
            },
        ],
    });
});



</script>

    <table id="fees" class="table table-sm table-responsive-lg table-hover table-striped" style="font-size:.9em;width:100%;border-collapse:separate !important;">
        <thead style="font-weight:400; vertical-align:bottom;">
            <tr>
                <th>Narrative</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>

        </tfoot>
    </table>

</body>

</html>
....

Is there an issue with the way I am calling inline editor?
....
$('#fees').on('click', 'tbody td', function (e) {
editor.inline($(this), {
onBlur: 'submit',
});
});
....
Or is it a bug when you blur by clicking another editable cell?

I don't see this issue in your example.

Tried IE and Chrome browsers with same result.

Is it due to MVC environment?

smoldovanskiy

I got my simplified example working with the following code, so it is the way I am callng the editor.
...
$('#fees').on('click', 'tbody td', function (e) {
editor.inline($(this)[0]._DT_CellIndex, {
onBlur: 'submit'
});
})
...;

smoldovanskiy

Adding a second column brings me back to the initial issue where the processing is always true....

However, this issue is now only in IE11, chrome is working correctly. (Great Success!)

Could this be a bug with IE11?

allan

Is there an issue with the way I am calling inline editor?

You are using server-side processing, so you need to use:

    $('#fees').on( 'click', 'tbody td', function (e) {
        editor.inline( table.cell( this ).index(), {
            onBlur: 'submit'
        } );
    } );

Note the use of cell().index(). That is because when server-side processing is used, the elements are recreated - thus the old element that this points to doesn't exist any more. That code is used in this example.

Regarding the processing issue - are you using dependent() anywhere, or manually setting the processing flags?

Allan

smoldovanskiy

No, not doing either of those.

Yes, I am aware of the index needing to be passed on. However, I don't want the whole td to be clickable, just specific elements, therefore I am doing the below. I could not get something like table.cell( this.parent() ).index() to work

   $('#fees').on('click', 'tbody td div.editable', function (e) {
             editor.inline($(this)[0].parentNode._DT_CellIndex, {
                onBlur: 'submit',
                submit: 'changed',
            });
        });

Could this be causing issue for Internet Explorer?

Unrelated question: How do you call multiedit for only a specific field?

This opens the editor up for all of the columns.

 $('#fees tfoot').on('click', 'tr td button.transferSelected', function () {
            editor
                .edit(table.rows({ selected: true }).indexes(), true, {
                    submit: 'changed'
                })
        });

allan

I could not get something like table.cell( this.parent() ).index() to work

Try:

table.cell($(this).closest('td')).index()

Unrelated question: How do you call multiedit for only a specific field?

You don't. You'd need to hide the fields that you don't want in the form.

Allan

smoldovanskiy

table.cell($(this).closest('td')).index() is working but only in chrome. Still the same issue with IE.

allan

Just IE or Edge as well? Which version of IE - given that Microsoft are trying to kill IE themselves, I'm very much inclined to more away from it.

That said, what happens in IE - any errors? What debugging have you done? Do it call the edit method or not?

Allan

smoldovanskiy

IE 11.1518.17763.0
update 11.0.210
there are no errors.

We are trying to get away from IE as well, but my firm still has it as the default browser.

When debugging, it gets to this code, but never gets to -->> this._submit.apply(this, args);

$.each(this.s.fields, function(name, field) {
if (field.processing()) {
processing = true;
}
});

if (processing) {
this.one('processing-field', function () {
// Are any other fields in a processing state? - Might need to wait again
if (this._noProcessing(args) === true) { -->>> This is always False
this._submit.apply(this, args); -->> Never gets to here
}
});
}

return ! processing;

smoldovanskiy

it opens the edit, but it does not submit onblur

smoldovanskiy

thanks for all your help by the way.

smoldovanskiy

i'm doing server-side and processing. I think that definitely has something to do with this.

aczeda

We have the same error with IE

aczeda

I tested the published demo for inline editor inside IE is not working:
https://editor.datatables.net/examples/inline-editing/simple.html

Someone find solution?