JQuery Selectable - cancel current selected element

Question

I have a list containing different some elements. I want all to be selectable, but only in groups. Like:

<ul>
<li rel="group1">Item 1</li>
<li rel="group1">Item 2</li>
<li rel="group2">Item 3</li>
<li rel="group2">Item 4</li>
<li rel="group3">Item 5</li>
<li rel="group3">Item 6</li>
</ul>

I wrote something that could work, but I don't know how to cancel current selection if current's element rel attribute is different to first chosen.

    var selected = null;

    $( "#selectable" ).selectable({
        selecting: function(event, ui) {
            if (!selected)
                selected = $(ui.selecting).attr('rel');

            if (selected != $(ui.selecting).attr('rel')){
               // cancel this selection
            }
        }
    });

Thracian

Answer 1

You can use the filter option to enable only certain list items to be selected.

I have prepared this DEMO for you, there was only one trouble with the filter. It doesn't work when changing enabled items from within selecting handler. So I added a little fix into stop handler, where I remove selection from items, that are not enabled.

Your script could look like this:

var locked = false;

function enableAll() {
    $('li').addClass('enabled');
    locked = false;
}

$("#selectable").selectable({

    // allow only enabled items to be selected
    filter: '.enabled',

    selecting: function(event, ui) {

        if (!locked) {

            var group = $(ui.selecting).attr('rel');

            // disable all items belonging to other groups
            $("#selectable li[rel!='" + group + "']").removeClass('enabled');

            locked = true;
        } 

    },

    stop: function() {

        // this fixes selectable behavior 
        // (it ignores dynamically added filter while selecting)
        $(this).find('li.ui-selected:not(.enabled)').removeClass('ui-selected');

        // if no item is selected, then enable all groups
        if($(this).find('.ui-selected').length == 0) {
            enableAll();
        };
    }

});

// initialize
enableAll();​

Succinic

Answer 2

Check This FIDDLE - Group wise selecting.

HTML

<ul id="selectable">
    <li class="ui-widget-content" rel="group1">Item 1</li>
    <li class="ui-widget-content" rel="group1">Item 2</li>
    <li class="ui-widget-content" rel="group1">Item 3</li>
    <li class="ui-widget-content" rel="group2">Item 4</li>
    <li class="ui-widget-content" rel="group2">Item 5</li>
    <li class="ui-widget-content" rel="group3">Item 6</li>
    <li class="ui-widget-content" rel="group3">Item 7</li>
</ul>​

jquery

$("#selectable").selectable({
    selected: function (event, ui) {
        var gr1Count = 0;
        var gr2Count = 0;
        var gr3Count = 0;
        $(".ui-selected").each(function () {
            // Group 1
            if ('group1' == $(this).attr('rel')) {
                gr1Count++;
            }
            if (gr1Count > 1) {
                $(this).removeClass('ui-selected')
            }
            // Group 2
            if ('group2' == $(this).attr('rel')) {
                gr2Count++;
            }
            if (gr2Count > 1) {
                $(this).removeClass('ui-selected')
            }
            // Group 3
            if ('group3' == $(this).attr('rel')) {
                gr3Count++;
            }
            if (gr3Count > 1) {
                $(this).removeClass('ui-selected')
            }
        });
    }
});

Cubeb

Answer 3

$(function() {
            var message = $('#message');
            var tr = $('#tbl').find('tr');
            tr.bind('click', function(event) {
                var values = '';
                tr.removeClass('row-highlight');
                var tds = $(this).addClass('row-highlight').find('td');

                $.each(tds, function(index, item) {
                    values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
                });
                message.html(values);

            });
        });

MOUSE OVER:

    var message = $('#message');
    var tr = $('#tbl').find('tr');

    tr.hover(
         function() {  // mouseover
             $(this).addClass('row-highlight');
             var values = '';
             var tds = $(this).find('td');

             $.each(tds, function(index, item) {
                 values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
             });
             message.html(values);
         },
         function() {  // mouseout
             $(this).removeClass('row-highlight');
             message.html('');
         }
    );
});

CUSTOM TD:

<table id ="table1">
    <th>MAHDI</th>
    <th>PISHGUY</th>
    <tr>
        <td id = "1">username</td>
        <td id = "2">666</td>
    </tr>
</table>

$('#table1 tr').each(function (){
    var vara = $(this).find('#2').html();
    if(vara != null)
        alert($(this).find('#2').html());
});

or:

<tr class="rowid">
    <td class="user">A</td>
    <td class="id">B</td>
</tr>
    $(document).ready(function(){ 
        rows = $(".rowid").each(function(index,value){
                user = $(value).children(".user").text();
                id = $(value).children(".id").text();
                alert(id+'\t'+user);
        });
    });

Publicspirited

Answer 4

I had to do something similar. A project I recently did had multiple sections broken into rows, and each row had three sections or columns. We needed the functionality to work in a way that if they sorted column 1 from position 1 to position 3, then all other rows would sort their columns accordingly. I accomplished this by calling an animate function, when sorting is completed, that would grab all the other relational columns that triggered the sort and re positioned them. You could do the same accordingly here, or just rebuild your list by adding a container around each group, and then sort by the container, and disable sort ability within the containers. So group 1 would be list items, but when sorted, sorted as a single entity. Hopefully this helps. Happy coding!

Lated