Request ajax with append before opening modal

Question

For some reason I’m not getting this append to work.

function mostrarUploads(id) {
    $.ajax({
      url: "/painel/mostrarUploads",
      async: false,
      method: 'POST',
      data: {_token: jQuery(".token").val(), id: id},
      success: function(e) {
        e.forEach(function(item, indice) {
          $('#bodyTabelaUploads tbody').append('<tr><td>TESTE</td></tr>');
        });
      }
    });
}   

I have this table:

<table class="table table-bordered table-striped table-hover" id="tabelaUploads">
                        <thead>
                            <tr>
                                <th>Nome do arquivo</th>
                                <th>Ações</th>
                            </tr>
                        </thead>

                        <tbody id = "bodyTabelaUploads">

                        </tbody>
                    </table>

I’m calling the method before opening a modal. It’s an asynchronous method, but I’m using async: false.

Is it because this method is asynchronous, the modal opens before, and I don’t see the line being added? OBS: console.log(e) returns results!!

Answer 1

first, async: false is always a bad idea. The $.ajax returns a promise, then, open your modal in the continuation of the same.

function mostrarUploads(id) {
  return $.ajax({
    url: "/painel/mostrarUploads",
    method: 'POST',
    data: {_token: jQuery(".token").val(), id: id},
    success: function(e) {
      e.forEach(function(item, indice) {
        $('#bodyTabelaUploads tbody').append('<tr><td>TESTE</td></tr>');
      });
    }
  });
}

mostrarUploads(id).done(function(data, textStatus, jqXHR) {
  //exibir modal.
}).fail(function(jqXHR, textStatus, errorThrown) {
  //exibir mensagem de erro.
});

Answer 2

The problem with your code is that your table is called tabelaUploads, and you’re looking for a tbody in the body of this table here: $('#bodyTabelaUploads tbody'), which will return nothing.

Change $('#bodyTabelaUploads tbody') for $('#tabelaUploads tbody')

HOWEVER

I would like to point out that synchronous AJAX requests are already deprecated and should be avoided, as eventually they will probably be totally removed (many, many years from now).

JQuery himself warns us of this: