Support

Account

Home Forums ACF PRO Insert Unique ID Using AJAX

Solving

Insert Unique ID Using AJAX

    • TIBrent

    • December 1, 2018 at 7:18 am

    So awhile back I posted about wanting to use a unique id before the first instance of a field in my queries. John Huebner, was the MAN & came in and solved my issue like a boss! Now, I am having another issue.
    So basically all the original rules apply See Solved Thread Here, but because I am dealing in such a high amount of posts that are being pulled & trying to limit the load time to less than a century I have implemented a load more button, to prevent having to browse multiple pages to try to find which result the user is looking for. So, here is my code…
    This is my functions.php custom functions :

    function load_more_scripts() {
    	global $wp_query; 
    	wp_enqueue_script('jquery');
    	wp_register_script( 'loadmore', get_stylesheet_directory_uri() . '/js/load-more.js', array('jquery') );
    	wp_localize_script( 'loadmore', 'loadmore_params', array(
    		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
    		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
    		'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
    		'max_page' => $wp_query->max_num_pages
    	) );
     	wp_enqueue_script( 'loadmore' );
    }
    add_action( 'wp_enqueue_scripts', 'load_more_scripts' );
    
    function loadmore_ajax_handler(){
    	$args = json_decode( stripslashes( $_POST['query'] ), true );
    	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    	$args['post_status'] = 'publish';
    	query_posts( $args );
    	if( have_posts() ) :
    		// run the loop
    		while( have_posts() ): the_post();
    		$serial = get_field('serial');
    		$sort = get_field('sort');
    		$artwork = get_field('artwork');
    		$size = 'medium';
    		$thumb = $artwork['sizes'][ $size ];
    		$width = $artwork['sizes'][ $size . '-width' ];
    		$height = $artwork['sizes'][ $size . '-height' ];
    		$artist = get_field('artist');
    		$album = get_field('album');
    		$release = get_field('year');
    		$copies = get_field('copies');
    		$noartwork = get_field('no_album_art', 'option');
    		if ($sort != $last_sort) { // the sort leter has changed ?>
    		<?php
    		$last_sort = $sort;
    		$low_case = lcfirst($last_sort);
    		$case = 'num_' . $low_case;
    		?>
    		<div id="sort-<?php echo $sort; ?>" class="sort-start" data-view="<?php echo $low_case; ?>"><?php echo $sort; ?></div>
    		<?php 
    		}
    		if ( $thumb ) {
    		    $art = $thumb;
    		} else {
    		    $art = $noartwork;
    		}
    		if ( $copies > 1) {
    		    $copy_text = 'Copies';
    		} else {
    		    $copy_text = 'Copy';
    		}
    		?>
    		<div class="record col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2" tabindex="0" data-sort="<?php echo $sort; ?>" data-serial="<?php echo $serial; ?>" itemscope itemtype="http://schema.org/Product">
    		    <div class="cover-layout">
    		        <?php wpfp_link() ?>
    		        <a href="<?php echo esc_url( get_permalink() ); ?>" class="cover-art" title="<?php the_title_attribute(); ?>" target="_self">
    		            <div class="serial">
    		                <div class="serial-num"><?php echo $serial; ?></div>
    		            </div>
    		            <div class="cover-art-hover">
    		                <i class="icon-more-large"></i>
    		            </div>
    		            <div class="cover-art-image" style="background-image:url('<?php echo $art; ?>');"></div>
    		        </a>
    		        <div class="mo-info">
    		            <div class="mo-info-artist">
    		                <a href="<?php echo get_home_url(); ?>/?s=<?php echo $artist; ?>" class="mo-info-name" title="View All albums by <?php echo $artist; ?>" target="_self"><?php echo $artist; ?></a>
    		            </div>
    		            <div class="mo-meta ellipsis-one-line">
    		                <div class="mo-info-album">
    		                    <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php the_title_attribute(); ?>" target="_self">
    		                        <span><?php echo $album; ?></span>
    		                        <small><?php echo $copies; ?> <?php echo $copy_text; ?></small>
    		                    </a>
    		                </div>
    		            </div>
    		        </div>
    		    </div>
    		</div>
    		<?php endwhile;
    	endif;
    	die;
    }
    add_action('wp_ajax_loadmore', 'loadmore_ajax_handler');
    add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler');

    And my custom JS:

    jQuery(function($){
    	$('.load-more-btn').click(function(e){
    		var button = $(this),
    			loader = $(this).prev('.loading'),
    		    data = {
    			'action': 'loadmore',
    			'query': loadmore_params.posts,
    			'page' : loadmore_params.current_page
    		};
    		e.preventDefault();
     
    		$.ajax({
    			url : loadmore_params.ajaxurl,
    			data : data,
    			type : 'POST',
    			beforeSend : function ( xhr ) {
    				button.text( 'Loading...' );
    				loader.stop().show();
    			},
    			success : function( data ){
    				if( data ) { 
    					button.text( 'Load More' ); // insert new posts
    					$('#ajax').append(data);
    					loadmore_params.current_page++;
    					if ( loadmore_params.current_page == loadmore_params.max_page ) 
    						button.remove();
    					loader.stop().hide();
    				} else {
    					button.remove();
    					loader.stop().hide();
    				}
    			}
    		});
    	});
    });

    And lastly, not that it is needed whatso, but for being thorough’s sake, my load more button’s display:

                    if (  $wp_query->max_num_pages > 1 ) { ?>
                    <div class="load-more-wrap">
                        <div class="loading"></div>
                        <button class="btn load-more-btn">More Posts</button>
                    </div>    
                    <?php } ?>
    

    So, now the problem I am having with this is, each time the load more query executes it does not get what the previous unique $sort ID is any longer, & thus, if I am displaying 60 queries per page load by default & it throws in the unique $osrt value before the first post “A”, & the are 70 queries that have that $sort ID, as soon as I hit the load more button it instantly throws in the $sort ID before the next load item. Basically it doesn’t recognize that the $sort ID has already been shown on the page. I want to use the Load More button to continue posting that unique $sort ID only before the first instance of it, and with each ajax call it reads the $sort value as empty each time.
    Any and all help would be appreciated here. And for the heck of it, here is a link to the page I am working on Page Link, please note that the styling & design on the page is not complete yet.
    -Brent

    • TIBrent

    • December 3, 2018 at 5:36 pm

    Monday morning I want to get this thing figured out BUMP!

    • TIBrent

    • December 6, 2018 at 6:25 am

    Nada? Bump for a guy who is clueless here.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.