Reload in Table HTML

Navigation
1

Good afternoon. I have a table that loads some HTML stuff. I would like to reload it when deleting a device from the table. I have the following JavaScript function in my page. This function is in the delete button's onClick event. 

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

How to reload 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>
    
asked by anonymous 24.03.2016 / 19:22

2 answers

0

I have decided as follows. This is the JavaScript function: 

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

Change the following: 

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

So: 

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

And it does a pro click handler from the class bt-remover-equipamento , which excludes the line on 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);
    }
  });
}

It may need some tweaking (it's very likely), but the general idea is that.

    
24.03.2016 / 20:44
Formatting data and saving in txt with php Error Deploying Label on api google maps