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 ?

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.