Wordpress make Ajax call to my theme - php

Question

This is my situation: I have a slide, like the image below, that needs to be responsive. This slide was created from scratch and its working fine, however it's not responsive.
In order to be responsive I need to know the width of the screen of the user so instead of showing 4 slides, I show 3, 2 and 1 (if its a phone).
With that said, I need my slider to be loaded through ajax and I will pass through params the user screen width.
My theme folder is structured this way:
wp-contents/themes/my-theme
...functions.php
...header.php
...footer.php
...index.php
...single.php
I need to make a Ajax call to functions.php to a function that I have created. So I added the following:
add_action('wp_ajax_posts_list', 'my_ajax_posts_list_handler');
function my_ajax_posts_list_handler()
{
echo 'hello, width: ' . $_POST['width'];
wp_die();
}
In the footer.php file I added some testing javascript code:
$(function()
{
var width = $(window).width();
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; // Dunno what is this..
$.ajax(
{
url: ajaxurl,
data:
{
action: 'wp_ajax_posts_list',
width: width
},
type: 'GET',
success: function(response)
{
console.log(response);
}
});
});
My problems:
The URL being executed is this http://localhost/wordpress/wp-admin/admin-ajax.php?action=wp_ajax_posts_list
The URL response code is 400
The URL responde value is '0'

Answer 1

The action is actually called post_list. wp_ajax_ is just a prefix. You also should add the same action with prefix wp_ajax_nopriv_ otherwise it wil not work when you are logged out. I also see you do type: 'GET' in your javascript but use $_POST in your PHP. Do one of the two.
add_action('wp_ajax_posts_list', 'my_ajax_posts_list_handler');
add_action('wp_ajax_nopriv_posts_list', 'my_ajax_posts_list_handler');
function my_ajax_posts_list_handler()
{
echo 'hello, width: ' . $_POST['width'];
wp_die();
}
Here the JS:
<script>
$( function () {
var width = $( window ).width();
// var ajaxurl = "http://localhost/wordpress/wp-admin/admin-ajax.php"
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
$.ajax( {
url: ajaxurl,
data: {
action: 'posts_list',
width: width
},
type: 'POST',
success: function ( response ) {
console.log( response );
}
} );
} );
</script>