@Catalin as promised, here is the solution to his issue.
This👇 was added to his student Select field ClientEvents.
$('#ctrl-Student_Name').on('change', function(){
let student_name = $(this).val();
sendData(student_name);
});
function sendData(student_name){
var data = {// We are trying to organize our data for the server
student: student_name
}
//We now make an ajax post to the server
var request = $.ajax({
type: 'POST', // the type of request we are making.
url: siteAddr+'api/getGoals/?csrf_token='+csrfToken, //our api link/url
data: data, // the data we are sending to the server
cache: false, // we dont want the request to be cached.
});
// Now we check for response that will be gotten from the server.
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
$('#ctrl-Goal_1').val(response.data.Goal_1);
$('#ctrl-Goal_2').val(response.data.Goal_2);
$('#ctrl-Goal_3').val(response.data.Goal_3);
$('#ctrl-Goal_4').val(response.data.Goal_4);
});
// Now we check for errors we get when trying to make our post request.
request.fail(function (jqXHR, textStatus, errorThrown){
});
}
and this👇 was added to his ApiController.php.
function getGoals(){
if(!empty($_POST)){ // we check if the post variable is not empty.
$student = $_POST['student']; // pass the student to our variable $student
$db = $this->GetModel();
$db->where("student_name", $student);
$done = $db->getOne("student"); // get our data from database
if($done) { // checks if it was successful or not
$res['success'] = true;
$res['msg'] = "Action Successfully.";
$res['data'] = $done;
} else{
$res['success'] = false;
$res['msg'] = "Error getting student goal.";
}
render_json($res); // we return result of the update query in JSON format as expected.
} else {
$res['success'] = false;
$res['msg'] = "No post data detected.";
render_json($res); // here we return access denied if Csrf fails
}
}
What the codes above do is, get the value from the selected field, which is student, which then sends the value to an API link called getGoals. getGoals then queries the student table to get the student's goals which are then returned to the JS code, which the JS code assigns them to their fields.