Codeigniter Tutorials

Home » Codeigniter »

CRUD using Ajax with modal popup in Codeigniter

View Page

File name : home_view.php

<!DOCTYPE html>
<html>
<head>
<title>PHP Ajax Update MySQL Data using Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">PHP Ajax Update MySQL Data Using Modal Popup</h3>
<br />
<div class="table-responsive">
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
<th width="15%">Delete</th>
</tr>
<?php
foreach ($datalist as $row)
{
?>
<tr>
<td><?php echo $row->name; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $row->id; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $row->id; ?>" class="btn btn-info btn-xs view_data" /></td>
<td><input type="button" name="delete" value="delete" id="<?php echo $row->id; ?>" class="btn btn-info btn-xs delete_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>


<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">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">

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



<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control" ></textarea>
<br />
<label>Select Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<label>Enter Designation</label>
<input type="text" name="designation" id="designation" class="form-control" />
<br />
<label>Enter Age</label>
<input type="text" name="age" id="age" class="form-control" />
<br />
<input type="hidden" name="employee_id" id="employee_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){

$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});

$(document).on('click', '.edit_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"<?php echo base_url();?>home/get_edit_data",
method:"POST",
data:{employee_id:employee_id},
dataType: 'json',
success:function(data){
//if (data[0] === undefined) return;
$('#name').val(data[0].name);
$('#address').val(data[0].address);
$('#gender').val(data[0].gender);
$('#designation').val(data[0].designation);
$('#age').val(data[0].age);
$('#employee_id').val(data[0].id);
$('#insert').val("Update");

$('#add_data_Modal').modal('show');

}
});
});

/********** Inset modal ************/

$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#name').val() == "")
{
alert("Name is required");
}
else if($('#address').val() == '')
{
alert("Address is required");
}
else if($('#designation').val() == '')
{
alert("Designation is required");
}
else if($('#age').val() == '')
{
alert("Age is required");
}
else
{
$.ajax({
//url:"insert.php",
url: "<?php echo base_url();?>home/data_insert",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);

location.reload();
//setTimeout("Refresh()", 30000); });
}
});
}
});

/********** End Inset modal ************/

/************ view data on modal popup *********/

$(document).on('click', '.view_data', function(){
var employee_id = $(this).attr("id");
if(employee_id != '')
{
$.ajax({
//url:"select.php",
url:"<?php echo base_url();?>home/show_data",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
}
});

/************ End view data on modal popup *********/

/* ************ Delete Record ****************/

$(document).on('click', '.delete_data', function(){
var employee_id = $(this).attr("id");
if(employee_id != '')
{
if(confirm('Are you sure to remove this record ?'))
{
$.ajax({
//url:"select.php",
url:"<?php echo base_url();?>home/delete_data/"+employee_id,
method:"POST",
data:{employee_id:employee_id},
success:function(data){
//alert("deleted success");
location.reload();

},
error:function(data){
alert("error");

}

});
} }
});

/*********** Delete Record end ***************/

});
</script>

Controller :

File Name : Home.php

<?php
defined('BASEPATH') OR exit('no direct script access allowed');
class Home extends CI_Controller
{
public function __construct()
{
parent::__construct();
}

public function index()
{

$userresult = $this->Auth_model->get_record_details();
$data['datalist'] = $userresult;
$this->load->view('home_view',$data);

}

public function data_insert()
{
//'image' => $this->input->post('image')
$id = $this->input->post('employee_id');

if($id != ''){
// update Data
$data = array(

'name' => $this->input->post('name'),
'address' => $this->input->post('address'),
'gender' => $this->input->post('gender'),
'designation' => $this->input->post('designation'),
'age' => $this->input->post('age')

);

$this->Auth_model->update_edit_form($data,$id);
$data['message'] = 'Data Inserted Successfully';
exit;

}
else{
// Insert Data
$data = array(

'name' => $this->input->post('name'),
'address' => $this->input->post('address'),
'gender' => $this->input->post('gender'),
'designation' => $this->input->post('designation'),
'age' => $this->input->post('age')

);

$this->Auth_model->form_insert($data);
$data['message'] = 'Data Inserted Successfully';

exit;
}
}

public function get_edit_data()
{
$id = $this->input->post('employee_id');
$this->db->select('*');
$this->db->from('tbl_employee');
$this->db->where('id',$id);
$query = $this->db->get();
$fetchdata = $query->result();
$data['alldata'] = $fetchdata;
//echo json_encode($data);
echo json_encode($fetchdata);

exit;
}

public function show_data()
{
$id = $this->input->post('employee_id');
$this->db->select('*');
$this->db->from('tbl_employee');
$this->db->where('id',$id);
$query = $this->db->get();
$fetchdata = $query->result();
$data['showmodaldata'] = $fetchdata;

$show_html = $this->load->view('showmodalview',$data,true);
echo $show_html;
exit;

}

public function delete_data()
{
$id = $id = $this->uri->segment(3);
if (empty($id))
{
show_404();
}

$this->db->where('id', $id);
$this->db->delete('tbl_employee');
$this->session->set_flashdata('message', 'Deleted Sucessfully');
exit;

}

}

Model

File Name : Auth_model.php

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

class Auth_model extends CI_Model
{
public function __construct()
{
parent::__construct();
}

public function get_record_details()
{
$this->db->select('*');
$this->db->from('tbl_employee');
$query = $this->db->get();
if ($query->num_rows() > 0) {
return $query->result();
} else {
return false;
}
}

public function form_insert($data)
{

$this->db->insert('tbl_employee', $data);
}

public function update_edit_form($data,$id)
{
$this->db->where('id',$id);
$this->db->update('tbl_employee',$data);
}

}

database

CREATE TABLE `tbl_employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_employee`
--

INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'mahtab', 'delhi', 'Male', 'Driver', 36, '1.jpg'),
(2, 'mahi', 'delhi', 'Male', 'developer', 18, ''),
(3, 'simran', 'ara', 'Female', 'stud', 18, '');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=199;
COMMIT;

Itechtuto