Rodrigo Dias
Rodrigo Dias

Reputation: 1340

jquery $ajax closure

I have the following function that takes this frequency parameter and calls the api, but the parameter frequency is not defined inside the SUCCESS callback and I need it. How to pass that parameter to my callback?

 init : function(frequency) {
    $.ajax({
        url: 'api/v1/dashboard',
        type: "GET",
        dataType: "json",
        data : {username : "demo",frequency : frequency},
        success: function(data) {
            dashboard_hander.set_data(data.dashboard);
                            //here frequency is undefined

        }
    });
},

EDIT 2 =====

It works by defining parameters = {username : "demo",frequency : frequency}; outside of the $.ajax and passing as data object, or defining frequency in a higher scope, like:

 var dashboard_hander = {
frequency : "",
init : function(frequency) {
    this.frequency = frequency;

       ...
    }
 } 

Upvotes: 0

Views: 7050

Answers (3)

Viktor S.
Viktor S.

Reputation: 12815

Demo http://jsfiddle.net/B2h8m/2/ And here is its code:

var test = {init : function(frequency) {
    (function() {
        $.ajax({
            url: 'api/v1/dashboard',
            type: "GET",
            dataType: "json",
            data : {username : "demo",frequency : frequency},
            success: function(data) {
                alert(frequency);

            },
            error: function(data) {
                alert(frequency);

            }
        });
    })();
}}
test.init(10);

Addtional function wrapping $.ajax will create a closure and that way you will get an access to frequency.

EDIT: Besides, strange that you have it undefined at that place. See this demo. It is using the same code you have. And works fine. Additional function I've added is not needed as success callback function will create a closure also. Except that you are showing not the same code you have a problem with and in your code success is defined something like this:

success: successHandlerFunctionName

In that case you may change it to:

success:function(data) {successHandlerFunctionName(data, frequency);}

where frequency will be taken from closure

Upvotes: 2

Denys Séguret
Denys Séguret

Reputation: 382264

The parameter frequency is defined, as it is kept by the closure. It can disapear only if you change it after the ajax call.

Demonstration with this code :

<script>
var obj = {
    init : function(frequency) {
    $.ajax({
        url: 'index2.html',
        type: "GET",
        dataType: "html",
        data : {username : "demo",frequency : frequency},
        success: function(data) {
            alert('frequency:' + frequency);
        }
    });
}};
obj.init(33);
</script>

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Just define it at a higher scope.

   init : function(frequency) {
        var myData = {username : "demo",frequency : frequency};
        $.ajax({
            url: 'api/v1/dashboard',
            type: "GET",
            dataType: "json",
            data : myData,
            success: function(data) {
                alert(myData.frequency);
                dashboard_hander.set_data(data.dashboard);
                                //here frequency is undefined

            }
        });
    },

Upvotes: 2

Related Questions