Switch Positions of Tablerows only work once

Question

I have made a jsfiddle

I have a table with articlepositions. And I would made it able that the User can change the position sort by clicking up or down arrows.

But when I swap once the position, i could not change the position of the changed row anymore.

Here is the function:

function switchPosition( data, direction )
{
    var tableName = "artikelposition";
    currentPosition = parseInt( data['position'] );

    if( direction == "up" )
    {
        newPosition = currentPosition - 1;
    }
    else if( direction == "down" )
    {
        newPosition = currentPosition + 1;
    }

    var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");
    console.log("clicked object" + data['artikelid'] + " : current position " + data['position'] + " : new position " + newPosition);
    console.log("other objekt" + $("#" + otherTr).data("artikelid") + " : current position " + $("#" + otherTr).data("position") + " : new Position " + currentPosition);

    $( "#" + data['artikelid'] )
        .data({
            "position": newPosition
        });
    $( "#" + data['artikelid'] + " td.tdArticleNumber span.spanPositionNummer" )
        .html( newPosition );


    $( "#" + otherTr )
        .data({
            "position": currentPosition
        });
    $( "#" + otherTr + " td.tdArticleNumber span.spanPositionNummer" )
        .html( currentPosition );

    sortTable( tableName );
}

score 1 · Answer 1 · edited May 23 '17 at 12:26

You can probably accomplish this with a lot less code (see jsfiddle):

$(document).ready(function(){
    $(".rowUp,.rowDown").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".rowUp")) {
            row.prev().find(".spanPositionNummer").html(row.index() + 1);
            row.insertBefore(row.prev());

        } else {
            row.next().find(".spanPositionNummer").html(row.index() + 1);
            row.insertAfter(row.next());
        }
        row.find(".spanPositionNummer").html(row.index() + 1);
    });
});

You can attach a click handler to the images and user insertBefore() to move the rows. You can also use the built-in index() function (rather than fiddling with data-position) to set the position number span.

(Based on the answer from How to move table row in jQuery?)

Or if you want to do this with your existing code, the bug seems to be that you're selecting the wrong otherTr.

When you first click the down arrow on the top row, you can see in the console that the selected row is moved from position 1 to 2, and the middle row is moved from 2 to 1:

Angeklicktes Objekt2445 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 2 : neue Position 1 (index):60

But when you click the bottom arrow on what's now the top row, this is what the console logs:

Angeklicktes Objekt2501 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 1 : neue Position 1 (index):60

Note that the top row is (correctly) being moved from position 1 to 2. But immediately afterwards, the same row (Objekt2501, referenced by the same position) is instructed to move from 1 to 1.

Much more elegant code, that's for sure :) But I still can't figure out why original code doesn't work — Regent, Jul 16 '14 at 10:02

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

As ASGM has already mentioned, problem is with otherTr. In this line:

var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");

I still don't know why this expression always returns data-artikelid of first tr, but if you somewhy want to save your code, than you can use replace this line with something like:

$("#artikelposition tr").each(function()
{
    var that = $(this);
    if (that.data("position") == newPosition)
    {
        otherTr = that.data('artikelid');
    }
});

As Pawel said there in comments, problem is that data-position is set dynamically. But even his idea to use $("...").attr("data-...", value) seems not to work there.

edited May 23 '17 at 10:33

Community

1
1

answered Jul 16 '14 at 10:33

Regent

5,142
3
21
35

Good to see a solution that keeps the original code, in case that's what OP wants. – ASGM Jul 16 '14 at 10:39
1

@ASGM yea, thanks, even though your one not only is more elegant, but also protects from `newPosition = -1` and `newPosition = 4` – Regent Jul 16 '14 at 10:45
thanks a lot. this was the right code. Because i need the id of the tr for my ajax-functions. the code works – Jul 16 '14 at 11:00

Switch Positions of Tablerows only work once

2 Answers2