Object in object

Question

var UsersMenu = function(){
 this.returnUsers = [];
 this.retrieve = function(posts){
 var temp = [];
 $.post("router.php", { "action": "getUsersMenu", "posts" : posts},
 function(data)
 {
 if(data.response){ 
 for(var i=0; i<data.returnUsers.length; i++){
 temp.push(data.returnUsers[i]);
 }
 this.returnUsers = temp; // i know what 'this' is incorrect
 }
 }, "json");
 alert(this.returnUsers);
 }
}

2 questions:
1. How to access to parent 'this' from jq object (returnUsers) ?
2. Why alert after jq post is calling before some alert in jq post ?

• Andy E: Both your questions are duplicated many times over on this site, you might find an answer to both if you search (and both should be asked as separate questions anyway).
• Abyss: Okay boss, i know rules about searching, but it's an hurry question, so i asked it again for you

Answer 1

1 How to access to parent 'this' from jq object (returnUsers) ?

You could capture it in a closure:

var UsersMenu = function() {
 this.returnUsers = [];
 var self = this;
 this.retrieve = function(posts) {
 var temp = [];
 $.post("router.php", { "action": "getUsersMenu", "posts" : posts },
 function(data) {
 if(data.response) {
 for(var i = 0; i < data.returnUsers.length; i++) {
 temp.push(data.returnUsers[i]);
 }
 self.returnUsers = temp;
 }
 }, "json");
 }
};

2 Why alert after jq post is calling before some alert in jq post ?

Because AJAX is asynchronous. The $.post method which sends an AJAX request returns immediately but the success callback handler is executed much later, when a response is received from the server. So you shouldn't be putting the alert outside of this success handler. If you want to consume the results of an AJAX call this should happen only inside the callback which is when the result is available.

Answer 2

1. How to access to parent 'this' from jq object (returnUsers) ?

You should put the parent 'this' in a local variable like var self = this; outside the callback function, and then use self.returnUsers = temp;.

1. Why alert after jq post is calling before some alert in jq post ?

Because ajax works asynchronously, however for jQuery.ajax method, you can set it to work synchronously by async: false.

Answer 3

To answer your second question first: The $.post() function begins an asynchronous Ajax request. This means that the $.post() function itself returns immediately and execution continues with the next line of code which in this case is an alert(). Then once the Ajax request completes the anonymous function you provided to $.post() as a callback will be executed so if that function contain an alert() too it would be displayed then.

As to your first question: the value of this in a function depends on how a function was called, and jQuery typically sets it when it calls your callback functions but of course it won't be setting it to your UserMenu object. The easiest workaround is to save this in a variable that is local to your retrieve() function and then reference that variable from your callback:

var UsersMenu = function(){
 this.returnUsers = [];
 this.retrieve = function(posts){
 var self = this,
 temp = [];
 $.post("router.php", { "action": "getUsersMenu", "posts" : posts},
 function(data)
 {
 if(data.response){ 
 for(var i=0; i<data.returnUsers.length; i++){
 temp.push(data.returnUsers[i]);
 }
 self.returnUsers = temp;
 } 
 }, "json");
 alert(this.returnUsers);
 }
}

Even though the retrieve() function will have finished by the time the Ajax callback is run the magic of JavaScript closures means that the inner anonymous function still has access to those local variables.

Answer 4

1 - Use a variable like that like

var that = this.returnUsers; 

then inside the jq funciton you can refer to it like:

 if(data.response){
 for(var i=0; i<data.returnUsers.length; i++){
 temp.push(data.returnUsers[i]);
 }
 that = temp; // Now 'this' is correct
 }

2 - This becouse ajax calls are by default Asynchronous, means that javascript interpreter won't wait for the ajax call to be completed and it will continue executing the following statements, so put the alert in a callback function.

Answer 5

I can answer your second question.

Why alert after jq post is calling before some alert in jq post ?

Because AJAX is asynchronous, meaning you fire an AJAX request and don't wait for the outcome. You just register a callback function and carry on with the rest of the code. This "rest of the code" in your case is the alert statement.

It is (削除) highly unlikely (if not impossible) (削除ここまで) impossible for your AJAX response to arrive before the control reaches the alert statement.

• nnnnnn: The speed with which the response comes back is not relevant. JavaScript (in browsers, anyway) runs on a single thread, so unless you make the Ajax request synchronous the Ajax success callback will never be called before control reaches the next statement - indeed all of the current function will complete first, as will whatever function called the current function and so forth.