How do you get tablesorter to refresh after inserting a new row into a database?

Question

I'm pretty sure I'm using Mottie's version.

I can enter data into the database from a jQuery dialog, but how do I get the table to refresh to show the new data?

What I have tried (various permutations of):

jQuery("#class-details-table").trigger('updateAll', [resort]);

This is my jQuery UI dialog box:

 $(function() {
        $( "#dialog-2" ).dialog({
            autoOpen: false, 
            resizable: false,
            modal: true,
            title: "Modal",
            height: 800,
            width: 800,
            buttons: {
              OK: function() {
                    var dialog = $("#dialog-2");
                    var data = $("#add-class-student-form").serialize();
                    $.ajax({
                   url: '/directory/controller/action',
                   type: 'post',
                   cache: false,
                   data: data,
                   success: function(data) {
                   var resort = true; // re-apply the current sort
                        jQuery("#class-details-table").trigger('updateAll', [resort]);
                        alert('done');  //cheap debugger, gets here.
                   },
                   error: function(data){
                        alert('failed');
                        $("#dialog-2").html(data);
                   }
                });
                $('#add-class-student-form')[0].reset();
                $(this).dialog("close");

              }
           },
           title: "Success",
        });
     });

But this did not help.

This is the actual tablesorter implementation:

$(document).ready(function() { 
      $(function() {

      $("#class-details-table")
        .tablesorter({
          theme : 'blue',

          widgets: ['editable'],
          widgetOptions: {

            editable_columns       : [0,1,2,3,4],       // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
            editable_enterToAccept : true,          // press enter to accept content, or click outside if false
            editable_autoAccept    : true,          // accepts any changes made to the table cell automatically (v2.17.6)
            editable_autoResort    : false,         // auto resort after the content has changed.
            editable_validate      : null,          // return a valid string: function(text, original, columnIndex){ return text; }
            editable_focused       : function(txt, columnIndex, $element) {
              // $element is the div, not the td
              // to get the td, use $element.closest('td')
              $element.addClass('focused');
            },
            editable_blur          : function(txt, columnIndex, $element) {
              // $element is the div, not the td
              // to get the td, use $element.closest('td')
              $element.removeClass('focused');
            },
            editable_selectAll     : function(txt, columnIndex, $element){
              // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
              // only select everthing within the element when the content starts with the letter "B"
              return /^./i.test(txt) && columnIndex === 0;
            },
            //editable_wrapContent   : '<div>',       // wrap all editable cell content... makes this widget work in IE, and with autocomplete
            editable_noEdit        : 'no-edit',     // class name of cell that is not editable
            editable_editComplete  : 'editComplete' // event fired after the table content has been edited
          }
        })
        // config event variable new in v2.17.6
            .children('tbody').on('editComplete', 'td', function(event, config){


              var $this = $(this),

                newContent = $this.text(),
                cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
                rowIndex = $this.closest('tr').attr('id'),// data-row-index stored in row id
                dbColumnName = $this.closest('td').attr('name'); // cell-index stored in td id;

                $.ajax({
                       url: '/directory/controller/action',
                       type: 'post',
                        data:
                        {   "newContent" : newContent,
                            "cellIndex" : cellIndex,
                            "rowIndex"  : rowIndex,
                            "dbColumnName"  : dbColumnName //I generated the column name as the name of the td;

                        },
                       success: function(data) {
                         jQuery("#class-details-table").trigger('updateAll');
                        //$('#errorDiv').html('SUCCESS - ' + data);
                       },

                       error: function(data){
                            $('#errorDiv').html('FAILED - ' + data);
                       }
                    });

            });
        }); 
});

Answer 1

Within the success ajax callback function, there needs to be code to add the new rows to the table before triggering an "update" event ("updateAll" should only be used when the table header cells have been modified).

I don't know what type of data the ajax request is returning, but if it is plain HTML, it should look something like this:

success: function(data) {
    if ( data ) {
        jQuery("#class-details-table")
            // attach the rows to the tbody (use `:eq(#)` if there is more than one)
            .children('tbody').append( data.newContent )
            // this triggered event will propagate up to the table
            .trigger('update');
    }
}