jquery trier, mettre à jour le champ de commande

Question

J'essaie d'utiliser jquery sortable et quand un élément est déplacé, il met alors à jour le champ de commande caché? Est-ce que quelqu'un a déjà fait ça? J'ai essayé quelques choses différentes mais ça ne passe pas par l'ordre actuel de l'article.

Voici mon code:

jQuery(document).ready(function() { 
    jQuery(".sortable").sortable({ 
    opacity: 0.6, 
    cursor: 'move', 
    update: function(event, ui) { 
     var ordering = $(this).sortable('toArray').toString(); 
     alert(ordering); 
    } 
    }); 
}); 

Et voici la partie triables de ma table:

<tbody class="sortable ui-sortable"> 
    <tr> 
    <td width="5" align="center" class="cols sort">&nbsp;</td> 
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td> 
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td> 
    </tr> 
    <tr> 
    <td width="5" align="center" class="cols sort">&nbsp;</td> 
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td> 
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td> 
    </tr> 
</tbody> 

Je veux juste le champ de saisie « commande » être mis à jour lorsque l'élément est déplacé à l'aide jquery triable.

Merci d'avance :)

Answer 1

Vous devriez donner les ID de votre tr. Voici un jsfiddle

<tbody class="sortable ui-sortable"> 
    <tr id="1"> 
    <td width="5" align="center" class="cols sort">&nbsp;</td> 
    <td align="left"><a onclick="getUsrInfo(1)" class="__productTBLink"><strong>Leanne Seawright</strong>, Web Designer <span class="__rowShowInfo">- view info.</span></a></td> 
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(1);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a><input type="text" value="1" id="ordering[1]" name="ordering"></td> 
    </tr> 
    <tr id="2"> 
    <td width="5" align="center" class="cols sort">&nbsp;</td> 
    <td align="left"><a onclick="getUsrInfo(2)" class="__productTBLink"><strong>George Jetson</strong>, Driver <span class="__rowShowInfo">- view info.</span></a><input type="text" value="2" id="ordering[2]" name="ordering"></td> 
    <td width="20" align="center"><a class="__productTBLink" onclick="javascript:confdelete(2);"><img width="16" height="16" align="left" title="Delete - click to delete this user" alt="Edit" src="/templates/manufacturers/images/delete.png"></a></td> 
    </tr> 
</tbody>