I working on a simple plugin that need to make a call and pass the results using AJAX.
Here is my function JS
function courseGradeHistory(student_id) {
// Ensure jQuery is available
if (typeof jQuery === 'undefined') {
console.error('jQuery is not defined. Please ensure jQuery is loaded before this script.');
return;
}
// Get the course code and student ID from the input fields
var course_code = document.getElementById("course_code").value;
var $resultsContainer = $('#studentCourseSchedule');
var student_id = student_id || document.getElementById("student_id").value;
console.log("Course Code: " + course_code);
console.log("Student ID: " + student_id);
// Validate inputs
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>');
// Make the AJAX request to fetch course grade history
// Ensure that 'ajaxurl' is defined in your WordPress environment
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'connect_course_history',
student_id: student_id,
course_code: course_code,
numberofdays: 30 // You can adjust this value as needed
},
success: function(data) {
$resultsContainer.html(data);
},
error: function(xhr, status, error) {
$resultsContainer.html('<p>Error loading courses. Please try again.</p>');
console.error('AJAX Error:', status, error);
}
});
}
Here is my PHP function
// register the ajax action for authenticated users
add_action(‘wp_ajax_connect_course_history’, ‘connect_course_history’);
// register the ajax action for unauthenticated users
add_action(‘wp_ajax_nopriv_connect_course_history’, ‘connect_course_history’);
function connect_course_history($student_id, $course_code, $numberofdays) {
global $wpdb;
$sql = "CALL sp_connect_course_history('$student_id', '$course_code', $numberofdays);";
$wpdb->query($sql);
$course_history = $wpdb->get_results($sql, ARRAY_A);
if (empty($course_history)) {
return "<p>No course history found for this student.</p>";
}
// Prepare the output
$output = "<table><tr><th>DATE</th><th>Grade</th></tr>";
foreach ($course_history as $course) {
$output .= "<tr>";
$output .= "<td>{$course['DATE']}</td>";
$output .= "<td>{$course['grade']}</td>";
$output .= "</tr>";
}
$output .= "</table>";
return $output;
}
This all I see in Developer Console
error @ myplugin_script.js:63
c @ jquery.min.js?ver=3.7.1:2
fireWith @ jquery.min.js?ver=3.7.1:2
l @ jquery.min.js?ver=3.7.1:2
(anonymous) @ jquery.min.js?ver=3.7.1:2
XMLHttpRequest.send
send @ jquery.min.js?ver=3.7.1:2
ajax @ jquery.min.js?ver=3.7.1:2
(anonymous) @ jquery-migrate.min.js?ver=3.4.1:2
e.<computed> @ jquery-migrate.min.js?ver=3.4.1:2
courseGradeHistory @ myplugin_script.js:48
onchange @ ?page_id=1238&student_id=954894:516
handleMouseUp_ @ unknown
I expect the results from the call to update resultsContainer.
