0

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.

  • I'm pretty sure my js file is the issue. I don't think I'm defining the function correctly. – Prdufresne Nov 10 '17 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 Nov 10 '17 at 23:07
2

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.

  • 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 Nov 10 '17 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 – Drupalizeme Nov 10 '17 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 Nov 10 '17 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 Nov 10 '17 at 23:09
  • @Prdufresne I have edit my answer – Drupalizeme Nov 11 '17 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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