Question

I’ve looked all over for this but haven’t had much luck.

So given this code:

$("span[id*=Section]").click(function(){
    var row = $(this).parents("tr.MoveableRow:first");
    if ($(this).is(".up_button")) {
        row.insertBefore(row.prev());
        section = this.id;
        $("input[name='" + section + "']").val(row.closest("tr").prevAll("tr").length + 1);
    } else {
        row.insertAfter(row.next());
        section = this.id;
        $("input[name='" + section + "']").val(row.closest("tr").prevAll("tr").length + 1);
    }
});

Currently, when clicking on the up/down button, the TR moves up or down as expected. The “input[name=” part takes the passed in value of the span ID and assigns the new value to a hidden fields within that TR.

What this ends up doing though is giving me duplicate IDs. So for example, I move row 2 up to row 1. The old row 2’s hidden input value becomes 1, but the original 1’s hidden input is also 1.

So what I need to be able to do is make the old 1, the new 2.

Answer 1

Wouldn’t you just do the same thing for the row you moved? (And because you are doing the same thing in the up and down cases, you can simplify your code a bit)

$("span[id*=Section]").click(function(){
    var row = $(this).parents("tr.MoveableRow:first");
    if ($(this).is(".up_button")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }

    $("input[name='" + this.id + "']").val(row.closest("tr").prevAll("tr").length + 1);
    $("input[name='" + row[0].id + "']").val(row.closest("tr").prevAll("tr").length + 1);
});

You could also possibly use .index(), but I don’t know what your html looks like:

$("span[id*=Section]").click(function(){
    var row = $(this).parents("tr.MoveableRow:first");
    var offset = 1; // Offset of TR being swapped with (up/down)

    if ($(this).is(".up_button")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
        offset = -1;
    }

    var position = $('tr.MoveableRow').index(row) + 1;
    $("input[name='" + this.id + "']").val( position );
    $("input[name='" + row[0].id + "']").val( position + offset );
});