Loading New Advanced Custom Fields Row With Ajax

• stuartjnelson

• December 10, 2015 at 12:31 am

I have a little jQuery modal. This modal has a slideshow of different works of art. I have over 40 different works all in a list (just the name of the work) and each has at least 3 pictures. What I want to do is load a specific repeater row of Advanced Custom Fields repeater field in the modal when I click on the listed work. I am getting the ID of the row by using a echoing a PHP counter and hiding the element with CSS.

I nearly have this working. I cannot workout how to return new row ID to the page template. When I call my function my_ajax_callback() on the page template I get this error;

Notice: Undefined index: newRowId

snippet from page template
<span class="rowId"><?php echo $count_parent_row++; ?></span>

jQuery

button.click(function(e){

    var lastRowId = $('.rowId:last').html();
    console.log( lastRowId );

    $.ajax({
        url: ajax_object.ajaxurl, 
        type: 'POST',
        data:{
            action: 'my_ajax_action', 
            newRowId: lastRowId
        },

        success: function( data ){
            console.log( data );
        }
    });
}); 

functions.php

add_action( 'wp_enqueue_scripts', 'ajax_enqueue_scripts' );
function ajax_enqueue_scripts(){
  wp_enqueue_script( 'ajaxHandle', get_template_directory_uri() . '/library/js/ajax.js', array('jquery'), '1.0', true );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_callback' );
function my_ajax_callback() {

    $data = $_POST['newRowId']; 

    if(isset($_POST['newRowId']))
    {

        $title = 'drawings'; 
        $title__singular = 'drawing';
        $row = get_field('list_of_'. $title);
        $rowNumber = $data;
        $row_first = $row[$rowNumber];
        echo $field = $row_first[$title__singular . '_title'];

    wp_die();
    }
}

• John Huebner

• December 11, 2015 at 2:50 pm

Return a json object that has the data you want. Fist you build an array and then you return the json encode value. Something like this.

$return = array(
  'title' => $title__singular . '_title',
  'next_id' => $rowNumber+1
)
echo json_encode($return);
exit;

• stuartjnelson

• December 12, 2015 at 5:29 am

Hi John! Thanks for getting back to me! So I’ve created my JSON object and I can get it to log in the console. When I call the function on my page template I cant get the array to output. Any ideas what Im doing wrong? All Im wanting really is to be able to get the newRowId so can call a specific repeater row…

jQuery

jQuery(document).ready(function($) {
	
	var button 			= $('#ajax__button');

	button.click(function(e){
	
	    var lastRowId = $('.rowId:last').html();
	    console.log('the last row ID ' + lastRowId);
	
	
		var ajaxurl = ajax_object.ajaxurl;
		
		var data = {
		    'action': 'my_ajax_action', 
		    'newRowId': lastRowId
		};
		
		console.log('the data var ' + data);
		
		jQuery.post(ajaxurl, data, function(response) {
		    json = jQuery.parseJSON(response);
		    console.log(json);
		});
	});
});	

functions.php

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );
function my_ajax_action_callback() {
    if(isset($_POST['newRowId'])){
    
        $response = array(
            'new_row_id' => $_POST['newRowId']
        );
        echo json_encode($response);
        exit;
    }
    else {
        echo "its null mannn";
    }
}            

Screen-Shot-....png

• John Huebner

• December 13, 2015 at 12:31 am

So, if you want to only return one value, you don’t need to really use json, but it’s still a good idea. The problem with your code is that you’re not adding to the current row, you’re just returning the same value you’re sending.

add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );
function my_ajax_action_callback() {
    if(isset($_POST['newRowId'])){
    
        $new_row_id = $_POST['newRowId']+1;
        echo $new_row_id;
        exit;
    }
    else {
        echo "its null mannn";
        exit;
    }
}

• stuartjnelson

• December 13, 2015 at 3:12 am

Hi John.

Thanks for your continued help! So my actual jQuery uses "this" to get the relavent row number. I’ve ben using :last as a temporary measure.

var button = $('.rowId');

	button.click(function(e){
	
	    var lastRowId = $(this).html();
	    console.log('the last row ID ' + lastRowId);

I wanting to call the repeater row with this newRowId inside my modal. I’ve been trying to get the newRowId in to my PHP as the repeater row number. Any ideas?

• John Huebner

• December 14, 2015 at 2:31 am

You’re trying to get the last row that was displayed and send that value in the AJAX? You may be going past were I can help you. If I was doing this, more than likely I would be setting a variable in JavaScript that held the current row being displayed rather than trying to get the row id from the html element.

var current_id = 0;

I’d increment or decrement this value based on what the user clicked and then send this value in my request.

I actually don’t do much with jQuery. I can help you with the ACF/PHP side of things, I’ve had some experience with AJAX, but when it comes to how to get what you need to send using jQuery what you really need is jQuery help.