web-dev-qa-db-fra.com

Charger des catégories avec ajax

Je n'ai pas de lien ou de démonstration à montrer car je travaille localement

J'ai des articles de nouvelles avec différentes catégories.

Je veux montrer les catégories sous forme de boutons.

Lorsque vous cliquez sur une catégorie, je souhaite charger ces publications en utilisant ajax afin de ne pas recharger la page.

Les boutons de catégories

    <ul>

      <?php

        $cat_args = array(
          'orderby'     => 'name',
          'order'       => 'ASC',
          'hide_empty'  => 1
        );


        $cats = get_categories($cat_args);

        foreach($cats as $cat){
          echo '<li><a href="#" data-slug="' . $cat->term_id . '" class="js-category-button">' . $cat->name . '</a></li>';
        }

        //echo '<pre>'; print_r($cats); echo '</pre>';

      ?>

     </ul>

Le jQuery

    $('.js-category-button').on('click', function(e){
      e.preventDefault();
      var catID = $atj(this).data('slug');
      var ajaxurl = 'http://my-site.co.uk <?php bloginfo("wpurl");?>/wp-admin/admin-ajax.php';
        $atj.ajax({
            type: 'POST',
            url: ajaxurl,
            dataType: 'jsonp',
            crossDomain : true,
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                $atj(".the-news").html(response);
                return false;
            }
        });
    })

La requête php dans functions.php

    add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
    add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

    function prefix_load_cat_posts () {
      $cat_id = $_POST[ 'cat' ];

      $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 3,
        'order' => 'DESC'
      );

      $posts = get_posts( $args );

      ob_start ();

      foreach ( $posts as $post ) {
        setup_postdata( $post ); ?>

        <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
          <h1 class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

          <div id="post-content">
          <?php the_excerpt(); ?>
        </div>

        </div>

      <?php } wp_reset_postdata();

      $response = ob_get_contents();
      ob_end_clean();

      echo $response;

    }

Les catégories apparaissent, lorsque je clique dessus, la console me donne 502 Erreur de proxy (l'hôte n'a pas été trouvé.)

Quelqu'un peut-il voir ce que je fais mal ou comment résoudre ce problème?.

Mettre à jour

J'ai le code qui fonctionne partiellement maintenant mais j'ai toujours des problèmes

Mon js est actuellement dans un fichier js séparé

La seule façon pour que je fonctionne est d'utiliser l'URL du site pour ajaxurl

  $atj('.js-category-button').on('click', function(e){
    e.preventDefault();
    var catID = $atj(this).data('slug');
    var ajaxurl = 'http://mysite.co.uk/wp-admin/admin-ajax.php';
      $atj.ajax({
          type: 'POST',
          url: ajaxurl,
          crossDomain : true,
          //dataType: 'jsonp',
          //contentType: "text/html",
          dataType: 'html',
          data: {"action": "load-filter", cat: catID },
          success: function(response) {
              $atj(".the-news").append(response);
              return false;
          }
      });
  })

Mon script php est dans functions.php

Je pense qu'il ne devrait y avoir qu'une seule balise dans functions.php, donc je ne voulais pas sortir du php dans la fonction pour créer le balisage html. C’est la raison pour laquelle j’essaie d’ajouter tout cela à la variable $ response qui est ensuite répercutée.

  add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
  add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

  function prefix_load_cat_posts () {

    global $post;

    $cat_id = $_POST[ 'cat' ];

    $args = array (
      'cat' => $cat_id,
      'posts_per_page' => 3,
      'order' => 'ASC'
    );


    $cat_query = new WP_Query($args);

    if($cat_query->have_posts()) :
      while($cat_query->have_posts()) :
        $cat_query->the_post();


      $response = '<div class="the-post">';
      $response .= '<h1 class="the-title">';
      $response .= '<a href="#">'. the_title() .'</a>';
      $response .= '</h1>';
      $response .= '<p>'. the_content().'</p>';
      $response .= '</div>';


      echo $response;

      endwhile; 

      endif; 

      wp_reset_postdata(); 

      die(1); 
  }

Ce genre de travaux. Je reçois une sortie html avec le titre de l'article mais elle se trouve en dehors du html et je ne peux pas en afficher le contenu.

  add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
  add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

  function prefix_load_cat_posts () {

    global $post;

    $cat_id = $_POST[ 'cat' ];

    $args = array (
      'cat' => $cat_id,
      'posts_per_page' => 3,
      'order' => 'ASC'
    );


    $cat_query = new WP_Query($args);

    if($cat_query->have_posts()) :
      while($cat_query->have_posts()) :
        $cat_query->the_post();


      $response = '<div class="the-post">';
      $response .= '<h1 class="the-title">';
      $response .= '<a href="#">'. the_title() .'</a>';
      $response .= '</h1>';
      $response .= '<p>'. the_content().'</p>';
      $response .= '</div>';


      echo $response;

      endwhile; 

      endif; 

      wp_reset_postdata(); 

      die(1); 
  }

Toute aide pour que cela fonctionne serait grandement appréciée.

categoriesajax
3
user668499

L'erreur dit tout, vous envoyez la demande à un hôte invalide.

Change ça:

 var ajaxurl = 'http://my-site.co.uk <?php bloginfo("wpurl");?>/wp-admin/admin-ajax.php';

À:

 var ajaxurl = "<?php echo esc_js( admin_url( 'admin-ajax.php' ) ) ?>";

Note : d'après votre code et votre description, je suppose que vous générez le code jQuery dans PHP et qu'il ne se trouve pas dans un fichier js.

De plus, vous devez mourir/quitter le programme après l'envoi de la réponse ajax (ceci n'est pas fait automatiquement et la requête peut être ouverte indéfiniment, voir documentation ):

echo $response;
// Terminate
exit;

Et d'autres choses fausses que je vois dans votre code: vous dites à jQuery de travailler avec les données JSONP mais votre réponse ajax est une chaîne HTML. Vous devez supprimer cette ligne ou la remplacer par le type de données correct:

dataType: 'jsonp',

Après l'édition de la question, vous avez introduit un nouveau problème. Vous essayez d’assigner the_content() à la valeur $response mais the_content() affiche le contenu de la publication; elle ne renvoie aucune valeur. Si vous souhaitez obtenir la valeur du contenu de la publication, vous devez utiliser get_the_content () à la place. Pour obtenir le même résultat que the_content, vous devez appliquer des filtres the_content. Change ça:

$response .= '<p>'. the_content().'</p>';

À:

// <p> are not need because the the_content filters include wpautop()
$response .= apply_filters( 'the_content', get_the_content() );
4
cybmeta