get values and update in modal popup without page refresh in codeigntier - mysql

Question

guys, I am trying to get values from the modal popup and update the values without page refresh in CodeIgniter can anyone help me how to do that
Here is my modal popup:
<td class='text-center'>
<form method="post" action="" id="emp-update">
<input type="hidden" name="emp_id" value="<?php echo $emp->id; ?>">
<button type="button" href="#updateEmp" onclick="getSummary(36)" class="btn btn-info btn-xs" data-toggle="modal"><i class='fas fa-edit'></i></button>
</form>
</td>
<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="" id="emp-create" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Update Employee</h4>
</div>
<div class="modal-body" id="modal-body">
<div class="form-group">
<label for="emp_name" class="col-sm-4 control-label">Name : </label>
<div class="col-md-8">
<input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-4 control-label">Salary: </label>
<div class="col-md-8">
<input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
Here is my controller:
public function editEmp() {
if ($this->input->post('emp_id')) {
$id = $this->input->post('emp_id');
$data['empName'] = $this->Emp_model->getEmpName($id);
$this->load->view('template/header');
$this->load->view("employee/createemployee", $data);
$this->load->view('template/footer');
}
}
Here is my model:
function getEmpName($id) {
$this->db->select('*');
$this->db->from('employees');
$this->db->where('id', $id);
if ($query = $this->db->get()) {
return $query->result_array();
} else {
return false;
}
}
Can anyone help me how we can do that?

Answer 1

Hope this will help you :
Your model method getEmpName method should be like this :
function getEmpName($id) {
$this->db->select('*');
$this->db->from('employees');
$this->db->where('id', $id);
if ($query->num_rows() > 0 ) {
return $this->db->get()->row();
} else {
return false;
}
}
your mdoel html should be like this :
<div class="modal fade" id="updateEmp" tabindex="-1" role="dialog" aria-labelledby="updateEmp" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="" id="emp-update-form" class="form-horizontal">
<input type="hidden" name="emp_id" value="<?=$empName->id;?>">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Update Employee</h4>
</div>
<div class="modal-body" id="modal-body">
<div class="form-group">
<label for="emp_name" class="col-sm-4 control-label">Name : </label>
<div class="col-md-8">
<input type="text" id="emp_name" name="emp_name" class="form-control" placeholder="Name" value="<?=$empName->emp_name;?>" />
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-4 control-label">Salary: </label>
<div class="col-md-8">
<input type="text" id="salary" name="salary" class="form-control" placeholder="Salary" value="<?=$empName->salary;?>" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" value="submit" class="btn btn-primary submit" id="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
Replace Controller_name with your controller name in ajax url
$(function() {
$('#emp-update-form').on('submit',function(e){
var formdata = $(this).serialize();
alert('submit is working');
$.ajax({
type: "POST",
url: "<?=site_url('Controller_name/getEmployeeDetails');?>",
dataType: 'json',
data: formdata,
success: function(res) {
if (res)
{
alert(res.status);
}
},
});
e.preventDefault();
});
});
Your controller method getEmployeeDetails should be like this :
public function getEmployeeDetails()
{
//print_r($this->input->post());
$response['status'] = 'success';
echo json_encode($response);
exit;
}

Answer 2

you can try Ajax on submit your modal popup form
$("#emp-create").on("submit",function(){
var emp_data = $(this).serialize();
$.ajax({
url: 'your controller url to update the popup details',
data: emp_data,
type: 'POST',
success: function(){}
});
});