0

I'm building a site within WordPress which will display two rows of images at the start, then on button click, two more, dynamically.

I have four files involved in this process:

  • case-study-card.php: Which holds the markup for the each card.
  • home.php: Where the load more button is created.
  • load-more.js
  • ajax-loaders.php

    However, I'm stumped on where my AJAX is falling apart? I feel as if

/*************/
// load-more.js
/*************/

jQuery(function($){

    $('#loadmore').click(function(){

        var column_width = $(this).data('column-width');
        var max_num_pages = $(this).data('max-num-pages');
        var ignore = $(this).data('featured');
        var post_type = $(this).data('type');

        var button = $(this),
          data = {
            action:'loadmore',
            query: loadmore_params.posts,
            page : loadmore_params.current_page,
            security : loadmore_params.security
          };  

        $.ajax({
            url : loadmore_params.ajaxurl,
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); 
                 console.log ("before sending ajax"); // works
            },

            success : function( data ){
                if( data ) {
                    console.log("test")
                    button.text( 'Load More' ).prev().before(data); // insert new posts
                    loadmore_params.current_page++;

                    // where to insert new posts...
                    console.log("now inserting new posts");
                    $('.case-studies-container').find('.case-card').last().after( data );
                    console.log("found card");
                    // if it's the last page in the query, remove the button
                    if ( loadmore_params.current_page == max_num_pages )
                        button.remove(); 

                     console.log (data);

                } else {
                    // if no data, remove the button as well
                    button.remove(); 
                }
            },

            error : function(error){ 
                console.log(error);
            }
        });
    });
});
<!-- In case-study-card.php -->

<div class="case-card" >
  <div class="case-card__wrapper">
    <h4 class="case-card__title">
      Title
    </h4>
  </div>
</div>


<!-- in home.php
* After looping through and displaying the initial 5 cards, display the button at the bottom
-->

<?php 
  if ($the_query->found_posts > 5 ){
      echo "<div class='case-study__loadmore'><a id='loadmore'>Load more</a>";

  }
?>

<!-- ajax-loaders.php -->
<?php
function ajax_handler(){

  check_ajax_referer('load_more', 'security');

  //prepare arguments for query
  $args = json_decode( stripslashes( $_POST['query'] ), true );
  $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
  $args['post_status'] = 'publish';
  $args['post__not_in'] = explode(',',$_POST['exclude']);
  $args['max_num_pages'] = $_POST['max_num_pages'];
  $cols = $_POST['columns'];
  $type = $_POST['post_type'];

  query_posts( $args );
  if( have_posts() ) :

    // run the loop
    while( have_posts() ): the_post(); 
    endwhile;
  endif;


  die;
}
add_action('wp_ajax_loadmore', 'ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'ajax_handler'); // wp_ajax_nopriv_{action}

?>

I believe everything after success : function( data ) in load-more.js is not working and I'm not sure why? I also get a admin-ajax.php 400 (Bad Request) error, a file that I have not seen or worked on in this project ...

asset-loader.php

wp_localize_script( 'theme', 'loadmore_params', array(
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'posts' => json_encode( $wp_query->query_vars ), 
  'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  'max_page' => $wp_query->max_num_pages,
  'security' => wp_create_nonce("load_more")
) );


wp_localize_script( 'theme', 'repeater_loadmore_params', array(
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  'max_page' => $wp_query->max_num_pages,
  'security' => wp_create_nonce("repeater_field_nonce")
) );

I believe the ajax handler url : loadmore_params.ajaxurl is working.

  • When I have url : loadmore_params.ajaxurl the button text changes from "Load more" to "Loading".
  • When I have url : ajaxurl the button doesn't change beforeSend.

Which makes me think the handler is working fine, but anything within success : function( data ){ isn't working and I'm not sure why.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.