How to programmatically select selectables with jQuery UI?

Question

I have a range of items that are selectable. I would like to add a button somewhere that activates a preset selection amongst those. Is there a way I can do that?

What I would like is to tell it to "Select these guys" and then have all the events and all fired as normal, so I don't have to call all of those selection events manually.

More info: The events that I talk about are the ones listed in their api and on their demo page:

• selected
• selecting
• start
• stop
• unselected
• unselecting

And also, I think there might be data that is set/cleared as well when selecting things. So it's not just to add those css classes.

Zaidazailer

Answer 1

Here is a variation of Alex R's code working with multiple elements

http://jsfiddle.net/XYJEN/1/

function SelectSelectableElements (selectableContainer, elementsToSelect)
{
    // add unselecting class to all elements in the styleboard canvas except the ones to select
    $(".ui-selected", selectableContainer).not(elementsToSelect).removeClass("ui-selected").addClass("ui-unselecting");

    // add ui-selecting class to the elements to select
    $(elementsToSelect).not(".ui-selected").addClass("ui-selecting");

    // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)
    selectableContainer.data("selectable")._mouseStop(null);
}

Update:

jQueryUI 1.10, per comments from kmk: http://jsfiddle.net/XYJEN/163/

Solicitor

Cool. Probably not related, but why doesn't Ctrl+Click to select more than one work in that sample though? Is it something with jsfiddle? – Zaidazailer

Yeah I noticed that too. After testing, it looks like jQueryUI 1.8.16 is the problem. After giving jsFiddle a reference to 1.8.17, Ctrl+Click works. I updated the example. – Solicitor

@Zaidazailer - after upgrading to jQuery UI 1.10 that last line should be selectableContainer.data("ui-selectable")._mouseStop(null);. Reference here: jqueryui.com/upgrade-guide/1.10/… – Arathorn

I needed to add selectableContainer.selectable('refresh') before the _mouseStop line because I was getting intermittent errors as mentioned by @deerchao on the other answer. – Flats

Answer 2

Assuming the selectable sample on the jQuery UI website (http://jqueryui.com/demos/selectable/):

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable();
    });
    </script>



<div class="demo">

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

</div><!-- End demo -->

you can have a function like:

    function selectSelectableElement (selectableContainer, elementToSelect)
    {
        // add unselecting class to all elements in the styleboard canvas except current one
        jQuery("li", selectableContainer).each(function() {
        if (this != elementToSelect[0])
            jQuery(this).removeClass("ui-selected").addClass("ui-unselecting");
        });

        // add ui-selecting class to the element to select
        elementToSelect.addClass("ui-selecting");

        selectableContainer.selectable('refresh');
        // trigger the mouse stop event (this will select all .ui-selecting elements, and deselect all .ui-unselecting elements)
        selectableContainer.data("selectable")._mouseStop(null);
    }

and use it like:

// select the fourth item
selectSelectableElement (jQuery("#selectable"), jQuery("#selectable").children(":eq(3)"));

This can be improved to allow selecting a collection of elements, but it's a starting point to get you going.

Diaspora

call selectableContainer.selectable('refresh') before calling _mouseStop(null), or you may meet "selectee is undefined" or "e is undefined" error. – Celaeno

The error I was getting without @deerchao's fix was Uncaught TypeError: Cannot read property '$element' of undefined. It'd be nice to get the answer updated. – Flats

I had to use selectableContainer.data("ui-selectable")._mouseStop(null); - please note the ui-... – Boni

Answer 3

There you go:

,calc: function() { this._mouseStop(); },
custom: function(guys) {
  var self = this;
  self.selectees.removeClass("ui-selected");
  guys.each(function(){
    $(this).addClass("ui-selecting");
    self._trigger("selecting", {}, {
       selecting: this
    });
  });
  this.calc(); // do the selection + trigger selected
} 

Add this after _mouseStop in selectable.js and then you can say:

$("#selectable").selectable("custom", $("#selectable :first-child"));

... or whatever you like.

Have fun! :)

Philipines

Answer 4

Edit : Sorry for the misunderstanding, I'm editing my answer.

So, yes it is possible the selection of the object corresponds to the class ui-selected, so what you can do is :

$(#button).click(function(){
  $("#element1").addClass("ui-selected");

  .......

});

Fritts

This isn't correct either...there are lots of events in the background that this won't fire, not to mention setting it's data correctly. – Edify

Hey, can you be more specific about the basckground events? Apart from the animations, I'm not sure to know about them. Thanks for your contribution, I know mine are uncomplete once in a while, but you keep us "basic users" from saying too much crap ;) – Fritts

I updated the question with information about those events :) – Zaidazailer

This works fine for me… jQuery documentation sucks. This should be like.. the 2nd thing listed in their weak-a** docs. – Liverish

Answer 5

Is it not possible to trigger the selected event manually with .trigger('selected')?

Brail

Hm, I suppose, but then I would miss the rest of the events of course. Also, would triggering that event do whatever jquery-ui does? I mean, I thought jquery-ui did what was necessary (marking with classes and all that, and then triggering that event itself. I want to tell it to do all that it normally does when a user selects some items, without me having to figure out what exactly all of those steps are. – Zaidazailer

I tried this way : $("#selectable li:first").trigger('selected') on their demo page and doesn't do anything :( – Commixture

Answer 6

Using Ionut code, how about:

 $("#selectable li:first").trigger('start').trigger('selecting').trigger('selected'); 

?

Victim

Nope, doesn't work. Try to open firebug console in the demo page and paste there this code. :) – Commixture