15

Does anyone know if there's a way to configure a jquery ui selectable element to unselect the selected element when you click it? Sort of like a toggle. If it's already selected, unselect it, otherwise do the default behavior.

Thanks.

fehays
  • 3,147
  • 1
  • 24
  • 43

4 Answers4

41

i'm very late in responding to your question, but let me just answer it anyway so that to keep it as a reference for others.

$( ".selector" ).bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable();

this will allow the toggle behavior that you're looking for.

Keith Socheath Chea
  • 426
  • 5
  • 2
  • 2
    i see it is working as expected but honestly, i dont understand how! can you please explain why this code is working (i mean how it is unselecting on second click?) – HungryCoder Jan 13 '13 at 09:45
  • 4
    This just adds the metaKey (Ctrl) to the "mousedown" event, which forces the same behaviour as if you would have pressed Ctrl yourself. – Novalis May 16 '13 at 09:03
11

Well here's what I just ended up doing. I used a class name to toggle selecting and unselecting. I'd love to hear if there is another option:

$("#selectable").selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
            // do unselected stuff
        } else {            
            $(ui.selected).addClass('selectedfilter');
            // do selected stuff
        }
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('selectedfilter');
    }
});
fehays
  • 3,147
  • 1
  • 24
  • 43
  • Ahh ok now I get what you ment! sorry! – Trufa Oct 15 '10 at 22:51
  • No problem @Trufa. I'm sure I didn't explain it very well. Thanks for trying to help. – fehays Oct 15 '10 at 23:29
  • 1
    Note that in order to switch a class name, you can simply use 'toggleClass("selectedFilter")'. No need to check if an element has a class. ToggleClass does that for you. – Kriem May 03 '12 at 11:25
2

If you want that existing selections be preserved and yet have the toggle operation, you simply need to ignore the unselected event for the solution given. Also you need to remove the ui-selected class.

$("#selectable").selectable({
selected: function (event, ui) {
    if ($(ui.selected).hasClass('selectedfilter')) {
        $(ui.selected).removeClass('selectedfilter').removeClass('ui-selected');
        // do unselected stuff
    } else {            
        $(ui.selected).addClass('selectedfilter').addClass('ui-selected');
        // do selected stuff
    }
}
});
Tom
  • 3,009
  • 1
  • 18
  • 23
Rashed Alee
  • 21
  • 2
0

Is this what you mean?

This event is triggered at the end of the select operation, on each element removed from the selection.

Code examples

Supply a callback function to handle the unselected event as an init option.

$( ".selector" ).selectable({
   unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
  ...
});

Source:

http://jqueryui.com/demos/selectable/#event-unselected

Trufa
  • 39,971
  • 43
  • 126
  • 190
  • Well what I need is to trigger this unselected event when a selected element is clicked. Right now, this event only fires when I click another selectable element. – fehays Oct 15 '10 at 22:31