title: Generic AJAX function callback is not working as expected
body: <p>I have created generic ajax function to work with REST API. </p>
  
  <p>I have written below code and it is working fine for at a time a single call. but if i make two different call then my success callback is overwrite with latest callback.</p>
  
  <pre><code>var ajax = {
      parameters: {
          url: '',
          dataType: 'json',
          data: {},
          contentType: 'application/json',
          loading: false,
          crossDomain: true,
          async: true,
          timeout: 30000,
          otherData: {}
      },
      callback: {
          success: null,
          error: null
      },
      get: function () {
          this.send('GET');
      },
      post: function () {
          this.send('POST');
      },
      del: function () {
          this.send('DELETE');
      },
      send: function (type) {
          self = this;
          if (!navigator.userAgent.match(/iPad|iPhone|iPod|android|blackberry|IEMobile/i)) {
              this.loadingIcon.show();
  
              if (this.isUndefined(this.parameters.dataType)) this.parameters.dataType = 'json';
              if (this.isUndefined(this.parameters.contentType)) this.parameters.contentType = 'application/json';
              if (this.isUndefined(this.parameters.loading)) this.parameters.loading = false;
              if (this.isUndefined(this.parameters.crossDomain)) this.parameters.crossDomain = true;
              if (this.isUndefined(this.parameters.async)) this.parameters.async = true;
              if (this.isUndefined(this.parameters.timeout)) this.parameters.timeout = 30000;
              if (this.isUndefined(this.callback.error)) this.callback.error = this.defaultError;
  
              return $.ajax({
                  type: type,
                  url: this.parameters.url,
                  dataType: this.parameters.dataType,
                  data: JSON.stringify(this.parameters.data),
                  contentType: this.parameters.contentType,
                  crossDomain: this.parameters.crossDomain,
                  async: this.parameters.async,
                  timeout: this.parameters.timeout,
                  success: function (data) {
                      var args = arguments[2];
                      if (!self.isUndefined(self.callback.success)) {
                          if (self.isUndefined(self.parameters.otherData))
                              self.callback.success.call(this, data, args.statusText, args);
                          else
                              self.callback.success.call(this, data, args.statusText, args, self.parameters.otherData);
                      }
                      self.loadingIcon.hide();
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      xhrServerObj = xhr;
                      self.callback.error.call(xhr, ajaxOptions, thrownError);
                      self.loadingIcon.hide();
                  }
              });
          }
      },
      isUndefined: function (param) {
          return (typeof param == 'undefined' || param == null);
      },
      defaultError: function (data, textStatus, jqXHR) {
      },
      loadingIcon: {
          show: function () {
              if (self.parameters.loading) {
                  console.log('Show loading....');
              }
          },
          hide: function () {
              if (self.parameters.loading) {
                  console.log('Hide loading....');
              }
          }
      }
  }
  </code></pre>
  
  <p>I am making ajax call using below</p>
  
  <pre><code>getAllStores(); 
  getAllCategory();
  
  function getAllStores() {
      var req = Object.create(ajax);
      req.parameters = { url: API + '/api/mobileapp/stores' };
      req.callback.success = successGetAllStores;
      req.get();
  }
  function successGetAllStores(data) {
      $.each(data, function (idx, d) {
          $("#StoreId").append($("&lt;option value='" + d.StoreId + "'&gt;" + d.StoreName + "&lt;/option&gt;"));
      });
  }
  
  function getAllCategory() {
      var req = Object.create(ajax);
      req.parameters = { url: API + '/api/mobileapp/categories' };
      req.callback.success = successGetAllCategory;
      req.get();
  }
  function successGetAllCategory(data) {
      $.each(data, function (idx, d) {
          $("#CategoryId").append($("&lt;option value='" + d.CategoryId + "'&gt;" + d.CategoryName + "&lt;/option&gt;"));
      });
  }
  </code></pre>
  
  <p>if i am calling at a time only one function <strong>getAllStores();</strong> then on its success call back i am again calling <strong>getAllCategory()</strong> then this is working. not overwriting existing callback function.</p>
  
  <p>Can you please help me how do i call multiple call using generic ajax call to handle individual callbacks.</p>
  
  <p>Moreover i have tried using below but still it is overwritten latest callback.</p>
  
  <pre><code>function MyAjax() {
      this.parameters = {
          url: '',
          dataType: 'json',
          data: {},
          contentType: 'application/json',
          loading: false,
          crossDomain: true,
          async: true,
          timeout: 30000,
          otherData: {}
      };
      this.callback = {
          success: null,
          error: null
      };
      this.get = function () {
          this.send('GET');
      };
      this.post = function () {
          this.send('POST');
      };
      this.del = function () {
          this.send('DELETE');
      };
      this.isUndefined = function (param) {
          return (typeof param == 'undefined' || param == null);
      };
      this.defaultError = function (data, textStatus, jqXHR) {
      };
      this.loadingIcon = {
          show: function () {
              if (self.parameters.loading) {
                  console.log('Show loading....');
              }
          },
          hide: function () {
              if (self.parameters.loading) {
                  console.log('Hide loading....');
              }
          }
      };
      this.send = function (type) {
          self = this;
          if (!navigator.userAgent.match(/iPad|iPhone|iPod|android|blackberry|IEMobile/i)) {
              this.loadingIcon.show();
  
              if (this.isUndefined(this.parameters.dataType)) this.parameters.dataType = 'json';
              if (this.isUndefined(this.parameters.contentType)) this.parameters.contentType = 'application/json';
              if (this.isUndefined(this.parameters.loading)) this.parameters.loading = false;
              if (this.isUndefined(this.parameters.crossDomain)) this.parameters.crossDomain = true;
              if (this.isUndefined(this.parameters.async)) this.parameters.async = true;
              if (this.isUndefined(this.parameters.timeout)) this.parameters.timeout = 30000;
              if (this.isUndefined(this.callback.error)) this.callback.error = this.defaultError;
  
              return $.ajax({
                  type: type,
                  url: this.parameters.url,
                  dataType: this.parameters.dataType,
                  data: JSON.stringify(this.parameters.data),
                  contentType: this.parameters.contentType,
                  crossDomain: this.parameters.crossDomain,
                  async: this.parameters.async,
                  timeout: this.parameters.timeout,
                  success: function (data) {
                      var args = arguments[2];
                      if (!self.isUndefined(self.callback.success)) {
                          if (self.isUndefined(self.parameters.otherData))
                              self.callback.success.call(this, data, args.statusText, args);
                          else
                              self.callback.success.call(this, data, args.statusText, args, self.parameters.otherData);
                      }
                      self.loadingIcon.hide();
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      xhrServerObj = xhr;
                      self.callback.error.call(xhr, ajaxOptions, thrownError);
                      self.loadingIcon.hide();
                  }
              });
          }
      }
  }
  </code></pre>
  
  <p>Calling using below </p>
  
  <pre><code>var aj1 = new MyAjax();
      aj1.parameters = { url: API + '/api/mobileapp/stores' };
      aj1.callback.success = successGetAllStores;
      aj1.get();
  
      var aj2 = new MyAjax();
      aj2.parameters = { url: API + '/api/mobileapp/categories' };
      aj2.callback.success = successGetAllCategory;
      aj2.get();
  </code></pre>