How do i make TD element editable on double click?

istudent_learning

I would like to insert value on cell on double and post that value to my server. How do i achieve this in data table?

kthorngren

Are you using the Datatables Editor?

If so you should be able to use this example for inline editing and change the event handler to use dblclick
https://editor.datatables.net/examples/inline-editing/simple.html

If you are not using Editor then you will need to use an ajax call to send your edits to the server. But without understanding more about what you are wanting its hard to say.

Kevin

istudent_learning

I am not using Datatables editor. I am using datatables with manual serverside post ajax call. I need to edit only last td column. it may or may not have value when table loads.

This is how far i reached. dblClick event is not firing.

Please check my below code.

 <script type="text/javascript">

        $(document).ready(function () {

            var token = $('[name=__RequestVerificationToken]').val();

            var oTable = $('#myTable').DataTable({

                "ajax": {
                    "url": "/MyApp/OrderDetail/GetDetails",
                    "type": "POST",
                    "datatype": "json",
                    "headers": { "__requestverificationtoken": token }
                },
                "columns": [
                    { "data": "Store", "name": "Store" },
                    { "data": "Location", "name": "Location" },
                    { "data": "Order", "name": "Order" },
                    { "data": "Sku", "name": "Sku" },
                    { "data": "Qty", "name": "Qty" },
                    { "data": "OrderedDate", "name": "OrderedDate" },
                    { "data": "TrackingInfo", "name": "TrackingInfo" }
                ],
                "responsive": true,
                "rowReorder": {
                    selector: 'td:nth-child(2)'
                },
                "createdRow": function (row, data, index) {
                    $('td:last-child', row).addClass('testTd');
                },
                "serverSide": "true",
                "order": [0, "asc"],
                "processing": "true",
                "language": {
                    "processing": "Loading. Please wait..."
                },

                "dom": "<'row'<'col-sm-6'l><'col-sm-6'p>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-4'i>>"
            });

            $('.testTd td').on('dblClick', function () {

                debugger;
                newInput(this);

            });
           
            function closeInput(elm) {
                var value = $(elm).find('input').val();
                $(elm).empty().text(value);

                $(elm).bind("dblclick", function () {
                    newInput(elm);
                });
            }

            function newInput(elm) {
                $(elm).unbind('dblclick');

                var value = $(elm).text();
                $(elm).empty();

                $("<input>")
                    .attr('type', 'text')
                    .val(value)
                    .blur(function () {
                        closeInput(elm);
                    })
                    .appendTo($(elm))
                    .focus();
            }
            
            
            $('.search-input-text').on('keyup click', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val().toLowerCase();
                oTable.columns(i).search(v).draw();
            });
            $('.search-input-select').on('change', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val();
                oTable.columns(i).search(v).draw();
            });
        });

    </script>

EDIT: Updated code to use Markdown for formatted display.

kthorngren

First I think the events are case sensitive so you may need to change dblClick to dblclick. Second you will need to use delegated events for this since the table rows are not created when the event is established. Something like this:

           $('#myTable tbody').on('dblclick', '.testTd', function () {
 
               debugger;
               newInput(this);
 
           });

Also please use the triple back ticks (```) to format your code. This Markdown doc will show you how.

Kevin