Variable scope with JQuery

Question

I have a Javascript object which has a jquery ajax call to server to fill one of its attributes:

function Busqueda(contenedor){
    var datosPost = "someData";

    var resultados = undefined;
    var that = this;

    this.buscar = function(){
         jQuery.ajax({
            type: "POST",
            dataType: "json",
            url: "phpFile.php",
            data: datosPost,
            success: function (data){
                if(data.error != 0){
                    alert(data.errorTxt);
                } else {
                    that.resultados = data.resultados;
                }
            }
        });
    }
}

The ajax call should fill the attribute "resultados". However, after the "buscar" method is run, resultados remains undefined.

Also, I debugged "that.resultados" inside the success method and it is Busqueda's attribute.

What is going on?

Answer 1

You never show how you use it. Are you properly creating an instance?

var o = new Busqueda();
// ... after the ajax success
console.log(o.resultados)

If you don't use new then this (and that) and will be window, not o.

Answer 2

Why are you using that.resultados? do you mean "this"? It should just be "resultados"

function Busqueda(contenedor){
    var datosPost = "someData";

    var resultados = undefined;
    var that = this;

    this.buscar = function(){
         jQuery.ajax({
            type: "POST",
            dataType: "json",
            url: "phpFile.php",
            data: datosPost,
            success: function (data){
                if(data.error != 0){
                    alert(data.errorTxt);
                } else {
                    resultados = data.resultados;
                }
            }
        });
    }
}