2
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;\">×</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(){
},
});
});
});
Perfect, great idea. I created a function to load Flow() and in the insert and delete Success I called the function. thank you very much ;)
– Ramon Saldanha