Benjii Me

Web and Windows Phone 7 by Ben Cull

jQax jQuery plugin – The jQuery plugin version of the jQax ajax wrapper

Posted on August 18th, 2010 by Benjii

Upgraded by popular demand, the jQax ajax wrapper has been turned into a full fledged jQuery plugin, conforming to the plugin authoring guidelines and compatible with compression.

Rain sweet code down on me:

Below is the full code as of writing, if you’re interested in helping out, the source can also be found here on github

// jquery.jqax.js - A plugin for jQuery ajax wrapping some common 
//                  functionality aimed at .NET services and page methods
// Ben Cull - 18 August 2010

(function($) {
    $.jQax = function(options) {

        // Load Defaults and make them public
        this.defaults = {
            ShowLoading: true,
            LoaderContainerId: "#divLoader",
            LoaderText: "Loading...",
            ErrorCallBack: function(XMLHttpRequest, textStatus, errorThrown) {
                var response = eval("(" + XMLHttpRequest.responseText + ")");
                var output = "Message: " + response.Message + "\n\n";
                output += "StackTrace: " + response.StackTrace;
                alert(output);
            }
        };

        // Extend defaults into options
        var o = $.extend({}, this.defaults, options);

        this.Get = function(WebService, GetData, SuccessCallBack, ShowLoading, LoaderText, ErrorCallback) {

            if (ShowLoading != null ? ShowLoading : o.ShowLoading)
                ShowLoader(LoaderText != null ? LoaderText : o.LoaderText);

            if (WebService == "")
                return 1; // Incorrect Parameters

            if (ErrorCallback == null)
                ErrorCallback = o.ErrorCallBack;

            if (GetData != null && typeof (GetData) === "object")
                GetData = $.param(GetData);

            $.ajax({
                type: "GET",
                url: WebService,
                data: GetData,
                success: SuccessCallBack,
                error: ErrorCallback
            });

            return 0; // Successful
        };

        this.Post = function(WebService, JsonData, SuccessCallBack, ShowLoading, LoaderText, ErrorCallback) {

            if (ShowLoading != null ? ShowLoading : o.ShowLoading)
                ShowLoader(LoaderText != null ? LoaderText : o.LoaderText);

            if (WebService == "")
                return 1; // Incorrect Parameters

            if (ErrorCallback == null)
                ErrorCallback = o.ErrorCallBack;

            if (typeof (JsonData) === "object")
                JsonData = JSON.stringify(JsonData);

            $.ajax({
                type: "POST",
                url: WebService,
                data: JsonData,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: SuccessCallBack,
                error: ErrorCallback
            });

            return 0; // Successful
        };

        function ShowLoader(LoaderText) {
            $(o.LoaderContainerId).text(LoaderText);
            $(o.LoaderContainerId).fadeIn("fast");
        };

        $(document).ready(function() {

            $(o.LoaderContainerId).ajaxStop(function() {
                $(this).stop(true, true).fadeOut("fast");
            });

        });

        return this;
    };
})(jQuery);
view raw jquery.jqax.js This Gist brought to you by GitHub.

Show me the usage:

Once you’ve referenced the script in the head section you can use the code like so:

var x = $.jQax({
    LoaderContainerId: "#divMyLoadingDiv",
    LoaderText: "I'm loading, wait up..."
});

Now you can perform the following function anywhere you need within scope of the above declaration:

var data = {
    myTrackRecord: "52 Seconds",
    activity: "go karts"
};
x.Post("MyWebService.asmx/Record", data, function (data, eventArgs) {
    var result = $.parseJSON(data.d); // Please note: You may not need ".d"
    // Do stuff here
});

The original non-plugin version of my code can be found in my previous post:

jQax – A Simple jQuery Ajax Wrapper with Loading Notification

2 Responses to “jQax jQuery plugin – The jQuery plugin version of the jQax ajax wrapper”

Leave a Response