How do i passed data into modal using ajax codeigniter - php

Question

Im trying to solve this problem for few hours already im trying to fetch a data from database into modal to update it but im having difficulty in fetching the data when i click the button that will trigger to display the modal it doesnt show i tried many things already this is my code
Script
function show_profile(){
$.ajax({
type : 'ajax',
url : '<?php echo site_url('pages/profile_data')?>',
async : false,
dataType : 'json',
success : function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>' +
'<th>'+'Faculty Name : '+ '</th>' + '<td>' + data[i].faculty_name+'</td>'+ '</tr>' + '<tr>' +
'<th>'+'Faculty Type : '+ '</th>' + '<td>' + data[i].faculty_type+'</td>'+ '</tr>' + '<tr>' +
'<th>'+'Email Address : '+ '</th>' + '<td>' + data[i].email_address+'</td>'+ '</tr>' + '<tr>' +
'<th>'+'Department Name: '+ '</th>' + '<td>' + data[i].department_name+'</td>'+ '</tr>' + '<tr>'+
'Edit'+' '+
'<th>'+'Update' + '</th>' + '</tr>';
}
$('#show_data').html(html);
}
});
}
$('#show_data').on('click','.item_update',function(){
var faculty_name = $(this).data('faculty_name');
var faculty_type = $(this).data('faculty_type');
var email_address = $(this).data('email_address');
var department_name = $(this).data('department_name');
$('#Modal_update_info').modal('show');
$('[name="faculty_name_edit"]').val(faculty_name);
$('[name="faculty_type_edit"]').val(faculty_type);
$('[name="email_address_edit"]').val(email_address);
$('[name="department_name_edit"]').val(department_name);
});
$('#btn_update').on('click',function(){
var faculty_name = $('#faculty_name_edit').val();
var faculty_type = $('#faculty_type_edit').val();
var department_name = $('#department_name_edit').val();
var email_address = $('#email_address_edit').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('pages/update_profile')?>",
dataType : "JSON",
data : {faculty_name:faculty_name, faculty_type:faculty_type, department_name:department_name, email_address:email_address },
success: function(data){
$('[name="faculty_name_edit"]').val("");
$('[name="faculty_type_edit"]').val("");
$('[name="department_name_edit"]').val("");
$('[name="email_address_edit"]').val("");
$('#Modal_update_info').modal('hide');
show_profile();
}
});
return false;
});
Model
public function profile_list()
{
$faculty_name = $this->session->userdata('faculty_name');
$query = $this->db->select('*')
->from('faculty')
->where('faculty_name', $faculty_name)
->join('department','department.department_id = faculty.department_id')
->get();
return $query->result();
}
function update_profiledata(){
$faculty_name = $this->input->post('faculty_name');
$faculty_type = $this->input->post('faculty_type');
$department_name = $this->input->post('department_name');
$email_address = $this->input->post('email_address');
$this->db->where('faculty_name', $faculty_name);
$result = $this->db->update('faculty');
return $result;
}
Controller
public function profile_data()
{
$data = $this->page_model->profile_list();
echo json_encode($data);
}
public function update_profile()
{
$data = $this->page_model->update_profiledata();
echo json_encode($data);
}
View
<div class="card-header p-3 mb-2 bg-dark text-white text-align:center">
My Profile
</div>
<div class="card-body">
<table class="table table-striped" id="mydata">
<tbody id="show_data" style="text-align:left">
</tbody>
</table> </div>
<form>
<div class="modal fade" id="Modal_update_info" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update User Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-6 col-form-label"><b>Faculty Name</b></label>
<div class="col-md-6">
<input type="text" name="faculty_name_edit" placeholder="faculty_name" id="faculty_name_edit" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-md-6 col-form-label"><b>Faculty Type</b></label>
<div class="col-md-6">
<input type="text" name="faculty_type_edit" id="faculty_type_edit" class="form-control" placeholder="faculty_type" readonly>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-6 col-form-label"><b>Department</b></label>
<div class="col-md-6">
<input type="text" name="department_name_edit" id="department_name_edit" class="form-control" placeholder="department_name" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-md-6 col-form-label"><b>Email</b></label>
<div class="col-md-6">
<input type="text" name="email_address_edit" id="email_address_edit" class="form-control" placeholder="email_address" required="email ">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_edit" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>