Ajax Reload div

Question

I have a page that displays with Ajax database information inside the div #addremoveprod, so far all right, everything is being printed perfectly.

I have also in a part of the code a function of deleting the queries made in the database (also with ajax), which is working perfectly. only that after I click to delete, I want the div #addremoveprod, update itself, without me needing the F5 on the page.

I’ve tried everything, follow the code:

$(document).ready(function(){

var id = $('input[name=\'voucher-id\']').val();

// $.get('/natal-hospedagem/admin/voucher/'+id+'/getRequest', function(data){ 
//     console.log(data); 
// });
var tableInsert2 = "";

var getRequestVouchers = $.ajax({
    type: 'GET',
    url: '/natal-hospedagem/admin/voucher/'+id+'/getRequest',
    success: function(data){
        $.each(data,function(key, value){

            var proximo = value['id'];

            tableInsert2 += 
            "<div id=\"prod-" + proximo + "\">"+

                "<div class=\"panel panel-default col-lg-11\" style=\"padding:0px;\" >" +
                "<table class=\"table table-striped table-bordered table-condensed no-padding-table\">"+
                "<tbody>"+      
                "<tr id=\"voucher-carrinhos-"+proximo+"\" data-proid=\"" + proximo + "\">"+
                    "<td>"+
                    "<div class=\"vertical-input-group\">"+
                    "<input name=\"voucher_carrinhos[" + proximo + "][titulo_produto]\" value='"+value['titulo_produto']+"' type=\"text\" class=\"form-control\" size='40' placeholder=\"Titulo do serviço\" />"+
                    "</div>"+
                    "</td>"+
                    "<td class=\"col-lg-2\"><input  name=\"voucher_carrinhos[" + proximo + "][quantidade]\" value='"+value['quantidade']+"' type=\"text\" class=\"form-control\" size=\"4\" placeholder=\"1\" /></td>"+
                    "<td class=\"col-lg-2\"><input  name=\"voucher_carrinhos[" + proximo + "][valor]\" value='"+value['valor']+"' type=\"text\" class=\"form-control\" size='5' placeholder=\"200,00\" /></td>"+
                "</tr>"+
                "<tr>"+
                    "<td colspan=\"3\">"+
                        "<input name=\"voucher_carrinhos[" + proximo + "][descricao_detalhada]\" value='"+value['descricao_detalhada']+"' type=\"text\" class=\"form-control\" size='40' placeholder=\"Descrição detalhada\" />"+
                    "</td>"+
                "</tr>"+
                "</tbody>"+
                "</table>"+

                "</div>"+

                "<div class=\"col-lg-1 col-xs-12\">"+
                    "<span role=\"button\" class=\"btn btn-primary btn-xs btn-circle  pull-right\" data-acao=\"excluir-carrinho\" data-id='"+value['id']+"' id=\"prod-"+proximo+"\" >"+
                        "<span  style=\"font-size:1.5em;\">&times;</span>"+
                    "</span>"+
                "</div>"+

            "</div>";



        });

        $('#addremoveprod').append(tableInsert2);
    }

});

$(document).on("click", "span[data-acao=\"excluir-carrinho\"]", function(){
    console.log($(this).attr('data-id'));

    $.ajax({
        type: 'POST',
        url: '/natal-hospedagem/admin/voucher/'+$(this).attr('data-id')+'/excluir',
        success: function(){
        },
    });
});

});

Answer 1

Ever tried to put the same Function you used to return the data, in . ajax I deleted? In Success: Function(){} it is empty replace with the same code as used in getRequestVouchers Success Function(date){ $. each(date,Function(key, value){ ....