CODEWITHSUNDEEP
jquery
Shahid Karimi
Shahid Karimi

Reputation: 4357

ajax jquery context issue can not be solved

Despite of setting the context to "this" the intended methods can not be triggered. In the following code within the createNewTable function the "this.joinTable(data.tableId);" can not be fired despite of setting the context to this.

How I solove this issue. Please help.

var homePageKeycontroller = {

    currentIndex:0,
    tables: new Array("newGame"),

    init: function(){
        this.select();
    },

    select : function(){
        $(".box").css({
            background:"#FFAB25"
        });
        $("#"+this.tables[this.currentIndex]).css({
            background:"gray"
        });
    },
    next : function(){
        this.currentIndex++;
        if(this.currentIndex > this.tables.length-1)
            this.currentIndex = 0;
        this.select();
    },
    previous : function(){
        this.currentIndex--;
        if(this.currentIndex <= 0)
            this.currentIndex = 0;
        this.select();
    },
    createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    alert("Table ID: "+data.tableId);
                    this.joinTable(data.tableId); // issue here
                }
            }
        });
    },
    handleUserChoice : function(){
        if(this.tables[this.currentIndex] ==='newGame'){
            this.createNewTable();
        }
    },
    joinTable : function(_tId){
        $.ajax({
            url:"http://mywebsite.com/JoinTable",
            type:'post',
            dataType:'json',
            data:{tableId:_tId},
            context:this,
            success:function(data){
                if(data.status == JsonStatus.OK){
                    this.showTable(); //issue here
                }
            }
        });
    },
    showTable : function(){
        $.ajax({
            url : 'http://mywebsite.com/showTable',
            success:function(data){
                DOM.mainCanvas.html(data);
            }
        });
    }
}

Upvotes: 2

Views: 56

Answers (3)

Alexander Preston
Alexander Preston

Reputation: 1665

Perhaps try the .done() syntax instead of :success. I have had these kind of issues with the success approach but never when using the done() approach.

createNewTable : function(){
        $.ajax({
            url: "http://mywebiste.com/createAjaxTable",
            type:'post',
            dataType:'json',
            context:this
        }).done(function(data){
            if(data.status == JsonStatus.OK) {
                alert("Table ID: "+data.tableId);
                this.joinTable(data.tableId); // issue here
            }
        });
    },

Upvotes: 0

Rodrigo Villalba Zayas
Rodrigo Villalba Zayas

Reputation: 5636

The problem here is that inside 'success' method, 'this' keyword refers to ajax object containing 'success' method.

A simple workaround to fix this would be:

var homePageKeycontroller = {

  var that = this;

  createNewTable : function(){
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                alert("Table ID: "+data.tableId);
                that.joinTable(data.tableId);
            }
        }
    });
},

joinTable : function(_tId){
    $.ajax({
        url:"http://mywebsite.com/JoinTable",
        type:'post',
        dataType:'json',
        data:{tableId:_tId},
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                that.showTable();
            }
        }
    });
},
showTable : function(){
    $.ajax({
        url : 'http://mywebsite.com/showTable',
        success:function(data){
            DOM.mainCanvas.html(data);
        }
    });
}

}

Upvotes: 1

Craig MacGregor
Craig MacGregor

Reputation: 4629

According to the jQuery API docs

The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.

So to get this working you can store a reference to this in a variable before the ajax call or call homePageKeyController.joinTable() directly inside the callback:

createNewTable : function(){
    var self = this;
    $.ajax({
        url: "http://mywebiste.com/createAjaxTable",
        type:'post',
        dataType:'json',
        context:this,
        success:function(data){
            if(data.status == JsonStatus.OK){
                // Use self variable here since "this" belongs to callback
                // function context.
                // or call homePageKeyController.joinTable(data.tableId) instead.
                self.joinTable(data.tableId);
            }
        }
    });
},

Upvotes: 2

Related Questions