Using Javascript Variables as WP_Query Parameters

Question

I'm having some problems attempting to use a Javascript variable as a WordPress Query parameter.

I'm sending an Javascript array of post_ids to Wordpress using an AJAX Post Request.

$.post('url', { data: requestIds }, function(response) { console.log(response) });

I'm basically trying to pass the Javascript array of 'requestIds' as the post__in WP_Query parameter.

$COMPARISON_QUERY = new WP_Query(array(
    'post_type' => array('Post'),
    'post__in' => // this is where the array would be passed as a parameter
));

Here's the PHP that handles the request:

$response_object = DecodeJSONString($_POST['data']);

function DecodeJSONString($string) {
    $decoded_string = json_decode($string);
    return $decoded_string; // this would be the query parameter
}

Thanks for any feedback!

Answer 1

Instead of posting to your php file that does the work directly, you should be doing your ajax requests using WordPress ajax functions.

Say the custom php file you are using is called process_post.php. Instead of posting to your custom php file directly, post to admin-ajax.php and handle the post in your functions.php file.

On your front end page:

<script>
    var ajaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>"; // This will get the approriate ajax url using wordpress functionality
    $.post(  ajaxUrl, 
         { 
            'action': 'my_action',
            'requestIds': requestIds // Assuming you have your requestIds var populated already 
         },
         function(response) {
           console.log(response)
         });
</script>

Now on the php side there is a kind of tricky/unintuitive part about registering your ajax action my_action. It's a naming convention where you append the action name my_action after wp_ajax and wp_ajax_no_priv. Note, you wouldn't hook up your action to wp_ajax_no_priv if regular users aren't supposed to touch it.

The first argument is the naming convention, the second argument is your custom function name:

<?php // in functions.php
add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
?>

Now you have your ajax action set up! Now create your callback function, also in functions.php. I often just include the separate php file from this point like this:

<?php // Still in functions.php
function my_action_callback(){
    include_once('my_code.php');
}
?>

Now that you have set all this up properly you no longer need to include different core WordPress classes! That is the main reason of going through all the hassle of setting it up this way.

In my_code.php which would reside in your theme in my example:

<?php
$COMPARISON_QUERY = new WP_Query(array(
    'post_type' => array('Post'),
    'post__in' => json_decode( $_POST['requestIds'] ),
));