Question

I have a page with the below structure (HTML content shortened for readability), where the order of the ‘pictureinthread’ divs in the DOM when the page is rendered is based on the number of votes in the ‘voteamount’ child div (which is actually two levels down given the picturemeta div). The user has the ability to dynamically upvote a given image (via Ajax) which increases its count (the value in ‘voteamount’). I would like, if the position of div should change based on the vote, for it to dynamically animate and assume its new proper position. I already have the ajax working properly and the number in ‘voteamount’ updating, but my javascript/Jquery experience is not enough to go further, which is to inspect all the other values in the ‘voteamount’ for the other ‘pictureinthread’s and do a nice animation if the ‘pictureinthread’ should move.

Note I realize that currently it could only move one spot, but I would like the ability for it to move anywhere within the list of ‘pictureinthread’ based on the returned value from the ajax call, as the voting logic will get more complicated.

I am using Grails with the JQuery plugin, and currently the Ajax looks like this for each div as per the below, you can see where I need the help (I’m assuming onComplete is the best point given http://grails.org/doc/latest/ref/Tags/remoteLink.html)

<g:remoteLink onComplete="HELP ME HERE!" controller="voting" action="upvote" update="upvotes${pictureInThread.id}" id="${pictureInThread.id}">

And my HTML

    <div class="pictureinthread" id="..">
        <img src="..." id="..." class="..."/>

        <div class="picturemeta">
            <a href="..ajax call rendered with the g:remotelink..."><img class="thumbsup" src="..."/> <div class="voteamount" id='upvotes+unique...'>3</div></a>     
        </div>
    </div>


    <div class="pictureinthread" id="...">
        ..many more like the above..
    </div>

Answer 1

Alternatively, since it’s the UX/animation that is important, here’s another method:

http://jsfiddle.net/andromedado/jhYd7/

The basic idea is that the function updatePos accepts a jQuery wrapped <div class="pictureinthread">, and it will animate it into the correct position relative to its immediate siblings. In the jsFiddle I have the event triggered on click, but in your model you would trigger it on ajax update.

CSS

.rel {postion:relative;}

JS

function getVN($div){
    return parseInt($div.find('.voteamount').text(),10);
}
function sendDown($div){
    //Prettily Animated Swap of this div with it's next sibling
    var h = $div.height(),
        d1 = false,
        d2 = false,
        c = $div.add($div.next()).addClass('rel');
    $div.animate({top:h},1000,'linear',function(){
        d1 = true;
        if (d1 && d2) {
            $div.next().after($div);
            c.removeClass('rel').attr('style','');
            updatePos($div);
        }
    });
    $div.next().animate({top:(-1 * h)},1000,'linear',function(){
        d2 = true;
        if (d1 && d2) {
            $div.next().after($div);
            c.removeClass('rel').attr('style','');
            updatePos($div);
        }
    });
}
function sendUp($div){
    //Prettily Animated Swap of this div with it's previous sibling
    var h = $div.prev().height(),
        d1 = false,
        d2 = false,
        c = $div.add($div.prev()).addClass('rel');
    $div.animate({top:(-1 * h)},1000,'linear',function(){
        d1 = true;
        if (d1 && d2) {
            $div.after($div.prev());
            c.removeClass('rel').attr('style','');
            updatePos($div);
        }
    });
    $div.prev().animate({top:h},1000,'linear',function(){
        d2 = true;
        if (d1 && d2) {
            $div.after($div.prev());
            c.removeClass('rel').attr('style','');
            updatePos($div);
        }
    });
}
function updatePos($div){
    var mV = getVN($div), pV, nV;
    if ($div.prev('.pictureinthread').length) {
        pV = getVN($div.prev('.pictureinthread'));
        if (pV < mV) return sendUp($div);
    }
    if ($div.next('.pictureinthread').length) {
        nV = getVN($div.next('.pictureinthread'));
        if (nV > mV) return sendDown($div);
    }
    return true;
}