how to find selected elements with Jquery UI selectable

Question

Hi All, I am looking for info on the event and ui objects the jquery selectable events: "selecting", and "start" take as parameters. I cannot find this in the documentation and looping through the properties is no help.

  $('#content_td_account').selectable({
                                      filter: 'li:not(".non_draggable")',
                                      selecting: function(event, ui) { 

                                      }

                                       });

Specifically I want to find what elements are being selected and check them to see if their parent elements are the same or not. I assumed this would be in the ui object some where.

Answer 1

When an element is selected it gets the ui-selected class added.

So you could get all selected elements with $(".ui-selected")

This might not work exactly but I think the idea would be something like this:

$('#content_td_account').selectable({
  filter: 'li:not(".non_draggable")',
  selecting: function(event, ui) { 
    var p = $(this).parent();
    $(".ui-selected").each(obj, function() {
      if(obj.parent() == p) {
        // get rad
      }
    });
  }
});

Answer 2

I have the same trouble, I hope this helps: I managed to get the content for "ui" object debugging in firebug. ui.selected.id gives the id of the selected element in last selection. It shows the last selected element even when you have multiple selections. I tried this with the 1.8rc3.

Answer 3

this will solve your problem:

    <script type="text/javascript">
    $(function() {
        $("#selectable").selectable({
            stop: function(){
                var result = $("#select-result").empty();
                $(".ui-selected", this).each(function(){
                    var index = $("#selectable li").index(this);
                    result.append(" #" + (index + 1));
                });
            }
        });
    });
    </script>


<div class="demo">

<p id="feedback">
You've selected: <span id="select-result">none</span>.
</p>

<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>
</ol>

check out http://jqueryui.com/demos/selectable/#serialize for more info