How to Add and show data on modal popup using Ajax

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Students extends CI_Controller {


public function __construct()
{
parent::__construct();
$this->load->model('Student_model');
}


public function index()
{


$student_list = $this->Student_model->student_list();
$data['student_list'] = $student_list;
//$this->load->view('admin/students',['student_list'=>$student_list]);
$this->load->view('admin/students',$data);

}

public function get_student_data()
{
$id = $this->input->get('id');
$get_student = $this->Student_model->get_student_data_model($id);
echo json_encode($get_student);
exit();
}



}

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Student_model extends CI_Model {

public function __construct() {
parent::__construct();

//load database library
$this->load->database();
}


public function student_list()
{
return $this->db->select('*')
->from('student_list')
->get()
->result();
}

public function get_student_data_model($id)
{
return $this->db->select('*')
->from('student_list')
->where(['id'=>$id])
->get()
->row();
}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<table class="table table-bordered table-striped">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<?php $i = 1; foreach ($student_list as $student) { ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $student->name; ?></td>
<td><?php echo $student->email; ?></td>
<td><?php echo $student->phone; ?></td>
<td>
<button class="btn btn-primary view_detail" relid="<?php echo $student->id; ?>">View</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>



<div id="show_modal" class="modal fade" role="dialog" style="background: #000;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 style="font-size: 24px; color: #17919e; text-shadow: 1px 1px #ccc;"><i class="fa fa-folder"></i> Student Details</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<thead class="btn-primary">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td><p id="student_name"></p></td>
<td><p id="student_email"></p></td>
<td><p id="student_phone"></p></td>
</tr>
</tbody>
</table>

<input type="text" name="id" id="id" />
<input type="text" name="name" id="name" />
<input type="text" name="email" id="email" />
<input type="text" name="phone" id="phone" />



</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>





<script type="text/javascript">
$(document).ready(function() {

$('.view_detail').click(function(){

var id = $(this).attr('relid'); //get the attribute value

$.ajax({
url : "<?php echo base_url(); ?>admin/students/get_student_data",
data:{id : id},
method:'GET',
dataType:'json',
success:function(response) {
//hold the response in id and show on popup
$('#student_name').html(response.name);
$('#student_email').html(response.email);
$('#student_phone').html(response.phone);

// put the value in modal popup
$('#id').val(response.id);
$('#name').val(response.name);
$('#email').val(response.email);
$('#phone').val(response.phone);

$('#show_modal').modal({backdrop: 'static', keyboard: true, show: true});
}
});
});
});
</script>

<div class="form-group row">
<label for="inputPassword3" class="col-3 col-form-label">Choose Plan</label>
<div class="col-9">
<select class="custom-select mt-3" id="plan_type" name="plan_type" onchange="get_amount()">
<option value="">--- Please select Plan ---</option>
<?php foreach($plantype as $plan){?>
<option value="<?php echo $plan->plan_type;?>"> <?php echo $plan->plan_type;?></option>
<?php } ?>
</select>
</div>
</div>


<div class="form-group row">
<label for="inputPassword3" class="col-3 col-form-label">Choose Amount</label>
<div class="col-9">
<input type="text" class="form-control" name="plan_amount" id="plan_amount" value="">


</select>
</div>
</div>


<script>

function get_amount()
{
var plan_type = document.getElementById("plan_type").value;

$.ajax({
url:'<?php echo base_url()?>students/getplanamountbasic',
data:{plan_type:plan_type},
method:'POST',
success:function(result){
$("#plan_amount").val(result);

//alert(result);
//var obj = JSON.parse(result);
//$("#plan_amount").val(obj.plan_amount);
}
});


}

</script>

public function getamount_basic($plan_type)
{
$this->db->select('plan_amount');
$this->db->from('plan');
$this->db->where('plan_type',$plan_type);
$query=$this->db->get();
//return $query->result();
$result = $query->row();

if($result)
{
return $result->plan_amount;
}else{
return '';
}


}

public function getplanamountbasic()
{
$plan_type = $this->input->post('plan_type');
$result = $this->User_model->getamount_basic($plan_type);
echo $result;
//echo json_encode($result);

exit;
}

<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">

<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<h4 class="page-title">All Member List</h4>
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a href="<?php echo base_url()?>admin/dashboard">Dashboard</a></li>
<li class="breadcrumb-item active">Members</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>


<div class="row">
<div class="col-12">
<div class="card-box table-responsive">
<h4 class="m-t-0 header-title"> </h4>


<table id="datatable" class="table table-bordered">
<thead>
<tr>
<th>U-Id</th>
<th>Name</th>
<th>Sp-Id</th>
<th>Sp-Name</th>
<th>position</th>
<th>Member</th>
<th>Mobile</th>
<th>R-date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>


<tbody>
<?php
if(!empty($memberlist))
{
foreach ($memberlist as $row){
?>
<tr>
<td><a href="<?php echo base_url()?>admin/basic/members/show_down_members/<?php echo $row->user_id;?>"><?php echo $row->user_id;?></a></td>
<td><?php echo $row->name;?></td>
<td><?php echo $row->sponser_code;?></td>
<td><?php echo $row->sponser_name;?></td>
<td><?php echo $row->user_position;?></td>
<td><?php echo $row->user_child;?></td>
<td><?php echo $row->mobile;?></td>
<td><?php echo $row->registration_date;?></td>
<td>

<?php if($row->status==1){?>

<button class="btn btn-icon waves-effect waves-light btn-success m-b-5"> <span>Yes</span> </button>

<?php } else { ?>

<button class="btn btn-icon waves-effect waves-light btn-danger m-b-5"> <i class="fa fa-remove"></i> </button>

<?php } ?>





</td>

<td>

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<div class="dropdown-menu">

<a class="dropdown-item" href="<?php echo base_url()?>admin/profile/profile_details/<?php echo $row->user_id;?>">Edit</a>
<a class="dropdown-item viewbtn" href="javascript:void();" id="<?php echo $row->user_id; ?>" >View</a>
</div>
</div>

</td>

</tr>
<?php } }else{ ?>

<tr>
<td>----- Recored Not Found -----</td>

</tr>

<?php }?>

</tbody>
</table>
</div>
</div>
</div> <!-- end row -->









</div>
<!-- end container -->
</div>
<!-- end content -->



<!-- show data on modal -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body" id="user_detail_model">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
$(document).on('click', '.viewbtn', function(){
var user_id = $(this).attr("id");

if(user_id != '')
{
$.ajax({

url:"<?php echo base_url();?>admin/basic/members/showmemberdetails",
method:"POST",
data:{user_id:user_id},
success:function(data){
$('#user_detail_model').html(data);
$('#dataModal').modal('show');
}
});
}
});
</script>

public function showmemberdetails()
{
$user_id = $this->input->post('user_id');
$data['user_details'] = $this->Admin_basic_model->get_user_details($user_id);
$result = $this->load->view('admin/basic/memberonmodal',$data,true);
echo $result;
exit;

}

public function get_user_details($user_id)
{
$this->db->select('*');
$this->db->from('user_register');
$this->db->where('user_id',$user_id);
$query=$this->db->get();
return $query->result();
}

<div class="card-box table-responsive">
<table class="table">
<thead>
<th>UserID</th>
<th>Name</th>
<th>Position</th>
<th>Sponser</th>
<th>Mobile</th>
<th>Child</th>
<th>Level</th>

</thead>
<tbody>

<?php foreach($user_details as $row){ ?>
<tr>
<td><?php echo $row->user_id;?></td>
<td><?php echo $row->name;?></td>
<td><?php echo $row->user_position;?></td>
<td><?php echo $row->sponser_code;?></td>
<td><?php echo $row->mobile;?></td>
<td><?php echo $row->user_child?></td>
<td><?php echo $row->user_level?></td>


</tr>
<?php } ?>
</tbody>


</table>
</div>