own callback in jQuery, can't call secound callback function

Question

I have created a plugin to jQuery and now i have found a problem in this plugin, when i use its to times or more, my callback function everytime only use the last callback function, all my ajax calls working as its shut do and thats perfect.

now i got problems when i want to call a success callback function or error callback function.

(function ( $ ) {
var setSettings = function(options,attrId) {
    var settings = $.extend({
        dataType: 'json',
        timeout: 600,
        alertToolbar: true,
        alertId : attrId,
        alertClass : 'dialogToolbar',
        callback_error : null,
        callback_success : null
    }, options );

    return settings;
}

var getToolbar = function(header, content, mode) {
    if ( mode == 'error' )
    {
        $( document.createElement('div') )
        .addClass('alertTopNav alertTopNav-error')
        .append(
            $( document.createElement('div') )
            .append(
                $( document.createElement('strong') )
                .html( header )
            )
            .append(
                $( document.createElement('br') )
            )
            .append( content )
        )
        .appendTo('#'+ settings.alertId )
        .slideDown()
        .delay(3000)
        .slideUp(800, function()
        {
            $(this).remove();
        });
    }
    else if ( mode == 'success' )
    {
        $( document.createElement('div') )
        .addClass('alertTopNav alertTopNav-success')
        .append(
            $( document.createElement('div') )
            .append(
                $( document.createElement('strong') )
                .html( header )
            )
            .append(
                $( document.createElement('br') )
            )
            .append( content )
        )
        .appendTo('#'+ settings.alertId )
        .slideDown()
        .delay(3000)
        .slideUp(800, function()
        {
            $(this).remove();
        });
    }
}
var functionId = 0;

$.fn.ajax_callback = function(call_url, call_data_array,call_settings) {
    settings = setSettings(call_settings,$(this).attr('id'));

    if (!$(this).hasClass("dialogToolbar")) {
        $(this).addClass('dialogToolbar');
    }

    $.ajax({
        type: 'POST',
        url: call_url,
        crossDomain: true,
        xhrFields: {withCredentials: true},
        data: call_data_array,
        dataType: settings.dataType,
        timeout: settings.timeout,
        beforeSend: function(data) {
            // do somthing before sending
        },
        success: function(data) {
            if(data.status==200) {
                if ( settings.callback_success != null ) {
                    settings.callback_success(data);
                }

                if (settings.alertToolbar == true ) {
                    getToolbar(data.success.header,data.success.msg,'success');
                }
            } else {

                if(settings.callback_error != null) {
                    settings.callback_error(data);
                }

                if (settings.alertToolbar == true ) {
                    getToolbar(data.error.header,data.error.msg,'error');
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // do somthing on error
        }
    });
}

}( jQuery ));

i use this code to call this plugin:

$('#dialogToolbar').ajax_callback('json-path-1',{
    'parms' : 'value'
}, {
    alertToolbar: false,
    callback_success: $.testObj.callback.getAll.success,
    callback_error: $.testObj.callback.getAll.error
});

and if i use this one more time but change the success and error callback and the json path ofc.

$('#dialogToolbar').ajax_callback('json-path-2',{
    'parms' : 'value'
}, {
    alertToolbar: false,
    callback_success: $.testObj.callback.getAllSecound.success,
    callback_error: $.testObj.callback.getAllSecound.error
});

its only the success and error callback from the secound function will take a effect, so now i have trying to debug my code but can't find eny god explain on why this happen.

hope there are one out here there can explain me whats going worng and why my plugin not working as its shut be.

Answer 1

You have create the settings as a global variable in the plugin, so every call to the plugin will override it.

var settings = setSettings(call_settings,$(this).attr('id'));

Instead you need to have a local reference to the current settings object, so create the variable as local to the function as given above.

Also you will have to pass the setting reference to getToolbar

var getToolbar = function(settings, header, content, mode) {
}
.....
getToolbar(settings, data.success.header,data.success.msg,'success');