Not sure where to go to get some help on this, so figured I'd try here. I've also posted this to the Module Developer forum.

I have a table inside a form. The table lists items, with an input area below where existing items can be changed, and new ones added. The entire form is done through the Form API, with some embedded theme-table stuff for the table. I have a call to drupal_add_tabledrag which is working just fine, and so the browser is resorting the rows of the table in the middle of the form as it should as I drag and drop them.

Now, the part that has me baffled is when I add new items to that table or edit existing ones. The problem appears to be that the first column of the table where the handle for dragging is located is a description column that can be edited. So upon edit, the handle of course goes missing. And, upon appending a new row, there is no handle.

Existing table rows are identified with various classes, one being a class item-id, where id is a number corresponding to the row in a table. Cell values are changed upon return of the $.post(...) with a series of $('.items .item-'+data['iid']+' td:nth-child(1)').html(data['description']); calls ('description' being appropriately changed along the way through the 8 columns). For a new row $('.items table').append(data['content']) is used, where data['content'] is html for the new row.

So, question is, what functions in tabledrag.js do i need to call and in what fashion (syntax) to get the handle in the right place with all its associated events and bits for edited or added rows? It needs to go in front of the description just manipulated, or the row just added.

Any help would be greatly appreciated. I've been staring at the tabledrag.js code for the better part of a day, and not being much of a javascript programmer, I have to confess I'm baffled.

Shawn

Comments

sdsheridan’s picture

sdsheridan
he/him/his
commented

OK, partially answering my own question, after going cross-eyed through the tabledrag.js code, I came up with the following to try to get this to work. The top part (before the 'else') is for updated rows, the bottom part for a new row, where data['content'] is the html to append another row onto the table in question. The top part works. After that code executes, after the description is updated, the row is draggable. However, the bottom part does not. I get a handle, but the row is not draggable. Any ideas anyone? 

      if (data['iid'] != undefined && data['iid'] != '') {
        $('.items .item-'+data['iid']+' td:nth-child(1)').html(data['description']);
             .
             .
             .
             .
        $('.items .item-'+data['iid']).each(
            function() { 
              var table = this.parentNode.parentNode;
              var tableObj = Drupal.tableDrag[table.id];
              tableObj.makeDraggable(this); 
            });
      }
      else {
        $('.items table').append(data['content']).each(
            function() { 
              var tableObj = Drupal.tableDrag[this.id];
              var row = $('tr.invoice-item:last');
              tableObj.makeDraggable(row); 
            });
      }
sdsheridan’s picture

sdsheridan
he/him/his
commented

OK, I think I figured it out, but would really appreciate an acknowledgement that i did it right from anyone who knows. This is what I did for the else part finally:

        else {
          $('.items table').append(data['content']).each(
              function() { 
                var tableObj = Drupal.tableDrag[this.id];
                var row = $('tr.invoice-item:last').each(
                  function() {
                    tableObj.makeDraggable(this);
                    var thisrow = $(this);
                    var cell = thisrow.children(':nth-child(9)');
                    // Hide table body cells, but remove table header cells entirely
                    // (Safari doesn't hide properly).
                    cell.css('display', 'none');
                  } );
              });
        }

Hopefully this can help someone else as well. This now seems to be working.

Anonymous’s picture

Anonymous (not verified) commented
Status: Active » Closed (fixed)

Hi

I am closing this issue due to old age and self answering of sdsheridan . Feel free to reopen it.