CODEWITHSUNDEEP
jqueryjquery-ui-sortable
David Cole
David Cole

Reputation: 41

Updating input value with jquery after sorting with jquery

I'm having an issue getting some JS code to work. What we are doing is sorting a table of information with drag and drop, then updating the input field which is displaying the sort order number of the item moved, and all other items.

An example of what I'm doing is here: http://artmarketnetwork.com/sort_example.html

Obviously broken, I'm using jquery sortable, the below code is what I use, the sortable works, the execution of the function to update the other input statements is not working.`

$(document).ready(function(){
    $("#AttachmentWeight").live("change keyup", function() {
        $("#UserDashboardWeightForm").submit();
    });     

    $(".tablesorter tbody").sortable({ 
        opacity: 0.6, 
        cursor: 'move', 
        update: function() {
            $('table#summary tbody tr:odd').removeClass('alt-row');
            $('table#summary tbody tr:even').addClass('alt-row');
            var order = $(this).sortable("serialize"); 
            $.post("/attachments/sortable/", order);
                            updateInputs();
        }                                 
    });

});

function updateInputs() {
    $("#AttachmentWeight").each(function() {
        var aid = $(this).attr('rel');
        alert(aid);
        var weight = $(this).load("/attachments/getWeight/" + aid);
        alert(weight);
        $(this).val(weight);
    });
}

`

The above call to load("/attachments/...") is getting the weight # of the item. Its a section that returns only a number so we know the weight of the.

Has anyone else had any success with this? I have a feeling its something very simple that I'm missing.

Upvotes: 1

Views: 1282

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

I've looked through markup on your site. You should never have duplicating ids in DOM. Replace id with class.

<input name="data[Attachment][0][weight]" type="text" value="1" rel="3334" style="width:30px;" class="AttachmentWeight">


function updateInputs() {
    var attachments = $(".AttachmentWeight").each(
         var $this = $(this),
             id = $this.attr("rel"),
             setWeight = function(value){
                $this.val(value);
             };
         $.get("/attachments/getWeight/" + id).done(setWeight);
    );


}

Notes:

Never duplicate ids!

.load loads data from server and inject returned html into matched DOM element. Simple $.get would load data without injecting it into DOM.

Upvotes: 1

Related Questions