Using a variable created within an AJAX request in another function

Question

I have a list of projects where, when the Thumb of a project is clicked, the script loads images related to the project.

$('.project-grid').on('click', 'a', function (event) {
    event.preventDefault();
    var $this = $(this);
    var id_projeto = $this.data('projeto');
    pega_imagens(id_projeto);
});

The last line calls the following function:

function pega_imagens(id_projeto){
    var id_projeto = id_projeto;

    $.ajax({
        type: 'POST',
        data: ({ id_projeto: id_projeto }),
        dataType: 'json',
        url: 'php/imagens.php',
        success: function (data) {
            var toAppend = '';
            toAppend += '<div class="gutter-sizer"></div><div class="grid-sizer"></div>';
            for (var i = 0; i < data.length; i++) {
                toAppend += '<img class="item" src="img/' + data[i].imagem + '" width="' + data[i].largura + '" height="' + data[i].altura + '" />';
            }

            $('#project-expander-images-'+id_projeto).append(toAppend);
            alturaTotal = $('#project-expander-images-'+id_projeto).height();
        },
        error: function (data) {
            console.log('erro' + data);
        }
    });
}

My question is this: how do I use the variable alturaTotal out of function pega_imagens? I know I must use a function callback, but I don’t know how to include it in the code.

UPDATE

I made some adjustments to the code, putting all the actions that were on success in the callback function:

function pega_imagens(id_projeto, callback){
    var id_projeto = id_projeto;

    $.ajax({
        type: 'POST',
        data: ({ id_projeto: id_projeto }),
        dataType: 'json',
        url: 'php/imagens.php',
        success: function(data){
            foo(data, id_projeto);
        }, 
        error: function (data) {
            console.log('erro' + data);
        }
    });
}

 function foo(data, id_projeto){
    var toAppend = '';
    toAppend += '<div class="gutter-sizer"></div><div class="grid-sizer"></div>';
    for (var i = 0; i < data.length; i++) {
        toAppend += '<img class="item" src="img/' + data[i].imagem + '" width="' + data[i].largura + '" height="' + data[i].altura + '" />';
    }

    $('#project-expander-images-'+id_projeto).append(toAppend);
    alturaTotal = $('#project-expander-images-'+id_projeto).height();
    console.log(alturaTotal);
 }

But the value returned by the variable alturaTotal is incorrect.

Answer 1

I believe that the total height should be obtained only where necessary or even in another function, because it does not seem to be one of the functionalities of the function pega_imagens.

From what I understand, your problem is to execute the code that will use the full height after running ajax. If so, a callback function, as you yourself mentioned, solves the problem.

pega_imagens(id_projeto, function() {
    var alturaTotal = $('#project-expander-images-'+id_projeto).height();
    console.log(alturaTotal);
});

function pega_imagens(id_projeto, callback){
    $.ajax({
        // ...
        success: function() {
            // ...
            if ($.isFunction(callback)) {
                callback();
            }
        }
    });
}