jQuery Ajax before beforeSend

Question

I am trying to add some custom code to jQuery's beforeSend. To do so I came up with this code :

(function( $ ){
    $.ajax_overlay = function(settings, overlay_selector, target_selector, class_active, class_deactive) {
        var $overlay = $(overlay_selector);
        function overlay_before(user_beforesend){
            if ( target_selector === undefined )
            {
                var $body = $('body');
                $overlay.height($body.height()).width($body.width()).css("position","absolute");
            }
            else{
                var $target= $(target_selector);
                $overlay.height($target.height()).width($target.width()).css("position","absolute");
                $target.css("position","relative").append($overlay);
            }

            if (typeof(class_active) == "string"){
                $overlay.addClass(class_active)
            }
            if (typeof(class_deactive) == "string") {
                $overlay.removeClass(class_deactive)
            }
            $overlay.css("display","block").animate(
                {
                    opacity: 0.8
                },
                500);
            if (typeof(user_beforesend) == "function"){
                user_beforesend();
            }
        }
        function overlay_complete(user_complete){
            if (typeof(class_active) == "string"){
                $overlay.removeClass(class_active);
            }
            if (typeof(class_deactive) == "string") {
                $overlay.addClass(class_deactive);
            }
            $overlay.animate(
                {
                    opacity: 0.0
                },
                500, function(){
                    $overlay.css("display","none");
                });
            if (typeof(user_complete) == "function"){
                user_complete();
            }
        }
        if (typeof(overlay_selector) == "string"){
            settings["beforeSend"] = overlay_before(settings["beforeSend"]);
            settings["complete"] = overlay_complete(settings["complete"]);
        }
        return jQuery.ajax(settings);
    }
})( jQuery );

The main idea is to add an overlay on each ajax request using this plugin. The issue I am facing is that I can't keep the original behaviour of the beforeSend parameter as it expects an xhr and settings paramters.

How can I get a proper xhr to feed to my beforeSend function ?

EDIT:

Found some interesting links/answers related to this onee Adding code to a javascript function programmatically Overriding a JavaScript function while referencing the original

Answer 1

Having your overlay_before return a function with expected parameters, and propagate these parameters to the user_beforesend call, should do the trick :

function overlay_before(user_beforesend){
        return function(xhr, settings)
           {
            if ( target_selector === undefined )
            {
                var $body = $('body');
                $overlay.height($body.height()).width($body.width()).css("position","absolute");
            }
            else{
                var $target= $(target_selector);
                $overlay.height($target.height()).width($target.width()).css("position","absolute");
                $target.css("position","relative").append($overlay);
            }

            if (typeof(class_active) == "string"){
                $overlay.addClass(class_active)
            }
            if (typeof(class_deactive) == "string") {
                $overlay.removeClass(class_deactive)
            }
            $overlay.css("display","block").animate(
                {
                    opacity: 0.8
                },
                500);
            if (typeof(user_beforesend) == "function"){
                user_beforesend(xhr,settings);
            }
        }
      }

Answer 2

Have you tried var xhr = new XmlHttpRequest(); ? Or are you looking for something more/different?