Javascript probleme with 'this' in 'load' method callback

Question

I've create a 'Page Class' and an associated 'load' method.

The loading works perfectly, but i can't modify a property of that page within the callback method, although I cant reference the page name property !!!

function Page(page) {
    this.page = page;
    this.firstLoad = true;
    this.pageName = this.page.split('.')[0].split('/')[1];
    this.loaded = false;
}



Page.prototype.load = function () {
    var that = this;
    $("#content").html();
    $("#content").load(this.page, function () {
        $.getScript("PagesViewModel/" + that.pageName + "ViewModel.js");
        that.loaded = true;
    });
}

this.loaded is always false !!!

Thank you for your help

Regards

Eli · Answer 1 · 2011-05-10T13:16:03.783

0

Since your $.load method is asynchronous, when your Page.prototype.load method returns, this.loaded will always be false, and won't switch to true until the $.load method returns.

So, in this line here:

that.loaded = true;

The value of loaded will be false right before you set it, and true right after. The problem is that the Page.prototype.load method already returned, before your ajax request was even done. Can you post the code of where you are checking the value of loaded?

edited May 10 '11 at 13:16

answered May 10 '11 at 12:47

Eli

17,397
4
36
49

Thank you Eli. But i am doing the modification when the load succeed, at that point the $.load has returned, no ? – Salvatore DI DIO May 10 '11 at 12:53

score 0 · Answer 2 · answered May 10 '11 at 13:19

0

you need to define the instance globally in case executing an external ajax call.

function test(instancename){
this.instancename = instancename;
this.sayHello = function(data){
alert("hello "+data);
}
$.getJSON(url, params, this.instancename+".sayHello");
}

var k = new test("k");

Since the response comes from another source, you need to define your instance globally.

answered May 10 '11 at 13:19

eyurdakul

894
2
12
29

Thank you, as Eli said i must make a synchronous call. [link](http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-req/2592780#2592780) – Salvatore DI DIO May 10 '11 at 13:24
No, I don't believe you must make a synchronous call. We need to see where you are checking the loaded value to make sure you aren't checking it before the ajax call has completed. – Eli May 10 '11 at 14:17

Javascript probleme with 'this' in 'load' method callback

2 Answers2