Making an AJAX call to refresh a table

Question

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):

ob_start();

// 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>' .
'</form>';


// 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();
ob_end_clean();
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'
    };

    jQuery.ajax({
        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.

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

Replace

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

With

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

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.