Not able to inline edit more than once on the page.

mike@workflowmasters.com

Everything seems to be working great, except I am not able to inline edit more than once on my page. Without getting into all the details. I thought I would post on here to see if what I am trying to do is possible. My goal is to use inline edit, and get a json response that just includes the updated value, and redraw the edited cell. DataTables recommends to return the entire row. But in our scenario, I do not want to have to redraw the entire row if I do not have to.

In short. Here is my table editor initialization:

    var table = $('#tradetable').DataTable({
        columns: [
            {data: "id"},
            {data: "TradePortalAccess"},
            {data: "Status"},
            {data: "Region"},
            {data: "ContractSigned"},
            {data: "QualityStandardsSigned"},
            {data: "PricingAddendumSigned"},
            {data: "MainContactFirstName"},
            {data: "MainContactLastName"},
            {data: "MainContactPhone"},
            {data: "MainContactEmail"},
            {data: "TradePartnerTier"},
            {data: "CommunicationCycle"},
            {data: "PriceLockTerms"},
            {data: "RebateProgram"},
            {data: "ModelDiscountProgram"}
        ]
    });

    $('table tbody').on( 'click', 'td', function () {
          cell = table.cell( this );
          
            editor.inline( this, {
                submitOnBlur: true,
                drawType: 'page'
            });

    });

    var editor = new $.fn.dataTable.Editor( {
        idSrc: "id",
        ajax:  {
          url: '/action/update',
          success: function (json) {
            if (json.success) {
              cell.data(json.success.value).draw();
            } else {
             alert('Error Writing!');
            }
          },
        },
        table: '#tradetable',
        fields: [
            {name: "id"},
            {name: "TradePortalAccess"},
            {name: "Status"},
            {name: "Region"},
            {name: "ContractSigned"},
            {name: "QualityStandardsSigned"},
            {name: "PricingAddendumSigned"},
            {name: "MainContactFirstName"},
            {name: "MainContactLastName"},
            {name: "MainContactPhone"},
            {name: "MainContactEmail"},
            {name: "TradePartnerTier"},
            {name: "CommunicationCycle"},
            {name: "PriceLockTerms"},
            {name: "RebateProgram"},
            {name: "ModelDiscountProgram"}
      ]
    });

The response i get back from /action/update is a json file formatted like:

{"success":{"id":17,"field":"MainContactLastName","value":"WTF"}}

The ajax call above works.... I get the Response OK, and it places it into the cell and redraws the call. (line 17 above). However, I am not able to edit another cell. Every time I click on a new cell, nothing happens. If I refresh the page, it works OK of course.

Additional Notes. I am not using server side processing in this example. I am using the basic initialization. I am using DataTables 1.10.9 and Editor 1.5.1.

Any thoughts?

ThomD

Try this selector instead

$('#tradetable td').on( 'click', '', function (myEvent) {
        editor.inline( this, {
            submitOnBlur: true,
            drawType: 'page'
        });
 
});

mike@workflowmasters.com

Appreciate the reply ThomD. I just tried it, and got the same results. The return came back OK, but I was not able to click on another cell and have the inline editor activate.

UPDATE: I resolved this issue by restructuring my code to return the entire row (like Editor expects). We can close this now.

Thank you!