I have a form as shown below
I want session to be populated based on intake selection, then from session selection, select all payment plans belonging to that session and display them in the table below. I am using Jquery and Ajax to implement that. Here is what I have in my index view;
<script>
jQuery(document).ready(function() {
jQuery('select').select2();
let payment_plans = [];
const session_id = $('#session_id').val();
$('#intake_id').change(function(){
// clear all contents in payment_plans
payment_plans = [];
$('div#lg_in').addClass('lg_in');
const intake_id = $(this).val();
var sessions = $('#session_id');
$.ajax({
type: 'post',
url: location.href,
data: {
command : 'get_sessions',
intake_id : intake_id
},
success: function (response) {
//console.log(JSON.parse(response));
data = JSON.parse(response);
//data = JSON.stringify(response);
//var data = angular.fromJson(response);
var sArr = [];
for(i in data.sessions){
/*if(session_id == '' &&
data.time >= parseInt(data.sessions[i].Session.session_start)
&& data.time <= parseInt(data.sessions[i].Session.session_end)) {
session_id = data.sessions[i].Session.id;
}*/
sArr.push({id: data.sessions[i].Session.id, text: data.sessions[i].IntakeBatch.period_name + ' / ' + data.sessions[i].Session.session_description});
}
sessions.empty().select2({data: sArr}).val(session_id).trigger('change');
for(i in data.payment_plans){
payment_plans.push(data.payment_plans[i].PaymentPlan);
}
//console.log(payment_plans);
$('div#lg_in').removeClass('lg_in');
},
error: function (err) {
console.log(err);
$('div#lg_in').removeClass('lg_in');
}
});
});
$('#session_id').change(function(){
$('#table_body').html('');
const session = $("#session_id option:selected" ).text();
const intake = $("#intake_id option:selected" ).text();
const session_id = $(this).val();
let table_rows = '';
let count = 1;
for(i in payment_plans){
// prepare the table
// first clear the table body
//console.log(payment_plans[i]);
//console.log(i);
//console.log(payment_plans[i].payment_plan);
const id = payment_plans[i].id;
const payment_plan = payment_plans[i].payment_plan;
const submission_date = payment_plans[i].submission_date;
const session_id1 = payment_plans[i].session_id;
if(parseInt(session_id) === parseInt(session_id1)){
$('#table_body').append(`<tr>
<td style='vertical-align: top;'>${count} </td>
<td style='vertical-align: top;'> ${payment_plan} </td>
<td style='vertical-align: top;'> ${submission_date} </td>
<td style='vertical-align: top;'> ${intake} </td>
<td style='vertical-align: top;'>${session} </td>
<td><a onclick="delete_payment_plan(${id})" href='#'>delete</a></td>
</tr>`);
count ++;
}
}
});
// trigger change on session if intake and session_id are not empty
//console.log($('#intake_id').val());
//console.log($('#session_id').val());
if($('#session_id').val() != '' && $('#intake_id').val() != ''){
// trigger intake change
$('#intake_id').trigger('change');
setTimeout(function(){
// set the selected session
$('#session_id').val(session_id);
// trigger session
$('#session_id').trigger('change');
},2000);
}
});
} </script>
Then my index() method in the PaymentPlanController.php is;
public function index()
{
$this->loadModel('Intake');
$this->loadModel('Session');
$this->loadModel('PaymentPlan');
$intake = $this->Intake->find('list', array(
'fields' => array('Intake.id', 'Intake.intake_description'),
'order' => 'Intake.intake_description ASC'
));
$this->set('intake', $intake);
$session = $this->Session->find('list', array(
'fields' => array('session.id', 'session.session_description'),
'order' => 'session.session_description ASC'
));
$this->set('session', $session);
$session_id = $intake_id = '';
if ($this->request->is('post')) {
// check whether there is
$command = $this->request->data('command');
$intake_id = $this->request->data('intake_id');
if (!empty($command)) {
switch ($command) {
case 'get_sessions':
// get all payment plans for intake
$payment_plans = $this->PaymentPlan->find('all', array(
'conditions' => array('intake_id' => $intake_id),
'recursive' => -1
));
$this->set('response', array(
'time' => time(),
'intake_id' => $intake_id,
'payment_plans' => $payment_plans,
'sessions' => $this->Session->getSessionsByIntake($intake_id)
));
$this->layout = 'ajax';
$this->render('/Elements/tasks/json/task');
return;
break;
case 'delete':
// do delete
}
} else {
// process the rest of the request e.g saving the data
$this->PaymentPlan->create();
$data = $this->request->data;
if ($this->PaymentPlan->save($data['AcceptanceLetter'])) {
// set the default values for the form
$session_id = $this->PaymentPlan->session_id;
$intake_id = $this->PaymentPlan->intake_id;
$this->Session->setFlash(__('The data has been saved'));
//$this->redirect('index');
} else {
$this->Session->setFlash(__('The data could not be saved. Please, try again.'));
}
}
}
//load data
$letters = $this->PaymentPlan->find('all', array('recursive' => 1));
$this->set('letters', $letters);
$this->set("intake_id", $intake_id);
$this->set("session_id", $session_id);
}
Now, when I parse the response array like this data=JSON.parse(response);, the page hangs in the browser and it doesn't load.
When I inspect the page in the browser, I get this;
When I try using data=JSON.stringify(response);, the sessions don't populate. I am able to get an array with values when I data = response; console.log(data); without the JSON.parse().
{ time: 1662641039, intake_id: "1178", payment_plans: [], sessions: (8) […] }
How can I correctly parse my response array and get in my for(){ //code below }; and populate the sessions in the drop down menu?
for(i in data.sessions){
/*if(session_id == '' &&
data.time >= parseInt(data.sessions[i].Session.session_start)
&& data.time <= parseInt(data.sessions[i].Session.session_end)) {
session_id = data.sessions[i].Session.id;
}*/
sArr.push({id: data.sessions[i].Session.id, text: data.sessions[i].IntakeBatch.period_name + ' / ' + data.sessions[i].Session.session_description});
}