Force row 'selected' after inline edit

crush123

I have a page with 2 datatables in a parent-child relationship.

On clicking a row in the parent table, its child rows are displayed in the other table.

The parent table uses persistent checkboxes, which when clicked, will toggle the state of the selected row

Can I 'prevent this toggle, or re-select the parent row after its edit, so the child rows are displayed, (otherwise they disappear on editing the parent) ?

Thanks

allan

You should be able to use event.stopPropagation() on the click handler for the checkbox. See MDN docs.

The other option is to use the sRowSelector option of TableTools to modify the selector for the row, like in the inline example.

allan

I've just put a little example of this together here.

It is greatly simplified, but that is good to show what is happening I think. The first event handler just does a class toggle so you can see when something happens from it.

The second is an event handler on the checkboxes and it stops the click event from bubbling up through to the row click handler.

If you comment out the e.stopPropagation() call you will see the click going "through" to the row.

Regards,
Allan

crush123

I added the code as you suggested, but it doesn't stop the selected row toggle.

Can't easily provide a working sample unless i send you a PM, but here is the js snippet from the page...

<script>
var editor_1; // use a global for the submit and return data rendering in the examples
var editor_2;

 $(document).ready(function() {
// add cancel buttons to the editor forms, - needs to be added *before* instantiating the editor
TableTools.BUTTONS.editor_edit.formButtons.push(
    {
    "label": "Cancel",
    "className":"btn btn-link",
    "fn": function () {
    this.close();
    }
});
TableTools.BUTTONS.editor_remove.formButtons.push(
    {
    "label": "Cancel",
    "className":"btn btn-link",
    "fn": function () {
    this.close();
    }
});
var editor_1 = new $.fn.dataTable.Editor( {

    ajax: "/ajax/council_members.php",
    table: "#councilmembers",
    fields: [ {
            label: "Contact Name:",
            name: "tblcouncilmembers.ContactID",
            type:  "select"
        }, {
            label: "Image:",
            name: "tblcouncilmembers.ImageURL",
            type: "upload",
            clearText:"Clear",
            dragDrop: true,
            display: function ( val, row ) 
                {
                  return val ?
                  '<img class="img-thumbnail thumb" src="/images/members/'+val+'"/>' :
                       'No image';
                }
        }, {
            label: "Section:",
            name: "tblcouncilmembers.SectionID",
            type:  "select"
        }, {
            label: "Active:",
            name: "contacts.Active",
            type: "checkbox",
            separator: "|",
            ipOpts: [{ label: '', value: 1 }]
        }, {
            label: "Display:",
            name: "contacts.Display",
            type: "checkbox",
            separator: "|",
            ipOpts: [{ label: '', value: 1 }]
        }
    ]
} );

var editor_2 = new $.fn.dataTable.Editor( {

    ajax: "/ajax/council_members_bio.php",
    table: "#councilmembers_bio",
    fields: [ {
            label: "Label:",
            name: "tblcouncilbiography.BiographyDetail"
        }, {
            label: "ContactID:",
            name: "contacts.ContactID",
            type: "hidden"
        }, {
            label: "Display:",
            name: "tblcouncilbiography.Display",
            type: "checkbox",
            separator: "|",
            ipOpts: [{ label: '', value: 1 }]
        }
    ]

} );

var councilmembers = $('#councilmembers').DataTable( {
    "order": [[ 0, "asc"], [ 1, "asc"]],
    dom: "Tfrtip",
    scrollY: 200,
    scrollCollapse: true,
    paging: false,
    ajax: "/ajax/council_members.php",
            "columns": [
        { data: "tblcouncilmembers.ContactID", visible:false },
        { data: "refsection.ListOrder", visible:false },
        { data: "contacts.LastName", render: function ( data, type, row ) {
            // Combine the first and last names into a single table field
            if ( type === 'display' || type === 'filter' ) {
            return row.contacts.FirstName+' '+row.contacts.LastName;
            } else {
            return row.contacts.LastName;
            }
        } },
        { data: "refsection.SectionDescription" },
        { data: "tblcouncilmembers.ImageURL",
          defaultContent: "No image",
          render: function ( data ) {
             return '<img class="img-thumbnail thumb" src="/images/members/'+data+'"/>';
          }
        },
        { data: "contacts.Active",
        render: function ( data, type, row ) {
            if ( type === 'display' ) {
                return '<input type="checkbox" class="editor-contacts_Active">';
            }
            return data;
            },
            className: "dt-body-center"
        },
        { data: "contacts.Display",
                    render: function ( data, type, row ) {
            if ( type === 'display' ) {
                return '<input type="checkbox" class="editor-contacts_Display">';
            }
            return data;
            },
            className: "dt-body-center"
        }
    ],
    tableTools: {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_create", editor: editor_1 },
            { sExtends: "editor_edit",   editor: editor_1 },
            { sExtends: "editor_remove", editor: editor_1 }
        ]
        //sRowSelector: 'td:not(:nth-last-child(1))'

    },
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-contacts_Active', row).prop( 'checked', data.contacts.Active == 1 );
        $('input.editor-contacts_Display', row).prop( 'checked', data.contacts.Display == 1 );          
    },

        initComplete: function ( settings, json ) {
        // Populate the site select list with the data available in the
        // database on load
        editor_1.field( 'tblcouncilmembers.SectionID' ).update( json.refsection );
        editor_1.field( 'tblcouncilmembers.ContactID' ).update( json.refcontacts );
        }// end of initcomplete

} );

    $('#councilmembers tbody').on( 'click', 'tr', function () {
      //var id = this.id.substr(4);
      var contactid = councilmembers.cell('.selected', 0).data()//contactid of selected row
      councilmembers_bio.ajax.url('/ajax/council_members_bio.php?ContactID='+contactid).load();
    });


    $('#councilmembers').on( 'change', 'input.editor-contacts_Display', function () {
    editor_1
        .edit( $(this).closest('tr'), false )
        .set( 'contacts.Display', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
    } );

    $('#councilmembers').on( 'change', 'input.editor-contacts_Active', function () {
    editor_1
        .edit( $(this).closest('tr'), false )
        .set( 'contacts.Active', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
    } );

    $('#councilmembers_bio').on( 'change', 'input.editor-tblcouncilbiography_Display', function () {
    editor_2
        .edit( $(this).closest('tr'), false )
        .set( 'tblcouncilbiography.Display', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
    } );

    $('#councilmembers').on( 'click', 'input[type=checkbox]', function (e) {
      e.stopPropagation();
    } );

    // Activate an inline edit on click of a table cell
    $('#councilmembers_bio').on( 'click', 'tbody td:nth-child(2)', function (e) {
        editor_2.inline( this, {
        buttons: { label: '&gt;', fn: function () { this.submit(); } }
        } );
    } );

    var councilmembers_bio = $('#councilmembers_bio').DataTable( {
    dom: "Trtip",
    scrollY: 200,
    scrollCollapse: true,
    paging: false,
    "language": {
  "emptyTable": "Click on the Council Member above to display their mini biography"
},
    ajax: "/ajax/council_members_bio.php",
    columns: [
        { data: "refmemberbiography.BiographyDescription" },
        { data: "tblcouncilbiography.BiographyDetail" },
        { data: "tblcouncilbiography.Display",
                    render: function ( data, type, row ) {
            if ( type === 'display' ) {
                return '<input type="checkbox" class="editor-tblcouncilbiography_Display">';
            }
            return data;
            },
            className: "dt-body-center"
        }           
        ],
        tableTools: {
        sRowSelect: "os",
        aButtons:  []
        },
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-tblcouncilbiography_Display', row).prop( 'checked', data.tblcouncilbiography.Display == 1 );            
        }
} );

} );
</script>

allan

Hi,

If you would be able to send me a PM so I can debug the issue directly, that would be useful.

Thanks,
Allan

crush123

OK, PM sent

allan

Awesome - thanks!

So to get it working the way you want use:

 $('#councilmembers tbody').on( 'click', 'input[type=checkbox]', function (e) {
      e.stopPropagation();
} );

The difference is in the tbody part I've added.

Now the reason for that is how jQuery works with delegated events. It actually adds a click listener on the element(s) given by the main selector and then when a click occurs it filters them by the delegate selector and decides if they should be triggered or not.

The reason it wasn't working before was that the TableTools click was being executed before this one, so we couldn't cancel the TableTools one (it had already happened!).

Making it more selective means that the new event will occur first, and thus give us the ability to stop the other event handlers happening after it.

Hope that makes sense :-)

Allan

crush123

It does make sense, and it works !

Cheers Allan