Assign and use javascript object property via AJAX

Question

So I have this Javascript object :

var obj = { 
    conn : null,
    first : function(thisIdentity) {
        "use strict";
        $(document).on('click', thisIdentity, function(e) {
        e.preventDefault();
        $.ajax ({ 
            url : some value,
            // other parameters
            success : function() {
                this.conn = new Connection(data.user_id, "127.0.0.1:80");
            }
        });
   },
    second : function(thisIdentity) {
        "use strict";
        $(document).on('click', thisIdentity, function(e) {
            e.preventDefault();
            $.ajax ({ 
                url : some value,
                // other parameters
                success : function() { 
                    // using this.conn now results in UNDEFINED
                }
            });
    }
};

Now basically value is assigned to conn variable in AJAX call of first function but when I try to use the same value in second function then it states this.conn is undefined. I just want to know how to assign value to the object's property and keep it preserved for future use? Thanks!

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-16 10:35:34Z

1

In the ajax success callback the this refers to a different scope than the original object.

Change you code to this:

var obj = { 
conn : null,
first : function(thisIdentity) {
    "use strict";
    var mySelf = this;
    $(document).on('click', thisIdentity, function(e) {
    e.preventDefault();
    $.ajax ({ 
        url : some value,
        // other parameters
        success : function() {
            mySelf.conn = new Connection(data.user_id, "127.0.0.1:80");
        }
    });
},
second : function(thisIdentity) {
    "use strict";
    var mySelf = this;
    $(document).on('click', thisIdentity, function(e) {
        e.preventDefault();
        $.ajax ({ 
            url : some value,
            // other parameters
            success : function() { 
                // now you can access the connection with mySelf.conn
            }
        });
    }
};

edited Jan 16, 2016 at 10:35

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Dec 25, 2015 at 19:21

faboulaws

2,07818 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yomesh Over a year ago

I tried this but still it is saying self.conn is null. Value is being assigned in the first function but when I use it in next then it says it is null.

Praveen Kumar Purushothaman Over a year ago

self is a keyword, which is similar to this.

Musa Over a year ago

@PraveenKumar no it isn't

Praveen Kumar Purushothaman Over a year ago

@Musa Can you kindly explain the difference, thanks. :)

Musa Over a year ago

@PraveenKumar self is not a keyword, this is

|

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-25 19:17:12Z

0

The syntax itself is wrong. You are creating a variable or giving an expression inside an object literal. Remember this is not a function, but instead, it should be:

$.ajax ({ 
    // computation and in success function 
    conn: new Connection(data.user_id, "127.0.0.1:80")
});

Updated

When you are giving such a way of definition:

success : function() {
    this.conn = new Connection(data.user_id, "127.0.0.1:80");
}

Here, the this object refers to the success function and not your object. Read Understanding Scope and Context in JavaScript. Now you need to create a proxy variable for this and use it:

first : function(thisIdentity) {
    "use strict";
    var myObj = this;
    $(document).on('click', thisIdentity, function(e) {
    e.preventDefault();
    $.ajax ({ 
        url : some value,
        // other parameters
        success : function() {
            myObj.conn = new Connection(data.user_id, "127.0.0.1:80");
        }
    });
},

edited Dec 25, 2015 at 19:17

answered Dec 25, 2015 at 18:57

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

12 Comments

Musa Over a year ago

I think OP did a terrible job of posting the code, that line is actually in the success callback. Also there is no conn parameter in jQuery.ajax.

Praveen Kumar Purushothaman Over a year ago

The conn is OP's defined variable I guess. It is there in the top.

Yomesh Over a year ago

@PraveenKumar @Musa conn is pre-defined as Object's property and it is being assigned in the callback function/success function. success : function() { this.conn =new Connection(data.user_id, "127.0.0.1:80"); }

Praveen Kumar Purushothaman Over a year ago

@Yomesh Yeah, but that's not a function buddy, your syntax is wrong. So make it as success: function () {} and add your contents there.

Yomesh Over a year ago

@PraveenKumar Check my comment and edited post again please. I have added my content in success : function() {} only.

|

Collectives™ on Stack Overflow

Assign and use javascript object property via AJAX

2 Answers 2

6 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related