Passing a function in Jquery / Javascript

Question

Good afternoon people's

I have built a jquery plugin that I use on my site. The plugin is for suggestive input boxes and works fine.

One thing I need to add to it is the ability to pass a function in it's config to apply to the response of the ajax call that is made for the suggestive. I can't find anything on trusty old google about how to pass functions and have them applied in the scope of the plugin..

I need this because some responses update one field and some update 2 or more fields with different text held in the reponse and I dont want to keep duplicating the plugin allowing for this to happen. I am assuming that the javascript method "apply" is what I need to look at but I am totally confused

Does this even make sense on what I am trying to do ? and if so can anyone help or point me in the right direction.

Thanks in advance

Alex

Something like this: http://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript ? — kamasheto, Sep 21 '10 at 14:23
Don't know about the answer, but would suggest use of the word predictive rather than suggestive. Suggestive input boxes might be taken to be a bit lewd... :) — Paddy, Sep 21 '10 at 14:24
glad I could help. Make sure you use the search feature before asking in the future :) — kamasheto, Sep 21 '10 at 15:45

jwueller · Accepted Answer · 2010-09-21T14:39:49.057

2

You are looking for .call() or .apply(). You can pass the context (i.e. scope) as the first parameter to both. .call() works like this:

yourCallback.call(this, param1, param2);

While .apply() works like this:

yourCallback.apply(this, [param1, param2]);

.apply() is very helpful when generating the parameters dynamically.

edited Sep 21 '10 at 14:39

answered Sep 21 '10 at 14:25

jwueller

30,582
4
66
70

score 1 · Answer 2 · answered Sep 21 '10 at 14:25

1

I would recommend you take advantage of the wonderful work being done by the jQuery UI team. The API is very well thought out and should give you everything you need.

http://docs.jquery.com/UI/Autocomplete

answered Sep 21 '10 at 14:25

ChaosPandion

77,506
18
119
157

@ paddy .. who cares about my naming conventions - only I have to use them - thanks for the input anyway ;) – Alex Sep 21 '10 at 14:32
Chaos... I find the jQuery UI to be very bloated for what I need, I have created a better performing function that can scale very well in 15 lines as opposed to thier large alternative. Including even just one of thier plugins takes my page speed score from 98/100 to 86 not to mention the time it takes on page load with all the different CSS & JS needed. Thanks for the input though – Alex Sep 21 '10 at 14:33
@Alex - No problem, jQuery UI doesn't fit every problem scope. – ChaosPandion Sep 21 '10 at 14:34

score 1 · Answer 3 · answered Sep 21 '10 at 14:51

Javascript has closures. If you define a function like this:

{
   var a;

   function myFn() {
      b = a; // a is set
   }

   $('.c').autocomplete({callback: myFn});
   ...

This is usually sufficient to handle this case. In your set up code, include references to whatever you need as local variables, and they will exist even though the function itself goes out of context. This is a little weird to people not used to it, but powerful and useful.

Some plugins provide "context" variables you can set, and will be returned to you explicitly in your callback. Check the docs to see if those exist.

Finally, you can use apply to change the this that your function is called with. Functions in Javascript are (in general) standalone entities, and a single function can be called with this set to any sort of value. In the callback case, sometimes it's necessary to wrap a given callback and calls it in the right context. This looks like myFn.apply(newThis, params). You're actually caling the apply function on the function object, and providing it its context and parameters.

Hope this helps.

Thanks for al guys ... @ maskr answered it but I can;t mark his comment as that it answers the problem so "elusive" will get the poitns! — Alex, Sep 21 '10 at 15:06

Passing a function in Jquery / Javascript

3 Answers3