Trigger jQuery UI events: ui-selectable

Question

EDIT:

the jQuery UI selectable widget has a callback built into it, stop, I need to know how to trigger this event programmatically.

(this was poorly worded) I've attached an event listener to the jQuery UI Selectable Widget. How can I programmatically trigger the stop event?

Ex Selectable:

$("table").selectable({
  filter: "tr",
  stop: function(){
    //do stuff
  }
});

// Various attempts at triggering the stop event
// one
$("table .ui-selected").click();

// two
$("table .ui-selected").select();

// three
$("table .ui-selected").trigger("click");

// shot in the dark 1
$("table").selectable('widget').trigger('stop');

// Shot in the dark 2
$("table").trigger('stop');

// really long shot in the dark
$("table").selectable('widget').call('stop');

Further Attempts

// selectablestop event

$("#table").selectable('widget').trigger('selectablestop');

$("#table .ui-selected").trigger('selectablestop');

i'm trying to trigger the jquery ui selection event. I have this widget in some tabs and I need to be able to re-trigger the selection event upon showing the tab. — Derek Adair
– Derek Adair, Commented Apr 4, 2011 at 16:45
@ neal - I am. I am asking how to programmatically trigger this callback — Derek Adair
– Derek Adair, Commented Apr 4, 2011 at 16:48

Mark Coleman · Accepted Answer · 2011-04-04 17:11:52Z

12

If you want to trigger the event outside of the control you can simply call .trigger(). This assumes you are using the .bind() and not the anonymous stop:function() in options.

$("#selectable").selectable({});
$("#selectable").bind("selectablestop", function(event) {
    $("body").append("<h1>did selectablestop</h1>");
});
$(":button").click(function() {
    $('#selectable').trigger('selectablestop');
});

Code example on jsfiddle.

Edit

Another way would be to retrieve the stop: option value (which would be the function)

var s = $('#selectable').selectable( "option" , "stop"); 
s(); //call the function.

Code example on jsfiddle.

edited Apr 4, 2011 at 17:11

answered Apr 4, 2011 at 16:52

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

2 Comments

Derek Adair Over a year ago

right, as shown in my example i'm using the stop callback. How do i trigger this event programatically? EX: $( '.selector' ).trigger('selectablestop');

Derek Adair Over a year ago

hmmm. it CAN be done! thx much must be something wrong w/ my code.

Community · Accepted Answer · 2017-05-23 11:45:49Z

4

I ended up doing this, found at How to programmatically select selectables with jQuery UI?

 $('#selectable').data("selectable")._mouseStop(null);

This will trigger the mouse stop event and execute the binded stop function on the selectable. If there's a way to trigger the stop in a more elegant way, I would love to see.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Sep 27, 2011 at 22:48

Geert

411 bronze badge

1 Comment

Jorge Nunez Newton Over a year ago

Hope this help new questions: For later versions of the jQuery UI library, we should use .data("ui-selectable") instead of .data("selectable")

Collectives™ on Stack Overflow

Trigger jQuery UI events: ui-selectable

EDIT:

Ex Selectable:

Further Attempts

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

Ex Selectable:

Further Attempts

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related