When I clicked on the menu item of my application it always updated the page, I'm changing to update the pages via ajax however I'm having difficulty with functions with names based on the class event, example the delete function when I click it called the function of the previous page and the current page. Would you remove everything from the previous page? Example: I click on city page and after clicking on the Country page, the Open function loads the index, when I click the delete button it is called 2 times, the city index is no longer being shown.
function Open(url, descricao) {
// event.preventDefault();
url = '@Url.Content("~/")' + url;
$.ajax({
url: url,
type: 'GET',
success: function (response) {
console.log("s");
$('#principal').html($(response).find('#Conteudo2'));
window.history.pushState("object or string", descricao, url);
},
error: function () {
alert('Ocorreu um erro!');
}
});
}
$(document).on("click", ".btn-delete", function () {
var link = $(this).attr("id");
var removeItemEl = $(this);
confirm("Você tem certeza que deseja excluir o pais registro?",
function () {
$.ajax({
type: "POST",
url: "Pais/delete",
data: {
id: link
},
success: function (data) {
removeItemEl.closest("tr").remove();
},
error: function (data) {
alert("O País já foi utilizado, não é possível deletar o registro!");
}
})
}
, "Confirmação de exclusão");
});