Delete com jQuery Ajax
Removendo conteúdo com o Ajax é uma ferramenta útil para ter em qualquer kit de web designers. Usando algumas linhas de jQuery podemos remover um div e, simultaneamente, remover um registro do banco de dados com Ajax. No download e demonstração você verá uma pequena cruz vermelha à direita de cada comentário. Clicar na cruz irá remover o comentário div com um slide up de animação que irá remover a div. clique na imagem abaixo para conferir o demo.
O Código
Começamos a escrever a função para simplesmente esconder o nosso mensagem do DIV carregado que é usado como uma representação visual para o usuário quando vamos excluir um comentário.
[sourcecode language=”javascript”]
$(document).ready(funcion() {)
$(‘#load’).hide();
});
[/sourcecode]
Em seguida, defina a variável ‘commentContainer “, que é definida para representar o elemento pai’.delete ‘que é a div’.box”, como mostra na imagem abaixo.
var commentContainer = $(this).parent();
[/sourcecode]
‘Id’ A variável é, então, definido com o valor do id botão excluir que poderia ser o ID da linha no banco de dados que você deseja excluir. Este é então enviada para o delete.php página. uma vez que a solicitação do Ajax foi feita e uma resposta tem sido reconhecido que, em seguida, deslizar para cima e remova ‘caixa’. a div e fade out o carregador. Finalmente ‘return false; “é adicionado ao final da função, a fim de parar a página de refrescante, como estamos usando um” tag a’.
$(function() {
$(".delete").click(function() {
$(‘#load’).fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = ‘id=’+ id ;
$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function(){
commentContainer.slideUp(‘slow’, function() {$(this).remove();});
$(‘#load’).fadeOut();
}
});
return false;
});
});
[/sourcecode]
Deixei a página delete.php para você adicionar o seu script de conexão próprio banco de dados e consulta, a fim de usar o código para suas próprias necessidades. Se entretanto tiver alguma dúvida sobre como configurar isso por favor me avise abaixo.
O código completo junto com as imagens está disponível para download abaixo.
Para ver o funcionamento click aqui ou faça o download clicando aqui.