How can I pass a variable to wp_ajax action?

I’m writing a plugin that pulls data from an external API and inserts it into a bbPress topic. Here’s some sample code:

function bbp_ajax() {
    $topic_id = bbp_get_topic_id();
    $the_issue_key = get_post_meta( $topic_id, 'bbp_jira_issue_field', true);
    $nonce = wp_create_nonce( 'theNonce' );

    // jQuery AJAX Code, actions bbpAjax...
}
add_action ( 'bbp_template_before_replies_loop', 'bbp_ajax');

function get_ajax_content() {
    check_ajax_referer( "theNonce" );
    $api_url = get_option( 'jifbs_url' );
    $fullurl = $api_url.$the_issue_key;

    $username = get_option( 'jifbs_username' );

    // Then I pull in the data with cURL and echo it. But I need $the_issue_key to complete the API auth
}

add_action( 'wp_ajax_bbpAjax', 'get_ajax_content' );
add_action( 'wp_ajax_nopriv_bbpAjax', 'get_ajax_content' );

I can’t figure out how to pass $the_issue_key into the get_ajax_content function. I’ve tried setting it as a global (shudder) but it always returns null.

$the_issue_key = get_post_meta( $topic_id, 'bbp_jira_issue_field', true); run in the get_ajax_content function returns null.

Is there something specific to a wp_ajax action that I might need to know – or am I missing something really obvious?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You’d need to put the variable’s value onto the page so that javascript can pass it back to PHP using ajax. Ajax functions are a completely separate “page load” so even if you made it global it won’t work. The best way to do this is using “wp_localize_script” (https://codex.wordpress.org/Function_Reference/wp_localize_script)

Here’s an full example of how you could do it:

//First enqueue your javascript in WordPress
    function your_prefix_enqueue_scripts(){

        //Enqueue your Javascript (this assumes your javascript file is located in your plugin in an "includes/js" directory)
        wp_enqueue_script( 'your_unique_js_name', plugins_url('js/yourjavascriptfile.js', dirname(__FILE__) ), array( 'jquery' ) );

        //OR (simpler but not recommended)  
        wp_enqueue_script( 'your_unique_js_name', 'http://domain.com/myjavascriptfile.js', array( 'jquery' ) );

        //Here we create a javascript object variable called "youruniquejs_vars". We can access any variable in the array using youruniquejs_vars.name_of_sub_variable
        wp_localize_script( 'your_unique_js_name', 'youruniquejs_vars', 
            array(
                //To use this variable in javascript use "youruniquejs_vars.ajaxurl"
                'ajaxurl' => admin_url( 'admin-ajax.php' ),
                //To use this variable in javascript use "youruniquejs_vars.the_issue_key"
                'the_issue_key' => $the_issue_key,

            ) 
        );  

    }
    add_action( 'wp_enqueue_scripts', 'your_prefix_enqueue_scripts' );

    //This is your Ajax callback function
    function your_ajax_callback_function_name(){

        //Get the post data 
        $the_issue_key = $_POST["the_issue_key"];

        //Do your stuff here

        //Create the array we send back to javascript here
        $array_we_send_back = array( 'test' => "Test" );

        //Make sure to json encode the output because that's what it is expecting
        echo json_encode( $array_we_send_back );

        //Make sure you die when finished doing ajax output.
        die(); 

    }
    add_action( 'wp_ajax_' . 'your_ajax_callback_function_name', 'your_ajax_callback_function_name' );
    add_action( 'wp_ajax_nopriv_' . 'your_ajax_callback_function_name', 'your_ajax_callback_function_name' );

And then in your javascript file do something like this:

jQuery(document).ready(function($){

    /**
     * When your ajax trigger is clicked
     *
     */
    $( document ).on( 'click', '.my-button', function(event){

        event.preventDefault();

        // Use ajax to do something...
        var postData = {
            action: 'your_ajax_callback_function_name',
            the_issue_key: youruniquejs_vars.the_issue_ke,
        }

        //Ajax load more posts
        $.ajax({
            type: "POST",
            data: postData,
            dataType:"json",
            url: youruniquejs_vars.ajaxurl,
            //This fires when the ajax 'comes back' and it is valid json
            success: function (response) {

                alert( response.test );

            }
            //This fires when the ajax 'comes back' and it isn't valid json
        }).fail(function (data) {
            console.log(data);
        }); 

    });

});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0