Tutorial :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);      }  


Solution: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);          }      });  },  


Solution:2

Try

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

that may work.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »