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 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" (

    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', '', 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', 
                    //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.
        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:

         * When your ajax trigger is clicked
        $( document ).on( 'click', '.my-button', function(event){
            // 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
                type: "POST",
                data: postData,
                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) {

Related Questions