Ask your WordPress questions! Pay money and get answers fast! (more info)

Loading New Advanced Custom Fields Row With Ajax

  • REFUND REQUESTED

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

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

<strong>jQuery</strong>

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 );
}
});
});



<strong>functions.php</strong>

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();
}
}

Answers (2)

2015-12-09

Rempty answers:

Change your javscript

data:{

action: 'my_ajax_action',

newRowId: lastRowId

},

//replace with
data:{

'action': 'my_ajax_action',

'newRowId': lastRowId

},



bassmanstu comments:

Hey Rempty,

Im now not getting anything in my console from ajax. Any ideas?


Rempty comments:

Yes, because is fixed the "Notice: Undefined index: newRowId"

Now you must check if you are selecting the correct rowID

if this "console.log( lastRowId );"

doesn't print nothing, you are not selecting the ID.

Share part of your html code, maybe can help you with the selector.


bassmanstu comments:

So by using;

jQuery('#response').html( lastRowId );

I can get the 'newRowId' insert in to the DOM when I click my button. When I try call my functions im still gett the same php error. Here is my function;

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'];
echo $data;
}


On the page template Im just call the function;

<?php my_ajax_callback(); ?>

Ideally Id like my function to be;


function my_ajax_callback() {

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();
}
}



Im getting the console.log working fine. I dont think its being passed back to my PHP function properly..


Rempty comments:

Hello bassmanstu

Can you give me the url of your website, i want to debug your ajax request? (via PM)


Rempty comments:

Try this script


var lastRowId = $('.rowId:last').html();
var mydata='&newRowId'+lastRowId+'&action=my_ajax_action';
jQuery.ajax({
url: ajax_object.ajaxurl,
data:mydata,
dataType: "html",
success: function( data ){
var $data = jQuery(data);
console.log( $data );
}
});


And the functions.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 = $_REQUEST['newRowId'];
echo $data;
}

2015-12-09

Andrea P answers:

Hi there,

I guess that
.rowId:last

should be
.rowId:last-child

or
.rowId:last-of-type


then I assume you have initialized the jquery script in order to use $, cause wordpress uses the no-conflict mode and $ is substituted with jQuery. if you want to keep using $ in your scripts, you have to wrap them in a function like this:


(function($) {

// your functions with $ prefix

})( jQuery );