Requesting ajax with append before opening modal

Question

Requesting ajax with append before opening modal

Navigation

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

0

For some reason I'm not able to make this append 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 is an asynchronous method, but I am using async: false.

Does this method be asynchronous, does the modal open before, and I do not see the line being added? OBS: console.log (e) returns results !!

javascript ajax bootstrap

asked by anonymous 31.10.2017 / 19:26

2 answers

1

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 not return anything.

Change% with% by% with%

BUT

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

jQuery itself warns us of this:

31.10.2017 / 19:40

Error: "can not convert 'int *' to 'int **" Consume webservice of address queries of a given city

score 1 · Accepted Answer

First, async: false is always a bad idea. The $.ajax returns a promise , so open your modal in the continuation of it.

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.
});