Jquery plugin and $.ajax

Question

I'm trying to do write a jQuery plugin based on a prototype pattern.

My problem is when I use the $.ajax function to load an xml file, I loose the this object.

For example this work :

Plugin.prototype = {        
        defaults: {
            message: 'Hello world!'             
        },
        init: function() {              
            this.setStyleAndOptions();
            return this;
        },
        setStyleAndOptions: function() {                
            alert("setStyleAndOptions : ");
        }
}

But that doesn't, I get an error saying "this.setStyleAndOptions is not defined" :

Plugin.prototype = {

        defaults: {
            message: 'Hello world!'
        },
        init: function() {              
            $.ajax({
                type: "GET",
                url: "param.xml",
                dataType: "xml",
                success: this.initOptions
            });                             
            return this;
        },          
        initOptions: function(dataxml) {        
            // Error occured here, I suppose "this" is not the plugin anymore
            this.setStyleAndOptions();
        },
        setStyleAndOptions: function() {                
            alert("setStyleAndOptions");
        }
}

Thanks for your help.

Daniel Mendel · Accepted Answer · 2011-10-24 12:32:35Z

3

Try storing this in a variable:

        init: function() {
            var that = this;          
            $.ajax({
                type: "GET",
                url: "param.xml",
                dataType: "xml",
                success: that.initOptions
            });                             
            return that;
        },

answered Oct 24, 2011 at 12:32

Daniel Mendel

10k1 gold badge27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

red-X · Accepted Answer · 2011-10-24 12:43:31Z

1

The problem is that this is the function on the moment of the error. You could try it with the apply or call function:

Plugin.prototype = {

    defaults: {
        message: 'Hello world!'
    },
    init: function() {              
        $.ajax({
            type: "GET",
            url: "param.xml",
            dataType: "xml",
            success: function(){
                this.initOptions.apply(this, arguments);
            }
        });                             
        return this;
    },          
    initOptions: function(dataxml) {
        this.setStyleAndOptions();
    },
    setStyleAndOptions: function() {                
        alert("setStyleAndOptions");
    }
}

answered Oct 24, 2011 at 12:43

red-X

5,1281 gold badge28 silver badges40 bronze badges

1 Comment

0xMrZK Over a year ago

Thanks. That was the right direction I just had to declare another variable because in the success function, this is the function. But a mix with the first answer did the trick

Collectives™ on Stack Overflow

Jquery plugin and $.ajax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related