In jQuery UI, what is the type/contents of the "ui" object passed to the callback function of alot of the event methods, and how do I use it?

For example, the "selectable" demo, the event "selected" gets passed two params. "Event" and "UI". I am trying to use it as follows:

    $("#selectable").selectable({ 
      selected: function(event, ui) { 
        $(ui).find("input").attr('checked', true); 
      } 
    });

(here is the html:)

<ol id="selectable"> 
    <li class="ui-state-default"><input type="checkbox" value="1" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="2" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="3" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="4" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="5" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="6" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="7" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="8" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="9" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="10" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="11" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="12" /></li> 
</ol> 

But it isn't working. What am I doing wrong? I'm assuming that the ui param is set to an object representing the "li" that is selected, but when I try and use it it doesn't seem to be the case...

Example (edit example)

In jQuery UI, what is the type/contents of the "ui" object passed to the callback function of alot of the event methods, and how do I use it?

For example, the "selectable" demo, the event "selected" gets passed two params. "Event" and "UI". I am trying to use it as follows:

    $("#selectable").selectable({ 
      selected: function(event, ui) { 
        $(ui).find("input").attr('checked', true); 
      } 
    });

(here is the html:)

<ol id="selectable"> 
    <li class="ui-state-default"><input type="checkbox" value="1" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="2" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="3" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="4" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="5" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="6" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="7" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="8" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="9" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="10" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="11" /></li> 
    <li class="ui-state-default"><input type="checkbox" value="12" /></li> 
</ol> 

But it isn't working. What am I doing wrong? I'm assuming that the ui param is set to an object representing the "li" that is selected, but when I try and use it it doesn't seem to be the case...

Example (edit example)

• javascript
• jquery
• jquery-ui

• Have you tried if it works with $(event.target).find("input") ? – Daff Commented Jan 8, 2010 at 12:38
• That selects everything, not just the actual target of the event. Weird... – cmcculloh Commented Jan 8, 2010 at 13:17

1 Answer 1

From what I understand, (and this is just from making observations and my incredible powers ::cough, cough:: of inference) ui is a object or collection of the elements that are being acted upon within the user interface. In order to access them, you need to pick the one you want to be using, rather than selecting the object as a whole. Eg. in droppable, it's ui.draggable or ui.droppable. In your example, ui.selected is what would work.

$("#selectable").selectable({
    selected: function(event, ui) {
       $(ui.selected).find("input").attr('checked', true);
    }
});

Hope that answers your question.