I have this modal, and I have the delete function, I need the data to be deleted and updated, without closing the modal. Here's how the code looks: This is the modal:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fornecedores Vinculados</h4>
</div>
<div class="modal-body">
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Fornecedores</th>
<th style="text-align:right"><a data-toggle="modal" data-target="#myModalAdd" title="Adicionar Novo Fornecedor" class="btn btn-info"><i class="fa fa-plus"></i></a></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ProdutosFornecedores)
{
<tr>
<td>@item.FornecedorProduto.Nome</td>
<td align="right">
<a href="#" onclick="ExluirItem(@item.Id);" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the delete function:
function ExluirItem(idItem) {
var url = "/Produto/ExcluirItens";
$.ajax({
url: url,
data: { id: idItem },
datatype: "json",
type: "POST",
success: function (data) {
if (data.resultado) {
var linha = "#tr" + idItem;
$(linha).fadeOut(500);
//location.reload();
abreModal();
}
}
})
}
And here is the delete controller:
[HttpPost]
public ActionResult ExcluirItens(int id)
{
var result = false;
var item = db.ProdutosFornecedores.Find(id);
if (item != null)
{
db.ProdutosFornecedores.Remove(item);
db.SaveChanges();
result = true;
}
return Json(new { Resultado = result });
}
How can I make it to be updated, without closing the modal, or refreshing the page?
This is the OpenModal () function
function abreModal() {
$('#myModal').modal('show');
}