Table não aparece dentro do Modal

03/08/2020

0

Eu estou tentando fazer uma table dentro de um modal, quando o modal é aberto a table aparece sem informações e depois desaparece, e apartir daí a modal fica vazia.
Vou deixar abaixo o código da modal com a table dentro:

<div class="modal" tabindex="-1" role="dialog" id="modalContato">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Números</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="corpoTelefone">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Ddd</th>
<th scope="col">Número</th>
<th scope="col">Tipo</th>
</tr>
</thead>
<tbody id="corpoTabelaInfo">
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="align-self-end ml-auto">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>

Abaixo a função que cria as linhas da table:

function createRowTableContactInfo (telefone){

let tr = document.createElement('tr')

let tdDdd = document.createElement('td');
let tdTel = document.createElement('td');
let tdType_phone = document.createElement('td');

tdDdd.innerHTML = telefone.ddd
tdTel.innerHTML = telefone.tel
tdType_phone.innerHTML = telefone.type_phone

tr.append(tdDdd)
tr.append(tdTel)
tr.append(tdType_phone)

document.getElementById('corpoTabelaInfo').append(tr);
}

Função que inicia o modal:

function initEventListinerModal(){
$('body').on('click','.btn-info',function(e){
console.log(e.target.id)
let contact_id = e.target.id
fetch(`http://localhost:8000/api/phone/$`,{
method:'GET',
})
.then(data => data.json())
.then(data => {
document.getElementById('corpoTelefone').innerHTML = '';
data.telefones.forEach(telefone => {
createRowTableContactInfo(telefone)
})
})
$('#modalContato').modal('show')
})
}
Wilker Neves

Wilker Neves

Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar