Jquery optionally add callbacks

Question

I am trying to write a reusable Jquery form function. I need it to optionally assign callback functions depending on if the function is defined on the page or not.

Is this example I use the Success but would be done for all.

On Main JS File:

function gJs_AjaxCustomSubmit(ObjectContext) {

    var AS='';
    if (typeof AjaxSuccess == 'function') { AS = 'AjaxSuccess' }

    $('#frm').ajaxSubmit({

        success: AS, //callback functions

    });
}

On the page, if AjaxSuccess function exists, then it would execute on the success callback. If it does not exist, there would be no error.

On normal pages:

function AjaxSuccess(response) {
    alert(response);
}

I want to be able to define all the functions on my global JS like this, and then if needed I can just add the actual function to my pages and they will run.

function gJs_AjaxCustomSubmit(ObjectContext) {
    var AStart='';
    if (typeof AjaxStart == 'function') { AS = 'AjaxStart' }
    var ASuccess='';
    if (typeof AjaxSuccess == 'function') { AS = 'AjaxSuccess' }
    var ABSend='';
    if (typeof AjaxBeforeSend== 'function') { AS = 'AjaxBeforeSend' }
    var AComplete='';
    if (typeof AjaxComplete== 'function') { AS = 'AjaxSuccess' }
    var ASt='';
    if (typeof AjaxStop== 'function') { AS = 'AjaxStop' }
    var AError='';
    if (typeof AjaxError== 'function') { AS = 'AjaxError' }

    $('#frm').attr("action", $(ObjectContext).data('path'));
    $('#frm').ajaxSubmit({
        dataType: 'html',

        start: AStart, //callback functions
        send: ABSend, //callback functions
        complete: AComplete, //callback functions
        stop: AjaxStop,
        success: ASuccess, //callback functions
        error: AError, //callback functions
    });
}

Can you be a bit more specific as you what `gJs_AjaxCustomSubmit` does/should do? How and where is the success callback called? — , Jan 25 '16 at 15:37
Maybe you wanted to write `var AS = null;` and `if (typeof AjaxSuccess == 'function') { AS = AjaxSuccess }`? — Tasos K., Jan 25 '16 at 15:38
http://stackoverflow.com/questions/6792663/javascript-style-optional-callbacks and http://stackoverflow.com/questions/12191722/javascript-optional-callback — Mohamed-Yousef, Jan 25 '16 at 15:41
Just try `AS = AjaxSuccess` instead of `AS = 'AjaxSuccess'`. After all, you want to call a function and not a string. — Sebastian Simon, Jan 25 '16 at 15:42
I don't think this is a good way to handle that - why not just handle the callback as a function argument? `function gJs_AjaxCustomSubmit(ObjectContext, Callback) { ... $('#frm').ajaxSubmit({ success: callback });` — Alexander Kludt, Jan 25 '16 at 15:45
There's no reason to not just omit the if statement and use `success: AjaxSuccess`. If it's defined, it'l pass a function to `success:`, if it's not it wont. You're overcomplicating it. — Kevin B, Jan 25 '16 at 15:57
Where is such error occurring? Are you sure it isn't happening because ajaxSubmit requires a callback? This is clearly an X/Y problem. — Kevin B, Jan 25 '16 at 15:58

Alexandru Severin · Answer 1 · 2016-01-25T16:18:09.597

Here is a clean reusable function that returns either desired function(if it exists) or an empty function if it doesn't.

$('#frm').ajaxSubmit({
    start: getFunction('AStart'), 
    send: getFunction('ABSend'),
    complete: getFunction('AComplete'),
    //... //callback functions
});

function getFunction(name){
    if (typeof window[name] == 'function'){
           return window[name];
    }
    return function(){};  // or null/false
}

If the function passed as parameter by name does not exist, an empty callback will be returned, which will do nothing and not throw any errors.

score -3 · Answer 2 · answered Jan 25 '16 at 16:07

I ended up using this.

    function gJs_AjaxCustomSubmit(ObjectContext) {
        //Add function to your page if needed
        //AjaxStart
        //AjaxBeforeSend
        //AjaxComplete
        //AjaxSuccess
        //AjaxStop
        //AjaxError

    var DataType = 'html', AStart = '', ASuccess = '', ABSend = '', AComplete = '', AStop = '', AError = '';
    if ($(ObjectContext).data('type')) {
        DataType = $(ObjectContext).data('type');
    }
    if (typeof AjaxStart == 'function') { AStart = AjaxStart }
    if (typeof AjaxBeforeSend == 'function') { ABSend = AjaxBeforeSend }
    if (typeof AjaxComplete == 'function') { AComplete = AjaxComplete }
    if (typeof AjaxSuccess == 'function') { ASuccess = AjaxSuccess }
    if (typeof AjaxStop == 'function') { AStop = AjaxStop }
    if (typeof AjaxError == 'function') { AError = AjaxError }

    $('#frm').attr("action", $(ObjectContext).data('path'));
    $('#frm').ajaxSubmit({
        dataType: 'html',
        start: AStart, //callback functions
        send: ABSend, //callback functions
        complete: AComplete, //callback functions
        stop: AStop,
        success: ASuccess, //callback functions
        error: AError, //callback functions
    });
}

Jquery optionally add callbacks

2 Answers2