I seem to be missing something. The code shared below is supposed to take the value from the Select box, pass it through Ajax to a PHP function that will regenerate the table data and filter it based on the selected team.

I thought this would be a simple AJAX call, but it seems I underestimated the complexity of making this jQuery.

Initial form rendering including HTML form (generated by PHP):


// Output the form
echo '    <form>' .
'Select a Team:' .
'<select name="select_team"  onchange="fmsapi_refresh_hs()">' .
'<option value="">Full Schedule</option>' .
'<option value="4783">4783</option>' .
'<option value="2994">2994</option>' .
'</select>' .
'<div id="fmsapi_status"></div>' .

// Start the div
echo '<div id="frc_hybrid_table">';

// Populate the table
frc_populate_hybrid_schedule($year, $event, $team);

echo '</div>';

//echo '<h4>Raw Data:</H4><code>' . $received_xml . '</code>';
// Store the output buffer before emptying it and returning it to the calling content.
$returnstring = ob_get_contents();
return $returnstring;

Below is the code used to receive the AJAX query and enqueue the JS:

function fmsapi_refresh_hybrid_schedule() {

    // Collect the three variables from the POST parameters
    $year = $_POST["year"];
    $event = $_POST["event"];
    $event = $_POST["team"];

    return frc_populate_hybrid_schedule($year, $event, $team);


// Function to enqueue the script
function my_script_enqueuer() {
   wp_register_script( "fmsapi_refresh_script", WP_PLUGIN_URL.'/fmsapi/fmsapi_refresh_hybrid_schedule.js', array('jquery') );
   wp_localize_script( 'fmsapi_refresh_script', 'fmsapiAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'fmsapi_refresh_script' );


add_action( 'wp_ajax_nopriv_fmsapi_refresh_hybrid_schedule', 'fmsapi_refresh_hybrid_schedule');

add_action( 'init', 'my_script_enqueuer' );

add_shortcode("frc_results", "frc_results");

And finally, the JS code:

function fmsapi_refresh_hs() {
    document.getElementById("fmsapi_status").innerHTML = "Query Triggered";
    var data = {
        action: 'fmsapi_refresh_hybrid_schedule',
        year: '2017',
        event: 'ONOSH',
        team: '4783'

        type: "post",
        dataType: "json",
        url: fmsapiAjax.ajaxurl,
        data: data,
        success: function (response) {
            document.getElementById("frc_hybrid_table").innerHTML = response;
            document.getElementById("fmsapi_status").innerHTML = data['event'];

I had hard-coded the team number for testing purposes, but I can't even get the event to trigger the query. I'm sure the code is full of holes, but I can't even trigger the query to start debugging the rest.

  • I'm pretty sure my js file is the issue. I don't think I'm defining the function correctly.
    – Prdufresne
    Commented Nov 10, 2017 at 22:11
  • I updated the code above to reflect some changes. I attached the onchange event handler directly to the <select> which worked to trigger the script in th JS file, but it doesn't seem to be calling the function, or at least not receiving the correct return value.
    – Prdufresne
    Commented Nov 10, 2017 at 23:07

1 Answer 1


The action in the Ajax call must be the name of the action on the add_action without the wp_ajax_nopriv.* for example:

var data = {
  action: 'fmsapi_refresh_hybrid_schedule',
  year: '2017',
  event: 'ONOSH',
  team: '4783'

You are targeting a class named select_team but this isn't anywhere in your code. This is why your Js code cannot be fired on the change action.

Change this line:

// Output the form
echo '    <form>' .
'Select a Team:' .
'<select name="select_team" class="select_team">' .

You didn't get a return value because you just return the a string and not echo out the value of the string.

in the function fmsapi_refresh_hybrid_schedule()


return frc_populate_hybrid_schedule($year, $event, $team);


echo frc_populate_hybrid_schedule($year, $event, $team);

Also there should be a nonce field + remove the space from the add_action and many more small issues that seems to be out of context now.

  • Thank you, that helps. I intentionally left out the nonce field because I was trying to simplify the whole thing, but is it a requirement? I also added a line of code to show me if the javascript function gets triggered, and it doesn't appear to get triggered.
    – Prdufresne
    Commented Nov 10, 2017 at 21:54
  • @Prdufresne is not mandatory but can improve the security protecting the abuse of the system. developer.wordpress.org/reference/functions/wp_nonce_field Commented Nov 10, 2017 at 22:00
  • I was aware of that, and my intent was to add a nonce field once I had the core code working. It was just fewer sources of concern, and there are plenty in what I thought would be simple.
    – Prdufresne
    Commented Nov 10, 2017 at 22:04
  • Thank you for the edit. I see now that I was writing the code to trigger based on class, not name. In the meantime, I've gone and changed my trigger completely and it works. I can get the JS to run, but I am not getting a return value.
    – Prdufresne
    Commented Nov 10, 2017 at 23:09
  • @Prdufresne I have edit my answer Commented Nov 11, 2017 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.