web-dev-qa-db-ja.com

Ajaxでカテゴリを読み込む

私はローカルで働いているcosを表示するためのリンクもデモもありません

カテゴリが異なるニュース記事があります。

カテゴリをボタンとして表示したいのですが。

あなたがカテゴリーをクリックするとき、私はajaxを使ってそれらの記事をロードしたいので私はページをリロードしていません。

カテゴリーボタン

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

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;
            }
        });
    })

Functions.phpの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;

    }

カテゴリをクリックすると、コンソールに502 Proxy Error（ホストが見つかりませんでした）と表示されます。

誰が私が間違っているのか、またはこれをどのように修正するのかを見ることができます。

更新

私は部分的に動作しているコードを持っていますが、私はまだ問題を抱えています

私のjsは現在別のjsファイルにあります

私がそれを働かせることができる唯一の方法はajaxurlのためのサイトURLを使うことでした

  $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;
          }
      });
  })

私のphpスクリプトはfunctions.phpにあります

Functions.phpにはタグが1つしかないはずだと思うので、htmlマークアップを作成するために関数内のphpから抜け出したくはありませんでした。それをすべて$ response変数に追加しようとしたのですが、それがエコーされます。

  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); 
  }

このような作品です。私は投稿のタイトルと一緒にhtml出力を得ますが、それはhtmlの外側にあり、私は内容を出力することができません。

  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); 
  }

これを機能させるための手助けは大歓迎です。

categoriesajax
3
user668499

エラーはそれをすべて言います、あなたは無効なホストに要求を送っています。

これを変更してください。

 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' ) ) ?>";

注 ：あなたのコードと説明からあなたはPHPの中にjQueryコードを生成していて、それがjsファイルにないと仮定します。

さらに、ajaxレスポンスが送信された後にプログラムを終了する必要があります（これは自動的には行われず、リクエストは永久に開かれる可能性があります。 documentation を参照）。

echo $response;
// Terminate
exit;

そして私があなたのコードで見たもっと悪いこと：あなたはJSONPデータを扱うためにjQueryに言っています、しかしあなたのajax応答はHTML文字列です。この行を削除するか、正しいデータ型に変更してください。

dataType: 'jsonp',

質問の編集の後、あなたは新しい問題を紹介しました。 the_content()を$responseの値に代入しようとしていますが、the_content()は投稿コンテンツを表示します。値を返しません。投稿コンテンツの値を取得したい場合は代わりにget_the_content（）を使用し、the_contentと同じ結果を得るにはthe_contentフィルタを適用する必要があります。これを変更してください。

$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