Additional Ajax call triggered after Inline Editing Cell

Additional Ajax call triggered after Inline Editing Cell

manesvenommanesvenom Posts: 4Questions: 1Answers: 0
edited February 10 in Editor

Hi,

I have a datatable initilaised using server side processing. The pagination, filtering and order work so well.

When I tried to use the inline cell edit function to save data using onBlur event. The modified data could be saved to database and the response from the Ajax request shown correctly. However, it would trigger a new table reload Ajax call again. Then it would it stuck on Processing loading.

Regards,

Venom

DataTables Editor v1.8.1


/** Data Table Editor */ editor = new $.fn.dataTable.Editor( { ajax: { "url": ajaxURL, "type": 'POST', "data":{ "action" : ajaxActions "nonce" : ajaxNonce } }, table: "#applicant-table", idSrc: 'member_no', fields: [ { label: "Last Name:", name: "last_name" }, { label: "First Name:", name: "first_name" }, { label: "Sex: ", name: "sex" }, { label: "Relationship:", name: "relationship" }, { label: "Contact No:", name: "contact_no" } ] } ); $('#applicant-table').on( 'click', 'tbody td.editable', function () { editor.inline( this, { onBlur: 'submit' } ); } ); /* Data Table initialization */ var table = $('#applicant-table').DataTable( { fixedHeader: { header: true }, "serverSide": true, "searchDelay": 1000, "order": [[ 1, "asc" ]], "pageLength": 10, "aLengthMenu": [[10, 25, 50, 100,500,1000,-1], [10, 25, 50,100,500,1000, "All"]], "processing": true, "ajax": { "url": ajaxURL, "type": 'POST', "dataSrc" : function (json) { return json.data; }, "data": function (d){ d.memberno = $('#inputMember').val(); d.telephone = $('#inputTelephone').val(); d.email = $('#inputEmail').val(); d.action = get_applicant_list; d.nonce = ajaxNonce; } }, "columns": [ { "data": "member_no" }, { "data": "last_name" }, { "data": "first_name" }, { "data": "sex" , className: 'editable' }, { "data": "relationship" , className: 'editable'}, { "data": "contact_no" , className: 'editable'} ] } );


Answers

  • manesvenommanesvenom Posts: 4Questions: 1Answers: 0

    Hi,

    I followed the thread below to turn on the debugger
    https://stackoverflow.com/questions/17208268/how-to-find-out-which-javascript-causes-a-jquery-ajax-request

    Run the Debugger in Chrome to find out how the second Ajax call is triggered.

    It seems that the second Ajax call was due to the onClick event

    $('#applicant-table').on( 'click', 'tbody td.editable', function () {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    

    The problem can be reproduced following the steps below:

    1. Click the first editable cell to update value to "xxx"
    2. Move the mouse to the next cell which is also editable cell and click on it
    3. onBlur event is triggered and it would submit the Ajax request to server
    4. The second Ajax call is triggered

    Another case that won't have issue
    1. Click the first editable cell to update value "xxx"
    2. Move the mouse to the next cell which is NOT editable cell and click on it
    3. onBlur event is triggered
    4. The second Ajax call will not be triggered

    Any idea for preventing the second Ajax call?

    Cheers,

    Venom

  • colincolin Posts: 3,589Questions: 0Answers: 632

    Hi @manesvenom ,

    Yep, that configuration is saying to submit onBlur - the default behaviour is to just close, so you could remove that option on line 3. See all options here.

    Cheers,

    Colin

  • manesvenommanesvenom Posts: 4Questions: 1Answers: 0

    Hi Colin,

    If I remove the line 3 onBlur: 'submit'
    it won't submit the change to server side.

    Now the workaround is to replace the line 3
    with buttons: { label: 'Save', fn: function () { this.submit(); } } to let user to click on Save button to update the record. That will not trigger a new redraw Ajax call after the response message is returned. However, that is not my intention.

    Cheers,

    Venom

  • allanallan Posts: 48,883Questions: 1Answers: 7,122 Site admin

    Hi Venom,

    Try:

    editor.inline( table.cell(this).index(), {
    

    (assuming you have a table variable for the DataTable). The issue is that when using server-side processing new DOM elements are created on redraw, so this (the element that was clicked on) no longer exists. An example is available here.

    Allan

  • manesvenommanesvenom Posts: 4Questions: 1Answers: 0

    Hi Allan,

    Thank you very much. It works like a charm.

    Please mark it as closed. Thanks.

    Cheers

    Venom

Sign In or Register to comment.