Ajax request repeat the same value from PHP

2 comments

1. Ok, so you have several issues. This should fix it:

   add_action( 'wp_ajax_nopriv_post_myaction_add_myaction', 'post_myaction_add_myaction' );
   add_action( 'wp_ajax_post_myaction_add_myaction', 'post_myaction_add_myaction' );
   
   function post_myaction_add_myaction($size = 'full') {
   
       $post_id = $_POST['post_id'];
       $limit = $_POST['limit'];
       $offset = $_POST['offset'];
   
           // get images using the get_posts() function
           $images = get_posts(array(
               'numberposts'    => $limit,
               'post_parent'    => $post_id, // get images attached to the current post
               'offset'         => $offset,
               'post_mime_type' => 'image', // so we can get images
               'post_type'      => 'attachment',
               'order'          => 'ASC',
               'orderby'        => 'menu_order' // pull them out in the order you set them as
           ));
   
           // loop through images and display them
           $out = '';
           foreach($images as $image) {
               setup_postdata( $image );
               $out .= wp_get_attachment_image($image->ID, $size); // returns an image HTML tag if there is one
           }
           wp_reset_postdata();
   
           wp_die($out);
   
   }
   

   Here you had numberposts set to -1 and $limit. You need to remove the -1 because you don’t need to return all the images, only 2 at the time. Also you echoed the results. Don’t echo, return.

   Define an empty variable, then fill it in your loop. Also do a setup_postdata() when using get_posts(). And always reset your postdata once you’ve done with query.

   Next you need to use either die() or wp_die() with the variable to output since this is what actually outputs the response in AJAX call.

   For your jQuery, assuming you’re inside the script where you’ve localized your admin-ajax.php url

   var post_id = $(this).data('id');
   var limit = 2;
   var offset = 0; // offset is the amount of posts which are loaded already
   
   $('.myaction-button').click(function (e) {
       e.preventDefault();
       $.ajax({
           url: postmyaction.ajax_url, // in Twenty sixteen it's screenReaderText.ajax_url
           type: 'post',
           data: {
               action: 'post_myaction_add_myaction',
               post_id: post_id,
               limit: limit,
               offset: offset
           },
           success: function( data ) {
               var $data = $(data);
               $('#myaction-count').append($data);
           },
           complete: function() {
               offset += limit;
           }
       });
   
       return false;
   });
   

   First get the data you have in your divs, set the limit and offset, and then on click execute the ajax call, and when you’re complete increase the offset by limit (number of posts) – this will correctly increase the offset by 2 every time your AJAX call is completed.

   Tested this on Tewnty sixteen and it worked 🙂 Hope this helps ^^

2. Every time you get in the click action you reset your “offset” value to 2.

   You need to make it a global variable outside of this handler.
   You can also put it in a hidden element if you prefer.

   As suggested, here is a simple snippet of code :

   var offset = 2; // global
   jQuery(".myaction-button").click(function (e) {
       e.preventDefault();
   
       var post_id = jQuery(this).data('id');
   
     // offset is the amount of posts which are loaded already
     var limit = 2;
       jQuery.ajax({
           url : postmyaction.ajax_url,
           type : 'post',
           data : {
               action : 'post_myaction_add_myaction',
               post_id : post_id,
               limit: limit,
               offset: offset
   
           },
           success : function( data ) {
               offset = offset + limit;
               jQuery('#myaction-count').append(data);
   
           }
       });
   
       return false;
   })
   

Comments are closed.