I am struggling to get my ajax request to work. It fails when I fire my $ajax and I get this error...
Uncaught ReferenceError: feature_ajax is not defined
This is my functions.php
// load our frontend modifiers
require_once(__DIR__ . '/lib/Frontend.lib.php');
This is my Frontend.lib.php class php...
class Frontend
{
/** frontend constructor */
public function __construct()
{
// enqueue our scripts
add_action('wp_enqueue_scripts', array($this, 'action_wp_enqueue_scripts'));
// add out ajax actions
$this->ajax_actions();
}
/** frontend enqueued scripts */
public function action_wp_enqueue_scripts()
{
// localize admin ajax
wp_localize_script('ajax-actions', 'ajax_actions', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
));
// enqueue scripts
wp_enqueue_script('ajax-actions');
}
/** ajax actions */
public function ajax_actions()
{
// admin field postdata ajax actions
add_action('wp_ajax_field_postdata', [__CLASS__, 'field_postdata']);
// public field postdata ajax actions
add_action('wp_ajax_nopriv_field_postdata', [__CLASS__, 'field_postdata']);
}
// Field Post Data
public static function field_postdata()
{
global $post;
$post_id = ($_REQUEST['id']);
if($post_id){
$post = get_post($post_id);
setup_postdata($post);
get_template_part('ajax/modal','field');
die();
}
}
}
new Frontend();
When I fire the $ajax script below, this is when I get the error feature_ajax is not defined.
But it is defined in the code above.
This script below is my theme-min.js file
// load feature post data
$.ajax({
cache: false,
timeout: 8000,
url: ajax_actions.ajaxurl,
type: 'POST',
data: {
action: 'field_postdata',
id: post_id
},
success: function (data) {
alert(data);
}
});
Any help in understanding what i'm doing wrong would be great.
Thanks
Updated Fixed Code
So what I changed to make this work. I was already enqueuing my main-min.js file, so I combined my wp_localize_script using the same handle as my enqueued javascript and it worked.
// register js in footer
$filename = get_template_directory_uri() . '/assets/scripts/main-min.js';
wp_register_script('main-js', $filename, array(), rand(), true);
// localize theme-js ajax actions
wp_localize_script('main-js', 'ajax_actions', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
));
// enqueue required scripts
wp_enqueue_script('main-js')
I am struggling to get my ajax request to work. It fails when I fire my $ajax and I get this error...
Uncaught ReferenceError: feature_ajax is not defined
This is my functions.php
// load our frontend modifiers
require_once(__DIR__ . '/lib/Frontend.lib.php');
This is my Frontend.lib.php class php...
class Frontend
{
/** frontend constructor */
public function __construct()
{
// enqueue our scripts
add_action('wp_enqueue_scripts', array($this, 'action_wp_enqueue_scripts'));
// add out ajax actions
$this->ajax_actions();
}
/** frontend enqueued scripts */
public function action_wp_enqueue_scripts()
{
// localize admin ajax
wp_localize_script('ajax-actions', 'ajax_actions', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
));
// enqueue scripts
wp_enqueue_script('ajax-actions');
}
/** ajax actions */
public function ajax_actions()
{
// admin field postdata ajax actions
add_action('wp_ajax_field_postdata', [__CLASS__, 'field_postdata']);
// public field postdata ajax actions
add_action('wp_ajax_nopriv_field_postdata', [__CLASS__, 'field_postdata']);
}
// Field Post Data
public static function field_postdata()
{
global $post;
$post_id = ($_REQUEST['id']);
if($post_id){
$post = get_post($post_id);
setup_postdata($post);
get_template_part('ajax/modal','field');
die();
}
}
}
new Frontend();
When I fire the $ajax script below, this is when I get the error feature_ajax is not defined.
But it is defined in the code above.
This script below is my theme-min.js file
// load feature post data
$.ajax({
cache: false,
timeout: 8000,
url: ajax_actions.ajaxurl,
type: 'POST',
data: {
action: 'field_postdata',
id: post_id
},
success: function (data) {
alert(data);
}
});
Any help in understanding what i'm doing wrong would be great.
Thanks
Updated Fixed Code
So what I changed to make this work. I was already enqueuing my main-min.js file, so I combined my wp_localize_script using the same handle as my enqueued javascript and it worked.
// register js in footer
$filename = get_template_directory_uri() . '/assets/scripts/main-min.js';
wp_register_script('main-js', $filename, array(), rand(), true);
// localize theme-js ajax actions
wp_localize_script('main-js', 'ajax_actions', array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
));
// enqueue required scripts
wp_enqueue_script('main-js')
- Have you considered using the REST API instead? It's much easier to debug, and more straightforward to register – Tom J Nowell ♦ Commented Oct 9, 2018 at 1:57
1 Answer
Reset to default 4To successfully add variable to the window object via wp_localize_script you need to properly invoke three functions in the following sequence:
wp_register_script
wp_localize_script
wp_enqueue_script
In your case you're missing the wp_register_script. In case someone experiences the same issue, follow the code procedures below.
PHP
<?php
function my_theme_wp_enqueue_scripts() {
$handle = 'my_handle';
// Register the script
wp_register_script($handle, '/path/to/my_script.js');
// Localize the script with a new data
wp_localize_script($handle, 'object_name', [
'ajax_url' => admin_url('admin-ajax.php')
]);
// Enqueue the script
wp_enqueeu_script($handle);
}
add_action('wp_enqueue_scripts', 'my_theme_wp_enqueue_scripts');
Then, you can access the localized object in Javascript
var ajax_url = object_name.ajax_url;
console.log(ajax_url);
Change the $handle variable content as well as the object_name in PHP that makes sense to your application.