0

Faço a população de 4 HTML select com Ajax, porém estou com problema na hora de retornar os arquivos, tentei fazer de forma assíncrona só que não ficou bom pois o usuário consegue enxergar cada select sendo populado em ordem(além da demora é feio de se ver), quando alterei minha função para assíncrona e o meu Ajax também, não consigo retornar dados, exemplo.

function GetDropdownList(table)
{
    var DDItems;

    function GetDropdownList_AjaxCallBack(data) {
        DDItems = data;
    };
    $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        GetDropdownList_AjaxCallBack(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(errorThrown);
        });

    return DDItems;
}

async function PopulateDropDown(dropdownID) {
    var dropdownItems = GetDropdownList(dropdownID);
    console.log(dropdownItems.items);      
}


PopulateDropDown("LicenseDocs_Midia");
PopulateDropDown("LicenseDocs_Regiao");
PopulateDropDown("LicenseDocs_Prazo");
PopulateDropDown("LicenseDocs_Use");

No console.log recebo o seguinte erro JS:

TypeError: dropdownItems is undefined

Pesquisei que para retornar objetos de Ajax assíncrono basta criar um Callback, porém não está funcionando e não consigo encontrar uma solução...

3 Respostas 3

0

o problema está acontecendo pois você está inicializando 'DDItems' e atribuindo um valor somente no retorno do AJAX, porém a sua função está retornando antes do AJAX ter sido concluído. Existe duas formas(que eu pensei) para resolver esse problema.

A primeira delas é usando um callback. Ex.:

function GetDropdownList(table, callback)
{

    $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        callback(data)
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(errorThrown);
        });
}

async function PopulateDropDown(dropdownID) {
    GetDropdownList(dropdownID, response => console.log(response.items) );
}

A segunda solução seria usar promise(quase a mesma coisa do callback). Ex.:

function GetDropdownList(table)
{
   return new Promise((resolve,reject) => {
     $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        resolve(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        reject(errorThrown);
        });

   })
}

async function PopulateDropDown(dropdownID) {
    GetDropdownList(dropdownID)
        .then(response => console.log(response.items) )
        .catch(err => console.error(err) )
}
0

Utilizando a resposta do César, caso você queira salvar os dados em uma variável pode usar a Promise assim:

function GetDropdownList(table)
{
   return new Promise((resolve,reject) => {
     $.ajax({
        type: "POST",
        url: "/Ajax/GetDropdownList",
        dataType: "json",
        data: {
            table: table
        },
        async: true
    })
    .done(function (data) {
        resolve(data);
    })
    .fail(function (XMLHttpRequest, textStatus, errorThrown) {
        reject(errorThrown);
        });

   })
}

async function PopulateDropDown(dropdownID) {
    var armazena = await GetDropdownList(dropdownID)
    console.log(armazena);
}

-1

Sobre o erro:

TypeError: dropdownItems is undefined

Basicamente seu código está atribuindo valores a um objeto ainda não renderizado pelo seu navegador ou que no momento em que foi chamado a função ainda estava sendo construído. Tenha certeza de atribuir os valores apenas depois que seu Document estiver pronto.

Exemplos de maneiras de se certificar que seu HTML está pronto: Link

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .