submit not calling ajax url

submit not calling ajax url

smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

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.

This question has an accepted answers - jump to answer

«1

Answers

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    here is link to debugger upload

    https://debug.datatables.net/axodin

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    editor version 1.9.5
    datatables version 1.10.22

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0
    edited October 2020
      //
     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.

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0
      
    
        $(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>
    
  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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"

  • kthorngrenkthorngren Posts: 13,799Questions: 25Answers: 3,246

    Are any console errors generated?

    Kevin

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    no errors

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

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

    Am I missing something in my configuration?

  • allanallan Posts: 54,708Questions: 1Answers: 8,557 Site admin

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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.

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    correction. multiple fields have the processing css set to block

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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?

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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?

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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'
    });
    })
    ...;

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0
    edited October 2020

    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?

  • allanallan Posts: 54,708Questions: 1Answers: 8,557 Site admin

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0
    edited October 2020

    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'
                    })
            });
    
  • allanallan Posts: 54,708Questions: 1Answers: 8,557 Site admin
    Answer ✓

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0
    edited October 2020

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

  • allanallan Posts: 54,708Questions: 1Answers: 8,557 Site admin
    edited October 2020

    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

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    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;

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    it opens the edit, but it does not submit onblur

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

    thanks for all your help by the way.

  • smoldovanskiysmoldovanskiy Posts: 54Questions: 5Answers: 0

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

  • aczedaaczeda Posts: 3Questions: 0Answers: 0

    We have the same error with IE

  • aczedaaczeda Posts: 3Questions: 0Answers: 0

    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?

Sign In or Register to comment.