Reload in Table HTML

Asked

Viewed 588 times

1

Good afternoon. I have a table that I carry some equipment in HTML. I would like to reload it when deleting a device from the table. I have the following function in my Javascript page. This function is in the onClick event of the delete button.

function reloadNovoEquipamentoTable(){
      var element = document.getElementById('listNovoEquipamentosOrcamento');
      element.reload();}

How to re-load this table?

Ajax

function removeNovoEquipamento(equipamentoID, orcamentoID) {
    $.ajax({
        url: "actions/removeNovoEquipamento",
        method: "POST",
        data: "equipamentoID=" + equipamentoID + "&orcamentoID=" + orcamentoID,
        success: function (response) {
            alert('excluido com sucesso');
        },
        error: function (response) {
            alert(response);
        }
    });
}

Below is the table to list:

<table class="table table-striped table-condensed margin-top" id="listNovoEquipamentosOrcamento">
                                        <thead>
                                            <tr>
                                        <button type="button" class="btn btn-primary btn-modal" data-target="#modalNovoEquipamento" data-toggle="modal"><span class="glyphicon glyphicon-wrench"></span> Novo Equipamento</button>
                                        <th colspan="10" style="text-align: center"><h3>Lista de Novos Equipamentos</h3></th>
                                        </tr>
                                        <tr>
                                            <th>Item</th>
                                            <th>Qtd.</th>
                                            <th>Descrição</th>
                                            <th id="td-acoes">Ações</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody-novoEquipamento">

                                            <c:forEach items="${orcamento.listNovoEquipamentosOrcamento}" var="equipNovoOrcamento" varStatus="i">
                                                <tr>
                                                    <td>
                                                        ${fn:length(orcamento.listEquipamentosOrcamento)+ i.index+1}
                                                        <input type="hidden" required="true" name="equipamentoNovoID" value="${equipNovoOrcamento.id}"/>
                                                    </td>
                                                    <td><input id="qtd_${fn:length(orcamento.listEquipamentosOrcamento)+ i.index}" type="number" class="form-control" onchange="validaQuantidade(this);" value="${equipNovoOrcamento.quantidade}" placeholder="Qtd" min="1" required="true" name="quantidade"/></td>
                                                    <td><input type="text" name="descricao" class="form-control" value="${equipNovoOrcamento.descricao}" readonly="true" /></td>                                                        
                                                    <td><button type="button" onclick='removeNovoEquipamento(${equipNovoOrcamento.id},${orcamento.id});reloadNovoEquipamentoTable();' class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td>
                                                </tr>
                                            </c:forEach>
                                            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='total' colspan='2'></td><td></td></tr>
                                        </tbody>
                                    </table>
javascript html
Show 4 more comments

2 answers

0


I solved it as follows. This is the Javascript function:

function reloadNovoEquipamentoTable(index) {
    $("#tbody-novoEquipamento tr:eq(" + index + ")").remove();    
}

0

Exchange the following:

<button type="button" onclick='removeNovoEquipamento(${equipNovoOrcamento.id},${orcamento.id});
        reloadNovoEquipamentoTable();' class="btn btn-danger btn-sm">

That’s why:

<button type="button" data-equipamentoid="${equipNovoOrcamento.id}" 
          data-orcamentoid="${orcamento.id}" 
          class="btn btn-danger btn-sm bt-remover-equipamento">

And make an Handler pro click from the class bt-remover-equipamento, excluding the line in the event of success:

$('.bt-remover-equipamento').click(function() {
  var $this = $(this);
  var equipamentoID = $this.data('equipamentoid');
  var orcamentoID = $this.data('orcamentoid');
  $.ajax({
    url: "actions/removeNovoEquipamento",
    method: "POST",
    data: "equipamentoID=" + equipamentoID + "&orcamentoID=" + orcamentoID,
    success: function (response) {
        $this.parents('tr').remove();
        alert('excluido com sucesso');
    },
    error: function (response) {
        alert(response);
    }
  });
}

Maybe it needs some adjustments (it’s very likely), but the general idea is this.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.