CODEWITHSUNDEEP
jquery
Chris
Chris

Reputation: 3139

Function is undefined when passed to plugin

I wrote a plugin to do some validation, and am passing a function in the plugin's options, but the function that I am passing is coming in as undefined and I am not sure why

in the document ready I have the plugin being called

$('#btnSaveBlade').on('click', function () {
    $('#BladeInputs').AW_Validation({
        container: '#BladeInputs',
        attribute: 'aw-is-required',
        complete: SaveNewClient("Client")
    });
});

Here is part of the plugin

$.fn.AW_Validation = function (options) {
    var settings = $.extend({
        container: null,
        attribute: null,
        //complete: null, // Callback function on successful completion <- didn't work
        complete: function(){},// Callback function on successful completion <- doesn't work either
        summary: null,
        notification: null
    }, options);
    ...
}

I am not sure what I am going wrong or what is wrong with this

Upvotes: 1

Views: 40

Answers (1)

JSelser
JSelser

Reputation: 3630

When you pass SaveNewClient(...) to the plugin you are actually calling it, since it probably returns undefined thats what you get

Try changing:

$('#BladeInputs').AW_Validation({
    container: '#BladeInputs',
    attribute: 'aw-is-required',
    complete: SaveNewClient("Client")
});

For

$('#BladeInputs').AW_Validation({
    container: '#BladeInputs',
    attribute: 'aw-is-required',
    complete: function(){ SaveNewClient("Client"); }
});

Or Better yet

$('#BladeInputs').AW_Validation({
    container: '#BladeInputs',
    attribute: 'aw-is-required',
    complete: SaveNewClient.bind(null, "Client")
});

EDIT: Further explanation

Expressions are evaluated from inside out, just as if you ran {a: 1 + 1} then 1 + 1 would be evaluated first, resulting in {a: 2}

The same would happen with a function like the following:

function onePlusOne() { return 1 + 1; }

Lets look at the following example:

$.yourPlugin(
       $.extend({ a: onePlusOne() }, { b: 2}))

Then onePlusOne() would run first evaluating to 2, then $.extend({ a: onePlusOne() }, { b: 2}) is evaluated to {a: 2, b: 2} which is what $.yourPlugin() recieves

Now imagine onePlusOne() didn't return a value, in that case javascript would return undefined and thats what your complete ended up being passed

Upvotes: 1

Related Questions