views:

75

answers:

2

Hi,

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.

A: 

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
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
A: 

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
Ahh ok now I get what you ment! sorry!
Trufa
No problem @Trufa. I'm sure I didn't explain it very well. Thanks for trying to help.
fehays
@fehays: good luck!
Trufa