Criando um site do zero com WordPress - #16 Busca com filtros no WordPress III
22/03/2018Na terceira e última aula de pesquisa com filtro no WordPress, iremos realizar o ajax que fará a busca com filtro sem refresh da página.
Filtro sem refresh de página no WordPress
Para realizar a busca sem refresh, faremos uso do ajax com jQuery.
jQuery(document).ready(function(){
var Root="http://"+document.location.hostname+"/";
jQuery("#FiltroBusca").on("submit",function(event){
event.preventDefault();
var Dados=jQuery(this).serialize();
jQuery.ajax({
url: Root+"controllerFiltro",
method: "post",
dataType: "html",
data: Dados,
success: function(Dados){
jQuery('#ResultadoBuscaPosts').empty().html(Dados);
}
});
});
});
No código acima, assim que o formulário for enviado, será previnida a ação padrão de atualizar a página e os dados serão enviados via ajax. A div #ResultadoBuscaPosts será limpa (empty()) e na sequência será alimentada com os dados provenientes do nosso PHP.
Na próxima aula, iniciamos a configuração dos nossos posts internos.
Posts Relacionados
Criando um site do zero com WordPress - #15 Busca com filtros no WordPress II
Nessa vídeo-aula vamos implementar o PHP que irá realizar o filtro de posts no banco de dados. Iremos também linkar o jQuery no WP.
Criando um site do zero com WordPress - #17 Criando o arquivo single.php
Nessa vídeo-aula vamos criar nosso arquivo single.php, que é o arquivo responsável pela estilização interna do nosso post.