Question

I’m using http://jqueryui.com/demos/sortable/#empty-lists to render a list of elements that an user can select. But now I have to implement 2 buttons: one to select all (i.e move all the elements from left to right) and another to unselect all(i.e. move all the elements from right to left) but I’m not very sure of how to do that…

Here’s the script part:

<script>
    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#listaCentrosDisponibles, #listaCentrosSeleccionados").disableSelection();
        $("#listaCentrosDisponibles, #listaCentrosSeleccionados").css('minHeight',$("#listaCentrosDisponibles").height()+"px");
        updatePostOrder();
    }); 
    function updatePostOrder() { 
        var arr = [];
        $("#listaCentrosSeleccionados li").each(function(){
            arr.push($(this).attr('id'));
        });
        $('#centrosSeleccionados').val(arr.join(','));  
    }
</script>

And here’s the jsp part (I’m using Spring MVC with Spring 3.1):

<div class="listBlock">
    <ul id="listaCentrosDisponibles" class="droptrue">
        <c:forEach items="${filtro.centros}" var="centro">
            <li class="centro_draggable" id="${centro.idCentro}">${centro.nombre}</li>
        </c:forEach>
    </ul>
</div>

<div class="listBlock">
    <ul id="listaCentrosSeleccionados" class="droptrue">
    </ul>
    <form:hidden path="centrosSeleccionados" />
</div>

Filtro.centros is the original list with the elements that can be selected, centrosSeleccionados is the list where I store the elements that have been selected.

I tried this:

("#quitar_todos").click(function() {
    var arrDisponibles = [];
    var arrSeleccionados = [];
    $("#listaCentrosSeleccionados li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $("#listaCentrosDisponibles li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $('#centrosDisponibles').val(arrDisponibles.join(','));
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

Where quitar_todos is:

<a id="quitar_todos" href="#"><span>Quitar todos</span></a>

But it won’t work…

Answer 1

Well, in the end I figured out how to do it.

Here’s the script part:

$(function() {
    $("ul.droptrue").sortable({
        connectWith: 'ul',
        opacity: 0.6,
        update : updatePostOrder
    });

    $("#listaCentrosDisponibles, #listaCentrosSeleccionados").disableSelection();
    $("#listaCentrosDisponibles, #listaCentrosSeleccionados").css('minHeight',$("#listaCentrosDisponibles").height()+"px");
    updatePostOrder();

    $("#boton_quitar_todos").click(function() {
    var arrDisponibles = [];
    var arrSeleccionados = [];
    $("#listaCentrosSeleccionados li").each(function(){
        $(this).remove();
        $(this).appendTo("#listaCentrosDisponibles");
    });
    $("#listaCentrosDisponibles li").each(function(){
        arrDisponibles.push($(this).attr('id'));
    });
    $('#listaCentrosDisponibles li').sort(sortAlpha).appendTo('#listaCentrosDisponibles');
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

$("#boton_seleccionar_todos").click(function() {
    var arrSeleccionados = [];
    $("#listaCentrosDisponibles li").each(function(){
        $(this).remove();
        $(this).appendTo("#listaCentrosSeleccionados");
    });
    $("#listaCentrosSeleccionados li").each(function(){
        arrSeleccionados.push($(this).attr('id'));
    });
    $('#listaCentrosSeleccionados li').sort(sortAlpha).appendTo('#listaCentrosSeleccionados');
    $('#centrosSeleccionados').val(arrSeleccionados.join(','));
});

});

function updatePostOrder() { 
    var arr = [];
    $("#listaCentrosSeleccionados li").each(function(){
        arr.push($(this).attr('id'));
    });
    $('#centrosSeleccionados').val(arr.join(','));  
}

function sortAlpha(a,b){  
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
};  

And here’s the jsp piece:

<div class="listBlock">
    <ul id="listaCentrosDisponibles" class="droptrue">
        <c:forEach items="${filtro.centros}" var="centro">
            <li class="centro_draggable" id="${centro.idCentro}">${centro.nombre}</li>
        </c:forEach>
    </ul>
</div>

<a id="seleccionar_todos" href="#"><span>Seleccionar todos</span></a>
<a id="quitar_todos" href="#"><span>Quitar todos</span></a>

<div class="listBlock">
    <ul id="listaCentrosSeleccionados" class="droptrue">
    </ul>
    <form:hidden path="centrosSeleccionados" />
</div>