CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Phoeniyx
Phoeniyx

Reputation: 572

JqueryUI Selectable - unselecting without Ctrl

I am trying to make a selectable list with parent/child/grandchild indentations. Please see below:

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({
    filter: 'li div',
    selected: function (event, ui) {
        var selectedText = $(ui.selected).text();
        $("#selectedNode").text(selectedText);

        if ($(ui.selected).hasClass('selectedfilter')) {
            $(ui.selected).removeClass('selectedfilter');
        }               
    }
});

But, I am having a lot of problems coming up with the "unselect" functionality (i.e. without having press down Ctrl). I also don't want to "bind" Ctrl automatically to mouse down (which is described in some other solutions), b/c I only want one item selected at one time. Also, I just want to understand how to do the control flow to unselect through the events (e.g. "selected:").

What am I doing wrong here? As you can see, the selection gets picked up correctly since the textbox gets updated correctly with the correct text. However, when I click an already clicked item to "unselect" (without holding down Ctrl), it doesn't unselect. I figure even in this situation, a "selected" event gets triggered - but clearly there is something wrong with my "selected:" code. Very frustrating..

Thanks everyone.

Upvotes: 5

Views: 1104

Answers (3)

Chien-Wei Huang
Chien-Wei Huang

Reputation: 1851

Here is mine:

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

You can drag select/unselect without press Ctrl.

In selection/unselection, if all you selected are selected before, set this action as unselection. If more than one are not selected before, set this action as selection.

Upvotes: 1

Phoeniyx
Phoeniyx

Reputation: 572

So I fiddled with it a bit more, and found what I needed. Please see below. Added debug text, in case that may be helpful to someone later on. I will create a different thread for my "side question" regarding indentation. Thanks everyone.

http://jsfiddle.net/bgfn3091/2/

    $('#theParentList').selectable({
        filter: 'li div',
        selected: function (event, ui) {
            var selectedText = $(ui.selected).text();
            $("#selectedNode").text(selectedText);

            $(ui.selected).removeClass('ui.selected');

            $("#debugText").text("Selected");              

            if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select
                $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
                $(ui.selected).removeClass('ui-selected');

                $("#debugText").text("alreadySelected is present and removed");                                  
            }
            else // clicking to select
            {
                $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
                $(ui.selected).addClass('alreadySelected'); // add to just this element

                $("#debugText").text("alreadySelected added");                                                      
            }
        }
    });

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try

// utilize `dblclick` event to remove selected class
$(".ui-selected").one("dblclick", function(e) {
    $(e.target).removeClass("ui-selected")
});

http://jsfiddle.net/Lmsop4k7/3/

Upvotes: 1

Related Questions