jQuery Ajax: set scope of json object to parent function

Question

I'm trying to set the returned object from a jQuery Ajax call to the scope of the parent function (jQuery Ready).
I'm probably missing something obvious, but I'm pretty tired today and I can't find it.
In comment, I gave some feedback on the console.logs.

Here is my current code:

$(function () {
    var json_contracts; 
    var parent_id = $('#dropdown_parents').select2('data').id;         
    $.ajax({
        type: 'GET', 
        url: 'http://www.ingemployeebenefits.com/develop_kgy/entities/parents/db_parents_getcontracts.php',
        dataType: 'json', 
        data: {
            'parent_id': parent_id
        },
        success: function(data) {
            json_contracts = data;
            //This line returns the object properly 
            console.log(json_contracts); 
        }, 
        error: function (xhr,status,error) {
                   $('#msg_parent_view').html("Error: " + error);
                   return false;
                }
    });
    //This line returns undefined. 
    console.log(json_contracts); 
});

I also checked out this post: Set javascript global variable to JSONresult?

I can't see what I'm doing diffferently.

Thanks

score 1 · Answer 1 · answered Nov 21 '13 at 14:31

It is happening because console.log() is called before ajax call is completed.

Add callback and it should work.

Try:

$(function () {
    var json_contracts; 
    var parent_id = $('#dropdown_parents').select2('data').id;    
    function get_value(function(){
        console.log(json_contracts);
    });
    function get_value(callback){
        $.ajax({
            type: 'GET', 
            url: 'http://www.ingemployeebenefits.com/develop_kgy/entities/parents/db_parents_getcontracts.php',
            dataType: 'json', 
            data: {
            'parent_id': parent_id
            },
            success: function(data) {
                json_contracts = data;
                console.log(json_contracts); 
        }, 
           error: function (xhr,status,error) {
                   $('#msg_parent_view').html("Error: " + error);
                   return false;
                }
        });
    }        
});

Cool, I upvoted your answer but got it already figured out; I will accept tymeJV's answer as he was first. Thanks — html_programmer, Nov 21 '13 at 14:36

score 0 · Accepted Answer · answered Nov 21 '13 at 14:27

0

Basic AJAX, your global variable is being assigned but your console.log statement returns undefined because it is hit before your AJAX is complete. Either do your logic inside the success function or pass in a callback function which takes your data as a parameter.

answered Nov 21 '13 at 14:27

tymeJV

103,943
14
161
157

Right that's it obviously. Thanks, I'll accept in a few mins – html_programmer Nov 21 '13 at 14:29

jQuery Ajax: set scope of json object to parent function

2 Answers2