Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Evitar Comportamento Padrão do Submit

Olá!

Consegui fazer o exercício, porém quando uso o filtro, ele joga a página sempre para cima, ao dar submit no form. No JS uso o event.preventDefault(), porém não estou conseguindo usar em conjunto com o PHP. Fiz da seguinte forma, com uso de Jquery:

idDoBotao.click(function(event) { event.preventDefault(); };

Porém ao chamar o código ele também inabilita todo o código mostrado na aula.

Alguém tem alguma ideia de como posso fazer o filtro de forma mais suave?

6 respostas

Alguém pode me ajudar?

alguém?

alguém?

Oi Renato, desculpa a demora, mas você pode mostrar o código pra gente entender melhor o que tá acontecendo?

Claro Wanderson! Eu usei o mesmo conceito da aula para criar esse código abaixo:

<?php
if( have_posts() ) {
    while( have_posts() ) {
        the_post();
        ?>   
            <div class="row">
                <div class="col-md-12">
                    <?php the_content(); ?>
                    <hr>
                </div>               
            </div>

            <?php
        }
    }
    ?>


<?php
    $queryTaxonomy = array_key_exists('categoria', $_GET);
?>

<?php $taxonomias = get_terms('categorias'); ?>
<form class="form-fornecedores" action="<?= bloginfo('url'); ?>/fornecedores">
    <div class="fornecedores-filtro-botao-container">
        <?php foreach($taxonomias as $taxonomia) { ?>
            <button class="fornecedores-filtro-botao" name="categoria" type="submit" value="<?= $taxonomia->slug; ?>">
                <strong class="text-align"><?= $taxonomia->name; ?></strong>
            </button>
        <?php } ?>
    </div>    
</form>

<div class="fornecedores-filtro-img-container">
    <?php

    if($queryTaxonomy) { 
        $filtrar = array(
            array(
                'taxonomy' => 'categorias',
                'field' => 'slug',
                'terms' => $_GET['categoria']
            )
        );
    }

    $args = array(
        'post_type' => 'fornecedores',
        'tax_query' => $filtrar
    );

    $loop = new WP_Query( $args );

    if( $loop->have_posts() ) { ?>

        <?php while( $loop->have_posts() ) {
            $loop->the_post();
        ?>
            <div class="fornecedores-filtro-img">
                <?php the_post_thumbnail(); ?> 
            </div>
        <?php
            }
        }    
        ?>

    </div>

Quando eu clico no botão com classe "fornecedores-filtro-botao", ele faz o filtro corretamente, mas ele joga a página para cima, que é o comportamento padrão do submit. Eu vi algo na net que a solução para isso não acontecer era fazer uma requisição ajax para o db do wp, ai a página ficaria "parada" enquanto ele faz a requisição.

Se o ajax for a única forma, há um jeito de usar as funções prontas do wp para fazer isso? Ou tem que fazer na mão porque elas não existem no wp?

solução!

Oi Renato, o WordPress tem algumas funções que ajudam no ajax sim, principalmente em plugins, mas nada que você não possa usar nos temas.

Tem um link da documentação falando um pouco sobre: https://codex.wordpress.org/AJAX_in_Plugins

Veja que apesar de fornecerem algumas coisas, muito do que é feito, é na mão mesmo. :/

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software