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.