Effects & Updating Removing Cells

azcoppen

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.

allan

Is jQuery setting the CSS display property on the cell perhaps? Can you link to a test case.

Allan

azcoppen

Unfortunately i can't as it's a client project only being developed locally. I've managed to stabilise the cell update, but the particular problem can be reproduced this way:

1. Create a normal datatable.
2. Apply an onClick handler to all TD elements.
3. Try a jQuery UI effect - jQuery(this).toggle( "highlight" );
4. Click the cell, and it's apparently removed, instead of highlighted.

Thanks for taking a look btw!

allan

It was fairly trivial to create a test case here: http://live.datatables.net/raqukak/1/edit

It also confirms that hQuery is settings display:none on the element. The jQuery documentation for toggle says:

Display or hide the matched elements.

So I don't really understand why you would want to use that function? It is hiding an already displayed element is it not? It appears to be doing exactly what it should do. I suspect you want to simply add a highlight class do you not?

azcoppen

It's to provide a way in the UI to show that whether the Ajax update for that cell has been successful or not - flash red if there's an error, or flash green if it's a success.

The JSBin example is great - demonstrates the issue well.

The problem is that the expected behaviour should be to toggle the show and hide - it hides, but doesn't show again - i.e. the cell is lost.

i've kind of solved it after looking at this thread: https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor, using a JQ background color animation, but it's sad not to be able to do it natively with jQuery UI.

Thanks so much for for taking the time to look into it.

allan

Perhaps worth posting in the jQuery forums, or opening a feature request in their bug tracker. But I suspect they will say their software is working as expected. I use classes and CSS animation in Editor to highlight the updated row.

Allan