Access the data returned in the success of an ajax request, within a $ ('form'). on ('submit' ...)

Question

Access the data returned in the success of an ajax request, within a $ ('form'). on ('submit' ...)

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a $ ('form'). on ('submit', function ()); and inside it I would like to make a call from a function that runs an ajax and returns an array of data. however when saving the return of the function in a variable it becomes "undifined" can not do what I want?

Follow the example code:

Fom submit:

$('#form_independentes').on('submit', function(event) {

    let curso_id = 1;
    let ficheiros = getDocuments_(curso_id);
    // variavél ficheiro fica como undefined

});

getDocuments_ function:

function getDocuments_(id_curso){
            $.ajax({
                url: '/candidaturas/documents/'+id_curso,
                type: 'GET',
                dataType: 'json',
                success: function( _response ){
                    //este console log mostra um array de objetos
                    console.log(_response.documents)
                    return _response.documents;
                },
                error: function( _response ){
                    Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
                    return false;
                }
            });
        }

Also follows a console print showing the undefined and array of objects

javascript jquery ajax

asked by anonymous 21.07.2017 / 13:47

2 answers

Problems passing object instantiated by function parameter with php How to uninstall Cordova and Ionic completely from windows

score 1 · Answer 1

This is because the getDocuments_ function does not have return . The return within the success property is not captured by the assignment of the let ficheiros = getDocuments_(curso_id); line.

I suggest that you incorporate logic into a function that is called by function of success .

Example

$('#form_independentes').on('submit', function(event) {
    let curso_id = 1;
    getDocuments_(curso_id); //sem atribuicao aqui, pois nao ha retorno
});

function getDocuments_(id_curso){
    $.ajax({
        url: '/candidaturas/documents/'+id_curso,
        type: 'GET',
        dataType: 'json',
        success: function( _response ){
            //este console log mostra um array de objetos
            console.log(_response.documents)
            setFicheiro(_response.documents) //funcao que realiza as tarefas necessarias com o objeto de resposta
        },
        error: function( _response ){
            Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
            return false;
        }
    });
}

There is also the possibility of returning the value for variable ficheiro if you use async: false on ajax . But this feature is discontinued and may not work in some browsers. Chrome and Firefox , for example, already issue warnings when this is done.

Synchronous Example

$('#form_independentes').on('submit', function(event) {
    let curso_id = 1;
    let ficheiros = getDocuments_(curso_id);
});

function getDocuments_(id_curso){
    return $.ajax({
        url: '/candidaturas/documents/'+id_curso,
        type: 'GET',
        async: false, // ESPERA O RESULTADO ANTES DE CONTINUAR
        dataType: 'json'
    }).responseText;
}

score 0 · Answer 2

Ajax requests are async ie they do not block the normal flow of execution of your code. So enas do not return anything at all!

How can you solve your problem? For this it will be necessary to adjust your code as follows HTML:

$('#form_independentes').on('submit', function(event) {

    let curso_id = 1;
    let ficheiros = false;

    $.ajax({
        url: '/candidaturas/documents/'+curso_id,
        type: 'GET',
        dataType: 'json',
        success: function( _response ){
        //este console log mostra um array de objetos
        console.log(_response.documents)
        ficheiros = _response.documents;
        // aqui chame a funcao que vai tratar a sua informacao nesse caso a variavel fixeios
        facaAlgoComOsFicheiros(ficheiros);
    },
    error: function( _response ){
        Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
        //return false;
   }
  });
});