Can't access element after drag and drop

Question

I've made a drag and droppable table for sorting products.

My table looks like this:



    [{foreach from=$mylist item=listitem}]
    [{assign var="_cnt1" value=$_cnt1+1}]

        

    [{/foreach}]
    

    
            [{$_cnt1}]
            Productname

My jQuery looks like this:

$(function() {
        $('.table-sortable tbody').sortable({
            handle: 'span'
        });

    $('.table-sortable tbody').sortable().bind('sortupdate', function(e, ui) {
        function updateTable(){
        var table = document.getElementById("mytab");
            for (var i = 0, row; row = table.rows[i]; i++) {
                $( row ).attr("id","test_variant."+i);
                $( row ).find(".idcount").text(i);  
                $( row ).find(".sortcount").val(i+10);
            }
        }
        setTimeout(updateTable, 100);
    });
});

The problem is, after I drag and drop my items the dom or something doesn't exist anymore.

Like my system won't save the dragged and dropped entries (But the others which are updated but not dragged).

And what leads me here because I don't understand it is when i dragged an item and try to access it like this

document.getElementById("sortcount1").value = "200";

it just says

Uncaught TypeError: Cannot set property 'value' of null like it's not existing

I've no problem accessing the other items.

When I open the dom with clicking on elements in chrome devtools, then back to console and try it again its working again like it needs to initialize or something.

Hope someone can give me a hint.

Thank you!

user_463319 · Answer

You might consider the following example.

$(function() {
  function updateTable(e, ui) {
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) {
      $(el).attr("id", "test_variant." + i);
      $(".idcount", el).html(i);
      $(".sortcount", el).val(i + 10);
    });
  }

  $('.table-sortable tbody').sortable({
    handle: 'span',
    update: updateTable
  });
});

This will reset the items in the table after the Sort has updated.

Update

$(function() {
  function updateTable(e, ui) {
    var t = $(e.target).closest("table");
    $("tbody tr", t).each(function(i, el) {
      var c = i + 1;
      $(el).attr("id", "test_variant." + c);
      $(".idcount", el).html(c);
      $(".sortcount", el).val(c + 10);
    });
  }

  $('.table-sortable tbody').sortable({
    handle: 'span',
    items: "> tr",
    update: updateTable
  });
});

table {
  width: 340px;
}

table tr {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}






  
    
       
      ID
      Product Name
    
  
  
    
      
      1
      Item Name 1
        
      
    
    
      
      2
      Item Name 2
        
      
    
    
      
      3
      Item Name 3
        
      
    
    
      
      4
      Item Name 4
        
      
    
    
      
      5
      Item Name 5

Tested the code and it appears to work properly.

Can't access element after drag and drop

1 Answers