Reputation: 1
I cant for the life of me get any scripts to enqueue within my functions.php file nor can I localize my admin-ajax.php url. I've been including any css and js in their traditional places (css in the header and js just before the end of the body tag) and its been working for me thus far, but its apparent that the js file that makes the ajax request needs to be registered in this file.
Essentially I am trying to make an AJAX request to re-query the db for posts only pertaining to a certain category on the blog page of a client's website and display the results without refreshing.
As of right now, I'm just trying to have a dummy function handle the request and return the category
Relevant code in my functions.php file
<?php
function register_styles_and_scripts() {
// BOOTSTRAP CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
// MAIN CSS
wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/style.css' );
// JQUERY
wp_register_script('jquery', get_template_directory_uri() . '/js/jQuery.min.js', array(),'1.11.1', true);
wp_enqueue_script('jquery');
// BOOTSTRAP JS
wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.1', true);
wp_enqueue_script('bootstrap');
// MAIN JS
wp_register_script('main', get_template_directory_uri() . '/js/main.js', array('jquery'), 'false', true);
wp_enqueue_script('main', get_template_directory_uri() . '/js/main.js', array('jquery'), 'false', true);
wp_enqueue_script('main');
$localize = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'auth' => wp_create_nonce('_check__ajax_100')
);
wp_localize_script( 'main', 'ajax_params', $localize);
}
add_action('wp_enqueue_scripts', 'register_styles_and_scripts');
add_action('admin_enqueue_scripts', 'register_styles_and_scripts');
// === AJAX === //
function test_ajax_function() {
check_ajax_referer( '_check__ajax_100', 'nonce_field' );
$cat = $_POST[ "cat" ];
echo $cat;
wp_die();
}
add_action( 'wp_ajax_test_ajax_function', 'test_ajax_function' );
add_action( 'wp_ajax_nopriv_ test_ajax_function', 'test_ajax_function' );
?>
I followed numerous tutorials and thought I set up the localization correctly but when I make the call, ajaxurl is undefined.
My AJAX request
$('.cat-item a').on("click", function(e) {
e.preventDefault();
var postRow = $('#postRow'),
selectedCategory = $(this).text().trim(),
ajaxurl = "<?php echo admin_url('admin-ajax.php') ?>";
console.log("ajax URL: ", ajaxurl);
postRow.animate({
opacity: "0.5"
});
$.ajax({
method: "POST",
url: ajax_params.ajax_url,
type: "post",
dataType: "html",
data: {
"action": "test_ajax_function",
"cat": selectedCategory,
"security": "<?php echo wp_create_nonce('filter_posts')"
},
success: function(result) {
console.log(result);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("headers", jqXHR);
console.log("textstatus: ", textStatus);
console.log("error thrown: ", errorThrown);
console.log("response text: ", jqXHR.responseText);
}
})
});
What am I missing?
Upvotes: 0
Views: 1087