In JavaScript is it possible to add to a callback function instead of overwriting it?

Question

I don't know if I'm saying this right, so I'll just ask by explaining with an example.

Let's say I've written a jQuery plugin with an onShowEdit callback.

I later use my plugin and add a bunch of other default functions/methods to the event:

$('.editable_module:not(.custom)').editable({
   onShowEdit: function(el){
      initRequired();
      $(':radio, :checkbox', el).prettyCheckboxes();
      initDatePickers();
      initChosen();
      initMaskedInputs();
      $('.dynamic_box.tabs').dynamicBoxTabs();
      $('.trigger_dynamic_box').triggerDynamicBox('true');
   }
});

So now I have a basic/default element (.editable_module) that calls the plugin and has some methods/functions that are going to be used in all instances.

My question comes when I have a need to add something to this for a 'one time' kind of deal (I need to add some behavior to this callback/event but not something that is used normally). Is it possible to extend or add to this callback/event without overwriting it? I mean, I know I can go in and do this:

$('#new_selector').editable({
   onShowEdit: function(el){
      initRequired();
      $(':radio, :checkbox', el).prettyCheckboxes();
      initDatePickers();
      initChosen();
      initMaskedInputs();
      $('.dynamic_box.tabs').dynamicBoxTabs();
      $('.trigger_dynamic_box').triggerDynamicBox('true');

      //ADD SOME NEW STUFF HERE
   }
});

But is that really my only option?

Thanks in advance for any input/suggestions.

You can create a event-based plugin system, to allow multiple "callbacks" to be run (and/or removed). — Rob W
– Rob W, Commented Jan 13, 2012 at 20:36
So, something like 'onShowEdit' and `onShowEdit2' (probably a better name, haha). Where both are called at the same time? — jarodtaylor
– jarodtaylor, Commented Jan 13, 2012 at 20:40
As shown in pimvdbs answer. You can also namespace events, so to distinguish the events. — Rob W
– Rob W, Commented Jan 13, 2012 at 20:42

pimvdb · Accepted Answer · 2012-01-13 20:40:42Z

3

You could consider jQuery's own event system as follows: http://jsfiddle.net/VQqXM/1/. You can integrate this in your $.fn function pretty easily - just pass the appropriate function as property of the object instead of a function literal.

$("input").on("foo", function() {
    alert(1);
});

// later

$("input").on("foo", function() {
    alert(2);
});

// later

$("input").trigger("foo"); // alerts 1 and 2

You can simply use .on/.off to bind and unbind events, and trigger them all with .trigger. jQuery also supports namespacing of the event names to make sure you're not using an already used event.

answered Jan 13, 2012 at 20:40

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

1 Comment

jarodtaylor Over a year ago

This was the route I was thinking was plausible. Thanks!

user400654 · Accepted Answer · 2012-01-13 20:45:33Z

3

You could use the new $.Callbacks() method

var $onShowEditCBObj = $.Callbacks();
function onShowEditHandler() {
  $onShowEditCBObj.fire();
}
$('#new_selector').editable({
   onShowEdit: onShowEditHandler
});
// add default event to callbacks obj
$onShowEditCBObj.add(function(){
  initRequired();
  $(':radio, :checkbox', el).prettyCheckboxes();
  initDatePickers();
  initChosen();
  initMaskedInputs();
  $('.dynamic_box.tabs').dynamicBoxTabs();
  $('.trigger_dynamic_box').triggerDynamicBox('true');
});
// add a one time method to the callbacks obj
function oneTimeEvent () {
  alert("worky");
  $onShowEditCBObj.remove(oneTimeEvent);
}
$onShowEditCBObj.add(oneTimeEvent)

With this setup, you can change what callbacks will be fired without having to do anything extra to the editable plugin.

Edit: I didn't realize that you wrote the plugin. With that in mind, pimvdb's answer is more robust than requiring the developer to code a certain way.

answered Jan 13, 2012 at 20:45

user400654

95.1k16 gold badges168 silver badges188 bronze badges

1 Comment

jarodtaylor Over a year ago

Well I've actually been curious about this on a number of occasions, including some where I didn't write the plugin, so I this is still really helpful! Thanks.

Beetroot-Beetroot · Accepted Answer · 2012-01-13 20:44:16Z

0

If I understand the question correctly, the key word here is "factory".

jQuery is itself a factory but to get what you describe, you need your plugin also to be a factory within the factory. That requires the plugin to be written in a certain way.

Probably the easiest approach is to use jQuery's UI widget factory. Read about it here.

answered Jan 13, 2012 at 20:44

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

Comments

S.Walker · Accepted Answer · 2012-01-13 20:56:41Z

0

Defining a separate function for onShowEdit should work.

var myOnShowEdit = function(el, extra_fn) {
    //standard functionality goes here
    if (typeof extra_fn==='function') extra_fn(); //support for extra stuff
}
$('.editable_module:not(.custom)').editable({
    onShowEdit: function(el) {
        myOnShowEdit(el);
    }
});
$('#new_selector').editable({
    onShowEdit: function(el) {
        myOnShowEdit(el, function(){console.log('hi');});
    }
});

This will give you fair flexibility to add whatever functionality you need in addition to the standard stuff. Just be aware of how this may shift contexts.

answered Jan 13, 2012 at 20:56

S.Walker

1651 silver badge10 bronze badges

Collectives™ on Stack Overflow

In JavaScript is it possible to add to a callback function instead of overwriting it?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related