Your PHP function connect_course_history($student_id, $course_code, $numberofdays) is declared to accept three arguments. However, when WordPress calls an AJAX action, it doesn't automatically pass $_POST or $_GET variables as direct function arguments.
<?php
add_action('wp_ajax_connect_course_history', 'connect_course_history_callback');
add_action('wp_ajax_nopriv_connect_course_history', 'connect_course_history_callback');
function connect_course_history_callback() {
global $wpdb;
// IMPORTANT: Retrieve data from $_POST
$student_id = isset($_POST['student_id']) ? sanitize_text_field($_POST['student_id']) : '';
$course_code = isset($_POST['course_code']) ? sanitize_text_field($_POST['course_code']) : '';
$numberofdays = isset($_POST['numberofdays']) ? intval($_POST['numberofdays']) : 30;
if (empty($student_id) || empty($course_code)) {
echo "<p>Error: Missing Student ID or Course Code.</p>";
wp_die(); // Always use wp_die() or die() at the end of AJAX callbacks
}
$sql = $wpdb->prepare("CALL sp_connect_course_history(%s, %s, %d);", $student_id, $course_code, $numberofdays);
$wpdb->query($sql);
$course_history = $wpdb->get_results($sql);
if ($wpdb->last_error) {
error_log("Database Error in connect_course_history: " . $wpdb->last_error);
echo "<p>Database error: Could not retrieve course history.</p>";
wp_die();
}
if (empty($course_history)) {
echo "<p>No course history found for this student or course.</p>";
wp_die();
}
$output = "<table><thead><tr><th>DATE</th><th>Grade</th></tr></thead><tbody>";
foreach ($course_history as $course) {
$output .= "<tr>";
$output .= "<td>" . esc_html($course->DATE) . "</td>";
$output .= "<td>" . esc_html($course->grade) . "</td>";
$output .= "</tr>";
}
$output .= "</tbody></table>";
echo $output;
wp_die();
}
?>
Your JavaScript is mostly fine, as it correctly sends the data. The problem was on the PHP side.
function courseGradeHistory(student_id_param) {
if (typeof jQuery === 'undefined') {
console.error('jQuery is not defined. Please ensure jQuery is loaded before this script.');
return;
}
var course_code = document.getElementById("course_code").value;
var $resultsContainer = jQuery('#studentCourseSchedule');
var student_id = student_id_param || document.getElementById("student_id").value;
console.log("Course Code: " + course_code);
console.log("Student ID: " + student_id);
if (!student_id || !course_code) {
alert("Please provide both Student ID and Course Code.");
return;
}
alert("Loading Course History for Student ID: " + student_id + " and Course Code: " + course_code);
$resultsContainer.html('<p>Loading Courses...</p>');
jQuery.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'connect_course_history',
student_id: student_id,
course_code: course_code,
numberofdays: 30
},
success: function(data) {
$resultsContainer.html(data);
console.log("AJAX Success:", data);
},
error: function(xhr, status, error) {
$resultsContainer.html('<p>Error loading courses. Please try again.</p>');
console.error('AJAX Error:', status, error, xhr.responseText);
}
});
}