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
– Paco Valdez, Commented Dec 9, 2011 at 23:13

Sunil M · Accepted Answer · 2011-12-13 15:58:11Z

3

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.

answered Dec 13, 2011 at 15:58

Sunil M

951 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joshmmo Over a year ago

You forgot a closing } on your create function. Also the class is 'ui-selected' instead of just 'uiselected'.

Collectives™ on Stack Overflow

JQuery UI selectable : Preselecting list item

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related