Question

I have a select in my html and would like to add the options via ajax when the page loads. The options values are in my DB and I get them via a call to ajax. To do so, I’m writing a class in javascript but I just can’t get my data when it runs. Please take a look :

— Main.js —

function MyLoader() {
    this._clients = null;
    this._code = null;
}

Loader.prototype = {

    var context = this;

    loadClients: function() {
        $.ajax({
            url: "my/php/",
            type: "POST",
            data: {...},
            success: function(response) {
                context._clients = response;
            }
        });
    },

    getCode: function() {...}
};

Then I have the following :

$(document).ready(function() {
    var loader = new Loader();
    loader.loadClients();
    alert(loader._clients);

    //Here I want to add my options to the select
});

My alert always returns null, and I don’t understand why. I need to save my data in the class in order to access them anytime I need to.

Can you point me to the right direction to make all my stuff work ? Thank you for your answers.

Answer 1

Loader.prototype = { //     v---callback parameter
    loadClients: function(callback) {
        $.ajax({
            url: "my/php/",
            context: this, // <---set success context
            type: "POST",
            data: {...},
            success: callback // <---pass callback
        });
    },

    getCode: function() {...}
};

$(document).ready(function() {
    var loader = new Loader();
                      //  v---pass callback
    loader.loadClients(function(response) {
        this._clients = response;
        alert(this._clients);
        //Here I want to add my options to the select
    });

});