Javascript Namespaces and jQuery AJAX

Question

I use the guidelines outlined here ( http://www.odetocode.com/articles/473.aspx ) to write an AJAX JavaScript web system using simulated Namespacing and prototyping.

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

The problem is that I created an instance of my JavaScript web chat, I cannot directly call the method inside it, because I need to access it through the instance.

The key part in the code below is

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

I think because we are inside the $ .ajax () method, which this one no longer applies to our WebchatV3 object.

The full JavaScript code is 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 refers to thisin the required area. thisand scope works differently in javascript and then in most languages, in this case it refers to the object being passed to 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);
        }
    });
},

Answer 2

Try

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

which can work.