JQuery UI selectable : Preselecting list item

Question

I am trying to implement the click of the first item of the selectable list.I can add the CSS but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..) I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.

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

Jquery function

        $(function() {
        $( "#selectable" ).bind("mousedown", function (e) {
            e.metaKey = false;
        }).selectable({
             selected: function(event, ui) {

                 alert("selected");

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

I can apply the css to the first list item like this

    $('li:first-child').select().addClass("ui-selected");

But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.

Could you put your example at [jsfiddle](jsfiddle.net) ? so others can help you — Paco Valdez, Dec 09 '11 at 23:13

score 3 · Accepted Answer · answered Dec 13 '11 at 15:58

After some trying i managed to get it working.Posting the solution as it may be useful. I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind

$( "#selectable" ).bind( "selectableselected", function(event, ui) {

    $( ".ui-selected", this ).each(function() {
    var index = $( "#selectable li" ).index( this );
    alert("test");


    });
    });

Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.

    create: function(event, ui) {
            setTimeout( function() {
    $('li:firstchild').addClass("uiselected").trigger('selectableselected');

            }, 100 );

the great thing about Jquery is that its so intutive.

You forgot a closing } on your create function. Also the class is 'ui-selected' instead of just 'uiselected'. — joshmmo, Apr 09 '13 at 19:26

JQuery UI selectable : Preselecting list item

1 Answers1