Javascript 'Namespaces' and jQuery AJAX

Question

I'm using the recommendations laid down here (http://www.odetocode.com/articles/473.aspx) to write a JavaScript AJAX webchat system using simulated Namespacing and prototyping.

In one of my prototype methods I'm calling the $.ajax method in jQuery. What I then want to do is pass the returned JSON data into a method inside my JavaScript webchat namespace.

The problem seems to be because I've created an instance of my JavaScript webchat, I can't directly call a method inside it because I need to address it through the instance.

The key part in the code below is

success: function(data, textStatus) {
  this.GetUpdate_Success(data)
},

I'm thinking because we're inside the $.ajax() method, that this no longer refers to our WebchatV3 object.

The full JavaScript code is shown below:

/// <reference path="/JavaScript/jquery-1.3.2-vsdoc2.js" />

// Simulated 'namespace'
var AvonAndSomerset = {}

// Chatroom run time data
AvonAndSomerset.WebchatV3 = function(memberId, passcode) {
  this.Members = new Array(); // Members in the chatroom
  this.Questions = new Array(); // The questions queue in the chatroom

  // Details about the current user
  this.currentMember = new AvonAndSomerset.WebchatV3.Member(memberId, passcode, null, null, null, null, null);

  // Set-up AJAX defaults
  $.ajaxSetup({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
  });
}

AvonAndSomerset.WebchatV3.prototype = {
    // Get latest Member,Quetsion,Transcript and Room data from server
    GetUpdate: function(StartUp) {

      $.ajax({
        url: "JSON.aspx/Members_GetChanges",
        data: "{ MemberID: " + this.currentMember.memberId + ", Passcode: \"" + this.currentMember.passcode + "\", ReturnAll: " + StartUp + " }",
        success: function(data, textStatus) {
          this.GetUpdate_Success(data)
        },
        error: function(result) {
          alert('Members_GetChanges() failed: ' + result.responseText);
        }
      });
    },
    // Callback - on success of GetUpdate()
    GetUpdate_Success: function(data) {
      alert('The AJAX call was successful!');
    },
    // Does the MemberID exist in the local array?
    Members_DoesExist: function(MemberID) {
      alert('Searching for ' + MemberID);

      alert(this.Members.length);
    }

Answer 1

The easiest way to fix this is to create a variable that references this at the proper scope required. this and scope work differently in javascript then most languages, in this case it is referring to the object being passed into the function.

// Get latest Member,Quetsion,Transcript and Room data from server
GetUpdate: function(StartUp) {
    //here
    var self = this;
    $.ajax({ url: "JSON.aspx/Members_GetChanges",
        data: "{ MemberID: " + this.currentMember.memberId + ", Passcode: \"" + this.currentMember.passcode + "\", ReturnAll: " + StartUp + " }",
        success: function(data, textStatus) {
            self.GetUpdate_Success(data)
        },
        error: function(result) {
            alert('Members_GetChanges() failed: ' + result.responseText);
        }
    });
},