CodeIgniter Laravel PHP Example Javascript jQuery MORE Videos New

Update record using CodeIgniter, Ajax


We use 3 file for update students data.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>View Ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>View data</h2>
	<table class="table table-bordered table-sm" >
    <thead>
      <tr>
		<th>Sl No</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
		<th>City</th>
		<th>Action</th>
      </tr>
    </thead>
    <tbody id="table">
      
    </tbody>
  </table>
</div>
<!-- Modal Update-->
    <div class="modal fade" id="update_country" role="dialog">
		<div class="modal-dialog modal-sm">
		  <div class="modal-content">
			<div class="modal-header" style="color:#fff;background-color: #e35f14;padding:6px;">
			  <h5 class="modal-title"><i class="fa fa-edit"></i> Update</h5>
			 
			</div>
			<div class="modal-body">
			
				<!--1-->
				<div class="row">
					<div class="col-md-3">
					    <label>Name</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="name_modal" id="name_modal" class="form-control-sm" required>
					</div>	
				</div>
			    <!--2-->
				<div class="row">
					<div class="col-md-3">
					    <label>Email</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="email_modal" id="email_modal" class="form-control-sm" required>
					</div>	
				</div>
			    <!--3-->
				<div class="row">
					<div class="col-md-3">
					    <label>Phone</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="phone_modal" id="phone_modal" class="form-control-sm" required>
					</div>	
				</div>
				<!--4-->
				<div class="row">
					<div class="col-md-3">
					    <label>City</label>
					</div>
					<div class="col-md-9">
						<input type="text" name="city_modal" id="city_modal" class="form-control-sm" required>
					</div>	
				</div>
				<input type="hidden" name="id_modal" id="id_modal" class="form-control-sm">
			</div>
			<div class="modal-footer" style="padding-bottom:0px !important;text-align:center !important;">
			<p style="text-align:center;float:center;"><button type="submit" id="update_data" class="btn btn-default btn-sm" style="background-color: #e35f14;color:#fff;">Save</button>
			<button type="button" class="btn btn-default btn-sm" data-dismiss="modal" style="background-color: #e35f14;color:#fff;">Close</button></p>
			
		  </div>
		  </div>
		</div>
	</div>
<!-- Modal End-->
<script>
$(document).ready(function() {
	$.ajax({
		url: "<?php echo base_url("Crud/viewajax");?>",
		type: "POST",
		cache: false,
		success: function(dataResult){
			$('#table').html(dataResult); 
		}
	});
	$(function () {
		$('#update_country').on('show.bs.modal', function (event) {
			var button = $(event.relatedTarget); 
			var id = button.data('id');
			var name = button.data('name');
			var email = button.data('email');
			var phone = button.data('phone');
			var city = button.data('city');
			var modal = $(this);
			modal.find('#name_modal').val(name);
			modal.find('#email_modal').val(email);
			modal.find('#phone_modal').val(phone);
			modal.find('#city_modal').val(city);
			modal.find('#id_modal').val(id);
		});
    });
	$(document).on("click", "#update_data", function() { 
		$.ajax({
			url: "<?php echo base_url("Crud/updaterecords");?>",
			type: "POST",
			cache: false,
			data:{
				type: 3,
				id: $('#id_modal').val(),
				name: $('#name_modal').val(),
				email: $('#email_modal').val(),
				phone: $('#phone_modal').val(),
				city: $('#city_modal').val()
			},
			success: function(dataResult){
				var dataResult = JSON.parse(dataResult);
				if(dataResult.statusCode==200){
					$('#update_country').modal().hide();
					alert('Data updated successfully !');
					location.reload();					
				}
			}
		});
	}); 
});
</script>
</body>
</html>

<?php
class Crud extends CI_Controller 
{
	public function __construct()
	{
		parent::__construct();
		$this->load->helper('url'); 
		$this->load->database();
		$this->load->model('Crud_model');
	}
	public function view()
	{
		$this->load->view('view');
	}
	function updaterecords()
	{
		if($this->input->post('type')==3)
		{
			$id=$this->input->post('id');
			$name=$this->input->post('name');
			$email=$this->input->post('email');
			$phone=$this->input->post('phone');
			$city=$this->input->post('city');
			$this->Crud_model->updaterecords($id,$name,$email,$phone,$city);
			echo json_encode(array(
				"statusCode"=>200
			));
		} 
	}
	public function viewajax()
	{
				$data=$this->Crud_model->display_records();
				$i=1;
				foreach($data as $row)
				{
					  echo "<tr>";
					  echo "<td>".$i."</td>";
					  echo "<td>".$row->name."</td>";
					  echo "<td>".$row->email."</td>";
					  echo "<td>".$row->phone."</td>";
					  echo "<td>".$row->city."</td>";
					  echo "<td><button type='button' class='btn btn-success btn-sm update' data-toggle='modal' data-keyboard='false' data-backdrop='static' data-target='#update_country'
			data-id=".$row->id."
			data-name=".$row->name."
			data-email=".$row->email."
			data-phone=".$row->phone."
			data-city=".$row->city."
			>Edit</button></td>";
					  echo "</tr>";
					  $i++;
				}
	}
}

<?php
class Crud_model extends CI_Model 
{
	function display_records()
	{
		$query=$this->db->query("select * from crud");
		return $query->result();
	}
	function updaterecords($id,$name,$email,$phone,$city)
	{
		$query="UPDATE `crud` 
		SET `name`='$name',
		`email`='$email',
		`phone`='$phone',
		`city`='$city' WHERE id=$id";
		$this->db->query($query);
	}
}