0

Good morning everyone, I am trying to filter posts using ajax by custom fields and custom taxonomy values from a custom post type. Ajax request works fine, It retrieves all needed data to display, but I am not able to handle pagination links.

This is my JQuery request code:

$('#boton-filtrar').click(function (e){
  let filter = $('#formulario-filtro');

  $.ajax({
    url: filter.attr('action'),
    data: filter.serialize(), 
    type: filter.attr('method'),
    beforeSend: function() {
      $('#boton-filtrar').prop('disabled', true);
      $('#boton-filtrar').html('<span class="spinner-border spinner-border-sm"></span>Buscando retiros...');
    },
    success: function(data) {
      mostrar_filtros(false);
      $('#despliegue-retiros').html(data); 
      $('#boton-filtrar').prop('disabled', false);
      $('#boton-filtrar').html('<span>Aplicar filtros</span>');
    },
    error:function(data) {
      console.error(data);
    }
  });
  return false;
});

And this is the main function:

function filtrar_posts() {
$peticion_fecha_inicio = isset($_POST['fecha-inicio']) && !empty($_POST['fecha-inicio']) 
                    ? date("d-m-Y", strtotime($_POST['fecha-inicio'])) : '';
$peticion_fecha_fin = isset($_POST['fecha-fin']) && !empty($_POST['fecha-fin']) 
                    ? date("d-m-Y", strtotime($_POST['fecha-fin'])) : '';
$terminos_categoria = isset($_POST['categoria']) && !empty($_POST['categoria']) 
                    ? $_POST['categoria'] : get_terms('categoria-retiro', array('get' => 'all', 'fields' => 'ids'));
$terminos_provincia = isset($_POST['provincia']) && !empty($_POST['provincia']) 
                    ? $_POST['provincia'] : get_terms('provincia', array('get' => 'all', 'fields' => 'ids'));
$terminos_ciudad = isset($_POST['ciudad']) && !empty($_POST['ciudad']) 
                    ? $_POST['ciudad'] : get_terms('ciudad', array('get' => 'all', 'fields' => 'ids'));
$terminos_alojamiento = isset($_POST['alojamiento']) && !empty($_POST['alojamiento']) 
                    ? $_POST['alojamiento'] : get_terms('alojamiento', array('get' => 'all', 'fields' => 'ids'));

set_query_var( 'paged', isset($_POST['paginado']) && !empty($_POST['paginado']) ? $_POST['paginado'] : 1 );
$paginado = get_query_var( 'paged' );

$dia_fecha_inicio = ''; 
$mes_fecha_inicio = ''; 
$anio_fecha_inicio = ''; 
$fecha_inicio = '';

$dia_fecha_fin = ''; 
$mes_fecha_fin = ''; 
$anio_fecha_fin = ''; 
$fecha_fin = '';

if ($peticion_fecha_inicio) {
    $dia_fecha_inicio = substr($peticion_fecha_inicio, 0, 2);
    $mes_fecha_inicio = substr($peticion_fecha_inicio, 3, 2);
    $anio_fecha_inicio = substr($peticion_fecha_inicio, 6, 4);

    $fecha_inicio = $anio_fecha_inicio . $mes_fecha_inicio . $dia_fecha_inicio;
}

if ($peticion_fecha_fin) {
    $dia_fecha_fin = substr($peticion_fecha_fin, 0, 2);
    $mes_fecha_fin = substr($peticion_fecha_fin, 3, 2);
    $anio_fecha_fin = substr($peticion_fecha_fin, 6, 4);

    $fecha_fin = $anio_fecha_fin . $mes_fecha_fin . $dia_fecha_fin;
}

$meta_query = '';

if ($peticion_fecha_inicio && $peticion_fecha_fin) {
    $meta_query = array(
        'relation' => 'AND',
        array(
            'key'       => 'fecha_de_inicio',
            'compare'   => '>=',
            'value'     => $fecha_inicio,
        ),
        array(
            'key'       => 'fecha_de_finalizacion',
            'compare'   => '<=',
            'value'     => $fecha_fin,
        )
    );
}

if ($peticion_fecha_inicio && !$peticion_fecha_fin) {
    $meta_query = array(
        'relation' => 'AND',
        array(
            'key'       => 'fecha_de_inicio',
            'compare'   => '=',
            'value'     => $fecha_inicio,
        )
    );
}

if (!$peticion_fecha_inicio && $peticion_fecha_fin) {
    $meta_query = array(
        'relation' => 'AND',
        array(
            'key'       => 'fecha_de_finalizacion',
            'compare'   => '=',
            'value'     => $fecha_fin,
        )
    );  
}

$args = array(
    'post_type' => 'retiro',
    'posts_per_page' => 4,
    'paged' => $paginado,
    'meta_query' => $meta_query,
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'categoria-retiro',
            'field'    => 'term_id',
            'terms'    => $terminos_categoria
        ),
        array(
            'taxonomy' => 'provincia',
            'field'    => 'term_id',
            'terms'    => $terminos_provincia
        ),
        array(
            'taxonomy' => 'ciudad',
            'field'    => 'term_id',
            'terms'    => $terminos_ciudad
        ),
        array(
            'taxonomy' => 'alojamiento',
            'field'    => 'term_id',
            'terms'    => $terminos_alojamiento
        )
    ),
);
$query = new WP_Query( $args );

$resultado = '';

if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();
        $id = get_the_ID();
        $ciudad = get_the_terms($id, 'ciudad');
        $provincia = get_the_terms($id, 'provincia');

        $formato = 'd F, Y';
        $fecha = strtotime(get_field('fecha_de_inicio'));
        $fechasalida = date_i18n($formato, $fecha);

        $fechaRetorno = strtotime(get_field('fecha_de_finalizacion'));
        $fechaRetorno = date_i18n($formato, $fechaRetorno);

        $resultado .= '<div class="col-lg-4 col-md-6 col-sm-12 pb-4">';
        $resultado .= '  <div class="card">';
        $resultado .= '    <div class="imagen-destacada">';
        $resultado .=            get_the_post_thumbnail($id, 'retirosDestacada', array('class' => 'img-fluid card-img-top'));
        $resultado .= '      <a class="mas-info" href="'. get_the_permalink() .'">';
        $resultado .= '        <img class="img-fluid" src="' . get_stylesheet_directory_uri() . '/img/mas-informacion-retiros.png">';
        $resultado .= '      </a>';
        $resultado .= '    </div>';
        $resultado .= '    <div class="card-body">';
        $resultado .= '      <a id="enlaces-pagina-retiros" href="' . get_the_permalink() . '">';
        $resultado .= '        <h3 id="titulo-pagina-retiros" class="pb-2 card-title"> ' . get_the_title() . '</h3>';
        $resultado .= '      </a>';
        $resultado .= '      <p><i class="fas fa-map-marker-alt pr-2"></i>' . $ciudad[0]->name .', ' .  $provincia[0]->name . '</p>';
        $resultado .= '      <p><i class="fas fa-calendar-check pr-2"></i>' . $fechasalida . '</p>';
        $resultado .= '      <p><i class="fas fa-calendar-times pr-2"></i>' . $fechaRetorno . '</p>';
        $resultado .= '      <p><i class="fas fa-money-bill-alt pr-2"></i>' . get_field('precio') . '</p>';
        $resultado .= '    </div>';
        $resultado .= '  </div>';
        $resultado .= '</div>';
    endwhile;

    $resultado .= '<ul class="paginador pt-4 text-center">';

    if (get_previous_posts_link('&nbsp;&nbsp;Anterior', $query->max_num_pages)) {
        $resultado .= '  <li><button type="button" class="btn btn-primary btn-sm mr-4 btn-paginado"><i class="fas fa-arrow-alt-circle-left"></i>' . get_previous_posts_link('&nbsp;&nbsp;Anterior', $query->max_num_pages) . '</button></li>';
    }

    if (get_next_posts_link('Siguiente&nbsp;&nbsp;', $query->max_num_pages)) {
        $resultado .= '  <li><button type="button" class="btn btn-primary btn-sm btn-paginado">' . get_next_posts_link('Siguiente&nbsp;&nbsp;', $query->max_num_pages) . '<i class="fas fa-arrow-alt-circle-right"></i></button></li>';
    }

    $resultado .= '</ul>';

    wp_reset_postdata();
    echo $resultado;
else :
    echo 'No se han encontrado posts';
endif;

die();
}
add_action('wp_ajax_filtrar_posts', 'filtrar_posts'); 
add_action('wp_ajax_nopriv_filtrar_posts', 'filtrar_posts');

This is how I get page number

$('.btn-paginado').click(function (e) { 
  e.preventDefault();
  let url = $(this).find('a').attr('href');
  let page = 0;

  if (url.indexOf('=') != -1) {
    page = url.substring(url.indexOf('=') + 1, url.length);
  } else {
    let cleanUrl = url.substring(0, url.length - 1);
    page = cleanUrl.substring(cleanUrl.lastIndexOf('/') + 1, cleanUrl.length);
  }
  $('#paginado').val(page);
  $('#boton-filtrar').click();
});

Initial state. Showing 4 posts per page having 5 posts enter image description here

First click state. It shows last post, but next button appears. It shuld be prev button. enter image description here

By using this code, pagination is not working. How can I handle these links?

Thanks In advance

  • What exactly about pagination is not working? is the pagination html not showing up at all? or are the links just not working? – mrben522 Mar 19 at 15:09
  • @mrben522 links are shown, but, to start, link hrefs are build with ajax url. It does not matter because I prevent default behavior on click, where I catch page parameter which is passed as form data. On the other hand,consider that I have 5 posts and showing 4 per page. It works on first request, but it retrieves next button instead of previous. I´m trying to prevent it by if statements. I´m updating my post with more javascript code – adeva 2006 Mar 19 at 15:21
  • One thing is get_prev_posts_link does not take a second argument (where you have $max_num_pages). get_next_posts_link does take it, so that part should be fine. – tmdesigned Mar 19 at 16:07
  • @tmdesigned i have removed the second parameter and it is still not working. There must be something wrong in the query. It ablealso does not show previous and next links when it has to. Links also have a post behaviour. I am not able to prevent it – adeva 2006 Mar 19 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.