CODEWITHSUNDEEP
javascriptjquery
josh
josh

Reputation: 10348

Set variable outside AJAX request

I'm attempting to create an ajax function that returns a specific string from a page, and then sets it in the class I created. However, when I attempt to call this.setGlideUser within the ajax success parameter, it tells me that the 

object has no function setUserGlide.

And when I attempt to call this.setUserGlide outside of the success parameter, and then look at the value of _glideUser, _glideUser is undefined. Here is a snippet of my code. 

function main()
{
    this.start = true;
}

main.prototype.load = function()
{
    var _glideUser;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            _glideUser = unescape(data).match(pattern);
        }
    });
    this.setGlideUser(_glideUser);
    return 1;
}

main.prototype.setGlideUser(user)
{
    return this._glideUser = user;
}

main.prototype.getGlideUser()
{
    return this._glideUser;
}

var _main = new main();
_main.load();
// check that the ajax has completely loaded
_main.getGlideUser(); // returns undefined

I can't think of a way to set the _glideUser variable within the main class from the Ajax success function. I would like to get the value of _glideUser within another function, to do things with it. Any suggestions?

Upvotes: 1

Views: 2207

Answers (5)

Delta
Delta

Reputation: 4338

I'm not quite familiar with jQuery but that ajax request is probably asynchronous, so you have to call setGlideUser from inside the ajax success call, just add a reference variable to your instance and call it from there:

var self = this;
$.ajax(
{
    url: '/home',
    dataType: 'text',
    success: function(data)
    {
        self.setGlideUser(unescape(data).match(pattern));
    }
});

And just a quick tip for you is that you can have getters and setters in js like this:

main.prototype.__defineSetter__("glideUser", function(value)
{
    this._glideUser = value;
});

main.prototype.__defineGetter__("glideUser", function()
{
    return this._glideUser;
});

Edit: Actually, see comments for that stuff

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71939

There is no this._glideUser, because _glideUser is local to your load function. Instead of declaring var _glideUser inside load, set it as a public property from the constructor:

function main()
{
    this.start = true;
    this._glideUser = null;
}

(Your first call to setGlideUser would actually create such a property, but isn't it confusing to have both?)

Also, as others mentioned, you're trying to setGlideUser before your ajax operation completed. You need to do that from the success callback:

main.prototype.load = function()
{
    var that = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            that.setGlideUser(unescape(data).match(pattern));
        }
    });
    return 1; // what's the point?
}

Upvotes: 3

Bergi
Bergi

Reputation: 665455

attempt to call this.setGlideUser within the ajax success parameter

That was correct. However, the this keyword in the success method points to the jqXHR object and not to your main instance; you will need to dereference it:

var that = this;
$.ajax({
    url: '/home',
    dataType: 'text',
    success: function(data) {
        _glideUser = unescape(data).match(pattern);
        that.setGlideUser(_glideUser);
    }
});

Upvotes: 0

asgoth
asgoth

Reputation: 35829

Keyword this means the current scope, which is in this (pun intended) case the ajax object. You need a reference to the outer this object, by assigning me to this in the outer object.

main.prototype.load = function()
 {
    var _glideUser;
    var me = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            _glideUser = unescape(data).match(pattern);
            me.setGlideUser(_glideUser);
        }
    });
    return 1;
}

Upvotes: 0

hvgotcodes
hvgotcodes

Reputation: 120308

success is not invoked until the request returns. It is asynchronous. You need to invoke the method within success itself, when the data value is available. 

main.prototype.load = function()
{
    var _glideUser, that = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            var = _glideUser = unescape(data).match(pattern);
            that.setGlideUser(_glideUser);
        }
    });
    // this.setGlideUser(_glideUser); this is incorrect
    return 1;
}

Upvotes: 0

Related Questions