Bonjour,

Je souhaite créer un systeme de trie pour classer mes custom-post-type (hotesses) avec pagination et tou ça en ajax
J'utilise des checkbox pour les taxonomies (dispo et langues)
Ma requète ajax fontionne très bien avec les checkbox
par contre quand je veux utiliser la pagination au lieu de rester sur ma page
http://localhost:8888/monsite/nos-hotesses-acceuil/
il m'ouvre
http://localhost:8888/monsite/wp-admin/admin-ajax.php?action=hotesse_filter&dispos=6&langues&paged=2
et qui m'affiche les bonnes infos mais je ne suis plus sur cette page http://localhost:8888/monsite/nos-hotesses-acceuil/

Si je regarde la console ces 2 éléments ont disparu le referer et x-Requested-With
Referer:http://localhost:8888/monsite/nos-hotesses-acceuil/
X-Requested-With:XMLHttpRequest

Je pense que ça vient de la fonction paginate_links mais je ne trouve pas

fichier hotesse_filter

<?php
//Add Ajax Actions
add_action('wp_ajax_hotesse_filter', 'ajax_hotesse_filter');
add_action('wp_ajax_nopriv_hotesse_filter', 'ajax_hotesse_filter');

function ajax_hotesse_filter(){
    //RECUPERE DONNEES AJAX    
    $query_data = $_GET;
    $dispos_terms = ($query_data['dispos']) ? explode(',',$query_data['dispos']) : false;
    $langues_terms = ($query_data['langues']) ? explode(',',$query_data['langues']) : false;
    $paged = ($query_data['paged']) ? intval($query_data['paged']) : 1;

    //VERFIE LES TAXO
    $tax_query = [];
    if ($dispos_terms)
    {
        $tax_query[] =  array(
                'taxonomy' => 'disponibilites',
                'field' => 'id',
                'terms' => $dispos_terms,
                'operator' => 'AND'
            );
    }
    if ($langues_terms)
    {
        $tax_query[] =  array(
                'taxonomy' => 'langues',
                'field' => 'id',
                'terms' => $langues_terms,
                'operator' => 'AND'
            );
    }

    //ARGUMENTS
    $hotesses_args = array(
    'post_type' => 'hotesses',
    'posts_per_page' => 3,
    'paged' => $paged,
    'tax_query' => $tax_query
    );

    $hotesses_loop = new WP_Query($hotesses_args);
    if( $hotesses_loop->have_posts() ): ?>
      <?php
        while( $hotesses_loop->have_posts() ): $hotesses_loop->the_post(); ?>
            <div class="hotesse">
            <?php
            if( get_field('nom_hotesse')) : ?>
               <a href="<?php echo get_permalink(); ?>" title="<?php echo get_field('nom_hotesse');?>" >
                <?php echo get_the_post_thumbnail( $post->ID, 'hotesse-thumb', array('class' => '')); ?>
              </a>
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_field('nom_hotesse');?>" >
                  <span><?php echo get_field('nom_hotesse');  ?></span>
                </a>
              </div>
            <?php
            endif;
        endwhile;
            echo '<div class="genre-filter-navigation">';
                    $args = array(
                        'base' => esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( '', get_pagenum_link( 999999999, false ) ) ) ),
                        'format' => '?paged=%#%',
                        'current' => max( 1, $paged ),
                        'total' => $hotesses_loop->max_num_pages
                    );

                    echo paginate_links($args);
                    echo '</div>';
        endif;
        wp_reset_postdata();
        die();
}

fichier JS

jQuery(function($)
{

get_hotesses();

$('.filtre').on('click','.control--checkbox', function(e){
  e.preventDefault();
        var input = $(this).find('input');

        if (input.is(':checked'))
        {
            input.prop('checked', false);
            $(this).removeClass('selected');
        } else {
            input.prop('checked', true);
            $(this).addClass('selected');
        }
        get_hotesses();
    });

// RECUPERE DISPOS
    function getSelectedDispos(){       
    var dispos = []; 

        $("#dispos input:checked").each(function() {
            var val = $(this).val();
            dispos.push(val); 
        });     

        return dispos; 
      }

// RECUPERE LANGUES
    function getSelectedLangues(){    
    var langues = []; 
        $("#langues input:checked").each(function() {
            var val = $(this).val();
            langues.push(val); 
        });     

          return langues; 
      }

//PAGINATION
    $('.genre-filter-navigation').on('click','a', function(e){
        e.preventDefault();
        var url = $(this).attr('href'); 
        var paged = url.split('&paged=');
        get_hotesses(paged[1]);
    });

//LISTE GOTESSE AJAX
    function get_hotesses(paged){
      var paged_value = paged;
      var ajax_url = ajax_genre_params.ajax_url;
      $.ajax({
          type: 'GET',
          url: ajax_url,
          data: {
              action: 'hotesse_filter',
              dispos: getSelectedDispos, 
              langues: getSelectedLangues,
              paged: paged_value
          },
          beforeSend: function ()
          {
              $('.ajax-post-loader img').fadeIn("slow");
          },
          success: function(data)
          {
              //Hide loader here
              $('#hotesses-results').html(data).hide().fadeIn();

          },
          error: function()
          {
               //If an ajax error has occured, do something here...
              $("#hotesses-results").html('<p>Erreur</p>');
          }
      });
    }

});

Mon template de page

<?php
/*
Template Name: Pages liste hotesses
*/
?>
<?php get_header(); ?>
<div class="site-content">
 <div class="fond_black">
        <div class="grid">
           <div class="unit whole alignleft">
               <h1>Nos hôtesses d'accueil</h1>
           </div>
        </div>
</div>
<div class="grid">
    <div class="unit w-1-3">
        <div class="filtre">
            <h2>Disponibilité</h2>
            <div id="dispos">
                <?php 
               $dispos = get_terms('disponibilites');

                      foreach( $dispos as $dispo)
                      {
                          $dispo_id = $dispo->term_id;
                          $dispo_name = $dispo->name;

                          echo '
                          <label class="control control--checkbox">
                            '.$dispo_name.'
                            <input type="checkbox"  name="filter_dispo[]" value="'.$dispo_id.'" />
                            <div class="control__indicator"></div>
                          </label>';

                      }

              ?> 
            </div>
            <h2>Langues</h2>
            <div id="langues">
              <?php 
               $langues = get_terms('langues');
                      foreach( $langues as $langue)
                      {
                          $langue_id = $langue->term_id;
                          $langue_name = $langue->name;

                           echo '<label class="control control--checkbox">
                            '.$langue_name.'
                            <input type="checkbox"  name="filter_langue[]" value="'.$langue_id.'"/>
                            <div class="control__indicator"></div>
                          </label>';
                      }
              ?> 
            </div>
        </div>
    </div>
    <div class="unit w-2-3">
        <div class="hotesses" id="hotesses-results"></div>
    </div>
</div>
<?php get_footer(); ?>

2 réponses


ça fait bcp de code à analyser là :( tu peux pas simplifier le pb ?

lgm243
Auteur

J'ai trouvé la solution j'ai rajouté ma fonction de pagination ajax dans le success: function(data).
Je remets le code si ça peut servir à certains.

Mon js

//PAGINATION
function pagination(){
  $('.filter-navigation a').click(function(e){
      e.preventDefault();
       var url = $(this).attr('href'); 
        var page= url.split('&paged='); //récupère le numero de page apres paged=
        get_hotesses(page[1]); 
    });
}

//LISTE GOTESSE AJAX
    function get_hotesses(page){
      var paged_value = page;
      getSelectedDispos();
      getSelectedDispos();
      var ajax_url = ajax_genre_params.ajax_url;
      $.ajax({
          type: 'GET',
          url: ajax_url,
          data: {
              action: 'hotesse_filter',
              dispos: getSelectedDispos, 
              langues: getSelectedLangues,
              paged:paged_value
          },
          beforeSend: function ()
          {
              $('.ajax-post-loader img').fadeIn("slow");
          },
          success: function(data)
          {
              $('#hotesses-results').html(data).hide().fadeIn();
              pagination(); //appel pagination
          },
          error: function()
          {
              $("#hotesses-results").html('<p>Erreur</p>');
          }
      });
    }

hostesse_filter.php

<?php
function ajax_hotesse_filter(){
    //RECUPERE DONNEES AJAX
    $query_data = $_GET;
    $dispos_terms = ($query_data['dispos']) ? explode(',',$query_data['dispos']) : false;
    $langues_terms = ($query_data['langues']) ? explode(',',$query_data['langues']) : false;
    $paged = ($query_data['paged']) ? intval($query_data['paged']) : 1;
    //VERFIE LES TAXO
    $tax_query = [];
    if ($dispos_terms)
    {
        $tax_query[] =  array(
                'taxonomy' => 'disponibilites',
                'field' => 'id',
                'terms' => $dispos_terms,
                'operator' => 'AND'
            );
    }
    if ($langues_terms)
    {
        $tax_query[] =  array(
                'taxonomy' => 'langues',
                'field' => 'id',
                'terms' => $langues_terms,
                'operator' => 'AND'
            );
    }
    //ARGUMENTS
    $hotesses_args = array(
    'post_type' => 'hotesses',
    'posts_per_page' => 4,
    'paged' => $paged,
    'tax_query' => $tax_query,
    'order' => 'ASC'
    );
    $hotesses_loop = new WP_Query($hotesses_args);
    if( $hotesses_loop->have_posts() ): ?>
      <?php
        while( $hotesses_loop->have_posts() ): $hotesses_loop->the_post(); ?>
            <div class="hotesse">
            <?php
            if( get_field('nom_hotesse')) : ?>
               <a href="<?php echo get_permalink(); ?>" title="<?php echo get_field('nom_hotesse');?>" >
                <?php echo get_the_post_thumbnail( $post->ID, 'hotesse-thumb', array('class' => '')); ?>
              </a>
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_field('nom_hotesse');?>" >
                  <span><?php echo get_field('nom_hotesse');  ?></span>
                </a>
              </div>
            <?php
            endif;
        endwhile;    
            echo '<div class="filter-navigation">';
                    $args = array(
                        'base' => esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( '', get_pagenum_link( 999999999, false ) ) ) ),
                        'format' => '?paged=%#%',
                        'current' => $paged,
                        'total' => $hotesses_loop->max_num_pages
                    );
                    echo paginate_links($args);
                    echo '</div>';
        endif;
        wp_reset_postdata();
        die(1);
}
//AJOUT Ajax WORDPRESS
add_action('wp_ajax_hotesse_filter', 'ajax_hotesse_filter');
add_action('wp_ajax_nopriv_hotesse_filter', 'ajax_hotesse_filter');