Dúvida: Ajax, JQuery e JavaScript!

Programação
, , , ,
#1

Oi pessoal! Estou com dúvidas no uso do Callback! Tenho uma aplicação que possui um botão que exibe um modal para o usuário com os telefones úteis cadastrados no banco de dados… Entretanto, como estou usando Ajax, eu só tenho o retorno dessa requisição quando eu clico pela segunda vez neste mesmo botão.

Gostaria de saber como eu posso colocar uma mensagem de carregando no conteúdo deste modal, logo após um clique no botão e utilizar o Callback do JQuery para retornar a requisição alguns instantes depois… Ou seja, assim que eu clicar no botão, aparece uma mensagem de “Carregando…” e logo depois, sem dar refresh na página, ou clicar pela segunda vez (como vem acontecendo) os registros dos telefones úteis sejam exibidos na mesma modal e a mensagem de “Carregando…” sumir logo após exibir os registros cadastrados no meu banco de dados. Alguém poderia me ajudar?!

JAVASCRIPT DA MINHA PUBLIC VIEW:

//Popula Modal

function populateTelefoneUtilGridPanel() {

var telefoneUtil = loadTelefoneUtilList();
console.log('POPULATE TELEFONE UTIL LIST - ENTREI AQUI!');

$('.telefoneUtilGridPanelContent').html("");

for (var i = 0; i < telefonesUteis.items.length; i++) {

    //console.log('I: ' + i + ' - ' + telefonesUteis.items[i].NomeTelefone + ' (' + telefonesUteis.items[i].DDD + ') ' + telefonesUteis.items[i].Numero + ' R:' + telefonesUteis.items[i].Ramal);

    var telefoneUtil = telefonesUteis.items[i];

    var v = telefonesUteis.items[i].Numero;
    var central = v.substring(0, v.length-4);
    var terminal = v.substring(v.length-4);
    telefonesUteis.items[i].Numero = central + terminal;

    $('.telefoneUtilGridPanelContent').append('<div class="coluna1">' + telefonesUteis.items[i].NomeTelefone + '</div>' + '<div class="coluna2">' + ' (' + telefonesUteis.items[i].DDD + ') ' + central + '-' + terminal + '</div>' + '<div class="coluna3">' + telefonesUteis.items[i].Ramal + '</div>');

}

//Carrega lista de telefones úteis do banco de dados

function loadTelefoneUtilList() {

if (window.telefonesUteis === undefined) {
    console.log('Não está definido, vou carregar!');
    //$('.telefoneUtilGridPanel').html("Carregando...");

    var params = "controller=TelefoneUtil&action=getListPublico";
    $.ajax({
        url: 'publicView.php',
        data: params,
        dialog: "Carregando",
        dataType: 'json',
        method: 'GET',
        success: function (telefonesUteis) {
           console.log("loadTelefoneUtilList - SUCCESS");
           window.telefonesUteis = telefonesUteis;
           return telefonesUteis;

        },error: function (jq, status, message) {
            bootbox.dialog({
                title: 'Mensagem do sistema',
                message: 'Ocorreu um erro interno do sistema. Por favor, tente novamente ou contate o administrador do sistema.',
                buttons: {
                    ok: {
                        label: 'Ok',
                        className: 'btn-success',
                        callback: function () {

                        }
                    }
                }
            });
        },
    });
} else {
    console.log('Já foi carregado, vou retornar o quê eu já peguei antes!');
    return window.telefonesUteis;
}

Como eu poderia utilizar o Callback? Seria no Sucess da função Load?