Loading New Advanced Custom Fields Row With Ajax WordPress
- 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)
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;
}
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 );