Simple JQuery AJAX Wrapper

Here is a simple way to create a helper function to wrap an JQuery.ajax method using an options object to override settings. I also included a wrapper to setup a JQuery UI confirmation dialog box in the Common JQueryHelper namespace.

FrozenBytesCore.Common.JQueryHelper 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// Namespaces
if (typeof FrozenBytesCore == "undefined" || !FrozenBytesCore) {
  window.FrozenBytesCore = { name: 'Frozen Bytes Core', version: '0.1.0.0' };
};

if (typeof FrozenBytesCore.Common == "undefined" || !FrozenBytesCore.Common) {
  FrozenBytesCore.Common = { name: 'Frozen Bytes Core Common', version: '0.1.0.0' };
};

(function($) {

  FrozenBytesCore.Common.JQueryHelper = {

      // Make a JQuery.ajax call to a web method defined in options.url
      //
      // Example:
      // var options = {async: false, url: 'someurl', data: {mydata: 'string'} };
      // var request = webMethod(options);
      //
      webMethod: function(customOptions) {
          var defaultOptions = { type: 'POST', async: true, cache: true, timeout: 1000, url: '../Services/CxJsonHandler.ashx', data: {} };
          var options = $.extend({}, defaultOptions, customOptions);

          var request = $.ajax({
              type: options.type,
              async: options.async,
              cache: options.cache,
              timeout: options.timeout,
              url: options.url,
              data: options.data,
              contentType: "application/json; charset=utf-8",
              dataType: "json"

          });

          request.fail(function(jqXHR, msg) {
              var err = $.parseJSON(jqXHR.responseText);
              alert("Error: " + err.Message);
          });

          return request;
      },

      customConfirm: function(dialogId, okFunc, cancelFunc, dialogTitle, dialogMessageTemplate) {
          $(dialogId).dialog({
              draggable: false,
              modal: true,
              autoOpen: false,
              resizable: false,
              autoOpen: false,
              width: 300,
              title: dialogTitle || 'Confirm',
              buttons: {
                  OK: function() {
                      if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); }
                      $(this).dialog("close");
                  },
                  Cancel: function() {
                      if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); }
                      $(this).dialog("close");
                  }
              }
          });

          // Set the HTML
          $(dialogId).html(dialogMessageTemplate);
      }

  }    // End FrozenBytesCore.Common.JQueryHelper namespace

})(jQuery);

Here is a quick example of how you might levarge the wrapper. Given a web service, CxServices.asmx calling GetMessages web method passing in a psUserId parameter get back a array of JxMessage JSON objects.

Example Caller 
1
2
3
4
5
6
7
8

var options =
{ async: false, url: '../Services/CxServices.asmx/GetMessages', data: "{'psUserId': '" + userId + "'}" };

FrozenBytesCore.Common.JQueryHelper.webMethod(options).then(function(data) {
  var messages = $.parseJSON(data.d);
  alert(messages);
  // ... do  logic
}
CxServices Web Service 
1
2
3
4
5
6
7
8
9
10

[WebMethod(true)]
public string GetMessages(string psUserId)
{
  List<JxMessage> messages = new List<JxMessage>();

  // .... do some logic like get the message list

  // Send it back as JSON
  return CxJSONHelper.Serialize(messages);
}

Comments