Hola, estoy tratando de actualizar los input de la posición que deja jqueryui sortable al ordenar una fila y por alguna razón que no logro comprender no quiere hacerlo
este es el codigo que estoy usando:
Código HTML:
<table id="sortable_nav">
<tbody class="ordenable">
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="1">1 Apple
<div class="ui-state-default sortable-number">1</div>
</td>
</tr>
</tbody>
<tbody class="ordenable">
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="2">2 Caca
<div class="ui-state-default sortable-number">2</div>
</td>
</tr>
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="3">3 Banana
<div class="ui-state-default sortable-number">3</div>
</td>
</tr>
</tbody>
<tbody class="ordenable">
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="4">4 Ginger
<div class="ui-state-default sortable-number">4</div>
</td>
</tr>
</tbody>
<tbody class="ordenable">
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="5">5 Watermelon
<div class="ui-state-default sortable-number">5</div>
</td>
</tr>
</tbody>
<tbody class="ordenable">
<tr>
<td class="ui-state-default">
<input type="text" class="ordena" value="6">6 Blackberry
<div class="ui-state-default sortable-number">6</div>
</td>
</tr>
</tbody>
</table>
Código:
$("#sortable_nav").sortable({
items: ".ordenable",
cursor: 'move',
opacity: 0.2,
update: function(event, ui) {
var $lis = $(this).children('tbody');
$lis.each(function() {
var $li = $(this);
var newVal = $(this).index() + 1;
$(this).children('.ordena').val(newVal);
$(this).children('.sortable-number').html(newVal);
});
}
}).disableSelection();
aqui se puede ver funcionando
http://jsfiddle.net/zgQZf/572/
entiendo o creo que el problema esta aquí var $lis = $(this).children('tbody'); que debería contar los tbody que hay para cambiar el valor, pero nada no va :_(
a ver si alguien me puede echar una mano para resolverlo que llevo ya dos días con esto y no doy con el problema.
este es el codigo original que he modificado y que si funciona
http://jsfiddle.net/lesson8/zgQZf/light/