Effects & Updating Removing Cells

I've used DT a few times and it's generally reliable, but 1.9.4 has been driving me a little crazy. I'm using the Bootstrap theme (BT 2.2.2 unfortunately, can't upgrade), and attempting to put together a "live" CRUD table by dynamically setting the "contenteditable" property on the TD elements and updating via AJAX.

Hovering events (for styling) are fine. Setting to/unsetting contenteditable is fine. Adding and deleting rows is fine. Even updating the Ajax is cool.

However, i get some very strange errors when updating cells.

        jQuery('#my_table').on( "click", "td", function(e) {
            console.log(jQuery('#my_table').dataTable().fnGetPosition( this ));
            jQuery(this).toggle( "highlight" );
        });

Position is reported OK. BUT when you add the jQuery UI effect--
Click the cell, and removes it from the table. Deletes that column of that row.

Here's what happens when you click normally, without the effect:

        jQuery('#my_table').on( "click", ".editable", function(e) {
            if( !jQuery(this).hasClass('header-sort') ) {
                e.preventDefault();
                jQuery(this).attr('contentEditable', true); // make the td editable
                jQuery(this).addClass('editing-focus'); // add some UI highlighting
                jQuery(this).focus(); // focus on it so we get an event
                jQuery(this).caret(-1); // put the caret at the end of the content
            }
        });

Which works fine. Even if it's annoying having to manually remove the "editable" class from the header rows once it's been set with "sClass" on init. The TD text can be changed, it turns a nice shade of orange, and is edit-friendly.

Once the edit has finished, the Ajax update happens onBlur().

jQuery('#my_table').on( "blur", ".editable", function(e) {
        window.selected_td = jQuery(this); // store the DOM element for Ajax
    jQuery(this).attr('contentEditable', false); // make it non-editable
    jQuery(this).removeClass('editing-focus'); // put it back to normal
    
        var new_field_value = jQuery.trim(jQuery(this).html()); // get the text entered, check if it's different

    var position = jQuery('#my_table').dataTable().fnGetPosition( window.selected_td[0] ); // find out where we are
    var row_index = position[0];
    var visible_col_index = position[1];
    var all_col_index = position[2];
                    
    jQuery('#credits_history').dataTable().fnUpdate( new_field_value, row_index, all_col_index ); // set the TD content just in case

       // DO SOME AJAX STUFF (Async)
      success: function(data) {
        var nearest_tr = window.selected_td.parent('tr'); // stored this globally earlier, all fine

        var position = jQuery('#my_table').dataTable().fnGetPosition( selected_td[0] );
        var row_index = position[0];
        var visible_col_index = position[1];
        var all_col_index = position[1];

        var current_row_content = jQuery('#my_table').dataTable().fnGetData(nearest_tr[0]); // fine
        var current_cell_content = jQuery('#my_table').dataTable().fnGetData(selected_td[0]); // fine

                // if we're changing column 3, update cols 1 and 2 in parallel
        jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, all_col_index ); // update current col
        jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, 0 ); // Update first col, refresh
        jQuery('#my_table').dataTable().fnUpdate( AJAXVAL, row_index, 1 ); // Update second col, refresh
      }
});

The result of the update is that it - deletes the current cell. The idea is that column 3 is clicked, and the values from it are used in column 1 and column 2. When column 3 is clicked, it removes column 3. Columns 4-9 are then pulled back as the row is redrawn (the row is missing a column), as if it's completely missing. It's still in the DOM.

I am losing my hair.