jQuery AJAX issue? Or JS OOP scope issue?

Question

I am trying to create a database handler class in javascript. I would like to call the class by simply using:

var databaseHandler = new DatabaseHandler();
result = databaseHandler.getResult("SELECT * FROM login");

I have created the class and used a callback for the ajax function (so as to wait for the ajax result to be returned). But all I am still receiving "undefined" as my result. If I use console.log(a) inside of the onComplete function, I get an array of the intended results.

(function(window){

    //Database class
    function DatabaseHandler(){

        //Query
        this.query = function(query, whenDone){
            request = $.ajax({
                url: "../optiMizeDashboards/php/DatabaseQuery.php",
                type: "POST",
                data: {query : query},
                dataType: "JSON"
            });

            request.done(function(output) {
                whenDone(output);
            });

            request.fail(function(jqXHR, textStatus) {
                console.log(textStatus);
            });
        };

        //Get result
        this.getResult = function(query){
            this.query(query, this.onComplete);
        };

        //Ajax callback
        this.onComplete = function(a){
            return a;
        };
    }

    //Make available to global scope
    window.DatabaseHandler = DatabaseHandler;

}(window))

My question is: Is this something to do with the variable scope, or the way that ajax works? I have read all the answers explaining that ajax is ASYNC and I thought I had handled that by using a callback function "onComplete"

Any help on this topic would be greatly appreciated!

you have not implemented the callback system correctly

Arun P Johny
– Arun P Johny

2014-07-07 12:14:54 +00:00
Commented Jul 7, 2014 at 12:14 — Arun P Johny
– Arun P Johny, Commented Jul 7, 2014 at 12:14

dark_ruby · Accepted Answer · 2014-07-07 12:21:37Z

You will not be able to return result immediately from calling getResult because underlying jQuery POST request is Asynchronous, instead you need to be passing a callback function which eventually will receive a result from server.

something like that:

(function(window){
    //Database class
    function DatabaseHandler(){
        //Query
        this.query = function(query, whenDone){
            request = $.ajax({
                url: "../optiMizeDashboards/php/DatabaseQuery.php",
                type: "POST",
                data: {query : query},
                dataType: "JSON"
            });
            request.done(function(output) {
                whenDone(output);
            });
            request.fail(function(jqXHR, textStatus) {
                console.log(textStatus);
            });
        };
        //Get result
        this.getResult = function(query, callback){
            this.query(query, callback);
        };
    }

    //Make available to global scope
    window.DatabaseHandler = DatabaseHandler;

}(window))

// then use it like so
var databaseHandler = new DatabaseHandler();
result = databaseHandler.getResult("SELECT * FROM login", function(data) {
    //do something with data
});

PS: exposing direct SQL access to the databse on the client is very dangerous though, and I would not recommend doing that

Collectives™ on Stack Overflow

jQuery AJAX issue? Or JS OOP scope issue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related