Response title
This is preview!
Move this topic
How can I attach two different callbacks to one jQuery UI widget?
Answered
- Need more info
- Working on it
- Answered
in Developing jQuery UI
•
6 years ago
With custom jQuery Ui widget, you can attach your own callback functions to it by passing options to the plugin. However, if I want to attach one callback to "generate_img" event and later on another different but not mutually exclusive behaviour to the same widget event "generate_img", the later one will replace, instead of adding to the existing behaviour.
Is there a way to solve this problem? Thanks.
1
Replies(12)
The callbacks are just sugar on top of the events. The events are the real thing, use those instead. If your widget is named foo and the callback is named bar, then the event you want to listen for is foobar.
Leave a comment on scott.gonzalez's reply
Thank you very much for pointing out a direction. As a newbie I'd highly appreciate a step-by-step tutorial or example, or a link that gives more details? If possible. Thanks a lot!
Leave a comment on Jinghui Niu's reply
See the documentation for the official jQuery UI widgets, for example the activate event on the Tabs widget:
Bind an event listener to the tabsactivate event:
$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );
And in the Widget Factory documentation under Events:
Events
All widgets have events associated with their various behaviors to notify you when the state is changing. For most widgets, when the events are triggered, the names are prefixed with the widget name and lowercased. For example, we can bind to progressbar's
changeevent which is triggered whenever the value changes.
$( "#elem" ).bind( "progressbarchange", function() {alert( "The value has changed!" );});
Leave a comment on kbwood.au's reply
Thanks for pointing out the documentation regarding events.
Is there a section dedicated to callbacks? specifically, more than one callbacks on a single event? Thanks.
Leave a comment on Jinghui Niu's reply
You can register as many callbacks as you want for a given event. The callbacks are called in the order bound. It's documented here:
(Event handlers bound to an element are called in the same order that they were bound.)
Leave a comment on watusiware's reply
Dear watusiware,
I believe you have mistaken binding callbacks to events, which is what your link is, with binding callbacks to a jQuery widget options. For the latter, you can only bind one callback function, the more you bind, the earlier will be replaced with the latest.
I appreciate your kind reply though. Thank you.
Leave a comment on Jinghui Niu's reply
As you know, passing in callbacks is limited to a single callback.
If the widget triggers an event, in addition to the callback or instead of the callback, you can have very many functions waiting for that event.
JΛ̊KE
Leave a comment on jakecigar's reply
Do you think learning Promise will help in this regard? I should admit first that I know almost nothing about Promise right now, just wondering if I pass a Promise object instead of a callback function to the widget's options, it would allow more than one behaviour on a single event? Any thoughts?
Leave a comment on Jinghui Niu's reply
Promises are cool, $.ajax returns a jQuery promise ($.Deferred). I use native the javaScript Promise all the time.
In a widget you should trigger custom events. It’s the way most of them do it.
In a widget you should trigger custom events. It’s the way most of them do it.
You should not return a promise in a widget, you should normally keep the chain going by returning this.
JΛ̊KE
Leave a comment on jakecigar's reply
Few people use options to pass callbacks to widgets. It is better to bind to custom events using jQuery code.
However, passing callbacks in options is part of the Widget Factory specification, and widgets need to allow it to be compliant with the standard.
Leave a comment on watusiware's reply
Thanks! Indeed I do find options' callback feature a little awkward, but as a beginner I thought it was my problem. Now I finally have a pro to point me out an alternative and tell me that few people go this route. Thank you very much!
Leave a comment on Jinghui Niu's reply
The best way to use events is to trigger a custom event with extra parameters…
.trigger() | jQuery API Documentation
.trigger() | jQuery API Documentation
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Jinghui Niu's question
{"z2656090":[14737000007183119],"z2953500":[14737000007183153],"z7664639":[14737000007185193,14737000007185203],"z643323813":[14737000007184092,14737000007184105,14737000007185189,14737000007185195,14737000007185199,14737000007185205],"z2950240":[14737000007183307,14737000007183313,14737000007183317]}
Statistics
- 12 Replies
- 11657 Views
- 1 Followers