Get the posts count in JS (Wordpress)

Question

I have site on WP.

I'm using AJAX to show my posts. On click on 'more' button appears two more posts. And I'm trying to hide the button when all of the posts are shown. But something go wrong.

I don't understand how to take posts count to JS (it's another variant), because construction var posts_count = "<?php echo $posts_count; ?> doesn't work - it gives only string!

JS

$(function () {

  var posts = 2; //posts shown
  var posts_offset = 2;



  $("#load-post").click(function (e) {
    e.preventDefault();


    $.ajax({
      type: "GET",
      url: "/wp-admin/admin-ajax.php",
      data: ({
        action: 'loadMore',
        posts_offset: posts_offset
      }),
      success: function (data) {
        $('.news #content').append(data);
        posts_offset += 2;

      }
    });


  });


});

PHP

function loadMore() {



    $posts_count = wp_count_posts()->publish; 

    $posts_offset = $_GET['posts_offset'];


    // get your $_GET variables sorted out

    // setup your query to get what you want
    query_posts( array( 'posts_per_page' => 2, 'offset'=> $posts_offset ) );

    // initialsise your output
    $output = '';

    // the Loop
    while (have_posts()) : the_post();

         ?><div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 news-item">
              <div class="news-date">
                <?php the_time($format = "j F Y") ?>
              </div>
              <div>
                <h3><?php the_title() ?></h3>
                <p><?php the_content() ?></p>
              </div>
            </div><?php

    endwhile;

  if ($posts_count - ($posts_offset + 2) <= 0) { ?>
      <script>$("#load-more").hide();</script>
    <?php }


    // Reset Query
    wp_reset_query();

    die($output);

}

This code works, but doesn't work the part of hiding the button

You are not echo-ing the script part

Endre Simo
– Endre Simo

2015-06-03 08:29:58 +00:00
Commented Jun 3, 2015 at 8:29 — Endre Simo
– Endre Simo, Commented Jun 3, 2015 at 8:29

Dharmesh Patel · Accepted Answer · 2015-06-03 08:42:37Z

1

change your code as follows:

in PHP

<script>function hideLoadMore(){$("#load-more").hide();}</script>

and in JS

success: function (data) {
    $('.news #content').append(data);
    posts_offset += 2;
    if(hideLoadMore) { 
        hideLoadMore(); 
    }
  }

answered Jun 3, 2015 at 8:42

Dharmesh Patel

1,8911 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dharmesh Patel Over a year ago

Is your button id "load-more" or "load-post", which one you want to hide?

Dharmesh Patel Over a year ago

as the click event is on "load-post" not "load-more"

Endre Simo · Accepted Answer · 2015-06-03 08:34:29Z

1

You are not echo ing the script part.

if ($posts_count - ($posts_offset + 2) <= 0) {
      echo '<script>$("#load-more").hide();</script>';
}

And why you are not separating the javascript part from php? Would be more elegant if you handle the scripting logic from ajax. In php you are sending back some response if the condition is not met, then you handle the DOM manipulation from javascript.

answered Jun 3, 2015 at 8:34

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

1 Comment

Maria Piaredryj Over a year ago

It doesn't work for me( what about more elegant solution - I have a little expirience of PHP, so I don't know how to make it

Collectives™ on Stack Overflow

Get the posts count in JS (Wordpress)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related