Jquery widget callback. Getting a function to fire

Question

I added a callback to a jquery widget. It will output data in the console but how do I get it to apply something to the data in the page?

Example...

in my widget options I have made the following available to receive input:

 complete        : ''

and have added a method to the widget as well:

_complete : function(data) {
        if(this.options.complete) {
            console.log(data);
        }
    }

In another method of the widget I make an ajax call and then call use this _complete method to fire after the ajax has finished like:

self._complete(self.options.complete);

So if, when I use the widget, I pass something to the complete option like so:

complete : function(){$('.gridrow').css('background-color','#FFF');}

I will see this output in the console as:

function(){$('.gridrow').css('background-color','#FFF');}

But what I really want is to actually apply that to the code, so that it changes the gridrow classes background color.

I can pass in whatever and get it output in the console but how to I actually apply it to the page?

Answer 1

I am not sure why you need to pass in the complete function to your _complete function, surely you can just test for it and then execute it. The key change is that you must invoke the complete function using ():

_complete : function() {
        if (this.options.complete) {
            this.options.complete(); // execute the input function
        }
    }

If you wish to log the result of that function to the console then ensure that complete returns a value:

complete : function() { return $('.gridrow').css('background-color','#FFF'); }

Then:

_complete : function() {
        if (this.options.complete) {
            console.log(this.options.complete()); // print the result
        }
    }