Question

I’ve reduced this example to the bare minimum code.
I’m focusing on the ‘this’ keyword.

Here’s how I call my Ajax plugin:

settings.context = this;
myXHR = $(this).myAjax('myComponent.cfc',settings);

What I’d like to do is use $(this) for the context so that the calling routine doesn’t have to set
settings.context = this;

Here’s what I’ve got so far, but I know I’m doing it wrong:

!function($, window, document, undefined) {
    $.fn.myAjax.myOptions = {
        type: 'POST',
        dataType: 'json'
    }
    $.fn.myAjax = function(myURL, mySettings) {
        var local = {};
        local.settings = $.extend({}, $.fn.myOptions, mySettings);
        local.settings.context = this;
        local.XHR = $.ajax(myURL,local.settings)
        return local.XHR;
    };
}(jQuery, window, document);

Answer 1

!function($, window, undefined) {
    var document = window.document;
    $('#msg').ajaxStart(function() {
      $(this).empty().removeClass('alert alert-info');
    });
    var Variables = {};
    Variables.settings = {
        type: 'post',
        dataType: 'json',
        async:false
    };
    $.fn.myAjax = function(myURL, mySettings) {
        var local = {};

        mySettings = $.extend({}, Variables.settings, {context:this[0]}, mySettings);
        local.$xhr = $.ajax(myURL,mySettings); // myURL += '?returnFormat=json&queryFormat=column'
        local.$xhr.done(function(result) {
            if (result.MSG) {
                $('#msg').html(result.MSG).addClass('alert alert-error');
            }
        });
        local.$xhr.fail(function(jqXHR, textStatus, errorThrown) {
            $('#msg').html(textStatus + ': ' + errorThrown).addClass('alert alert-error');
        });
        return local.$xhr; // return this.each()
    };
}(jQuery, window);