Criando um site do zero com WordPress - #16 Busca com filtros no WordPress III

Na 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.