Jquery Sortable on table rows run function on change

Question

I have a script that counts the number of rows in a table and assigns a value attribute to an input field. I am adding the draggable plugin Sortable to table rows, what would be the best way to run this script then on document ready, and on change. The first part works, but i am not getting alerted when the table rows change.

this is now my revised code:

function countRows(){
    var i = 0;
    $('#offices td input').each(function(){
        $(this).attr("value", ++i);
    });  
}
$(document).ready(countRows);

// Sortable rows
$('.sorted_table').sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>'
})

$('.sorted_table').children("tbody").sortable({
    stop: function (event, ui) {
        countRows(); // re-number rows after sorting
    }
});

Probably because you are running `countRows` before you `bind` the `alert` — dursk, Oct 23 '14 at 01:31
the bind is not related to the countrows, whats not happening is that there is no alert when the DOM is modified. once i get that working i will run the count rows function within it. — TEN Design, Oct 23 '14 at 01:33
actually this is all the code there is to post the CSS class "sorted_table" is assigned to the element, so any changes in the nested table should be heard by th DOMSubtreeModified correct? — TEN Design, Oct 23 '14 at 01:37
Yes, I'm asking for more code to see when/where/how that table gets modified. — dursk, Oct 23 '14 at 01:39
mhmm, and that would involve posting the entire Sortable plugin, basically its a drag and drop UI so the table gets modified when the user drags the table row and drops it. — TEN Design, Oct 23 '14 at 01:41
It looks like `DOMSubtreeModified` is deprecated. Look at the second answer in this post: http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener — dursk, Oct 23 '14 at 01:49
maybe you could use the `onDrop` callback from the sortable method for your detection. [jsfiddle](http://jsfiddle.net/Ltvrxtox/) — MamaWalter, Oct 23 '14 at 02:00
yep that looks like the ticket, i missed that in the documentation — TEN Design, Oct 23 '14 at 02:20

score 1 · Accepted Answer · answered Oct 23 '14 at 02:58

1

Assuming you are using jQuery UI Sortable:

$('.sorted_table').children("tbody").sortable({
    stop: function (event, ui) {
        countRows(); // re-number rows after sorting
    }
});

jsFiddle demo here: http://jsfiddle.net/7vmf1c4L/

answered Oct 23 '14 at 02:58

nothingisnecessary

6,099
36
60

Jquery Sortable on table rows run function on change

1 Answers1