Codeigniter Ajax Crud using DataTables - Update - Edit Data

[trendingnowtech]

thanks for this video... it helps a lot to the programmers, how about multiple insert using the same data in the video? is it possible also?

[robinsharawa]

where is the previous video for this tutorial, please share the link

[isaradidulantha]

i have a problem with fetching images to the table. i think it's database. in database how to put images as a blob or varchar file. or did you created a upload file?

[mantrarajway]

Need update using one more drop down select input then how does work this or need changes in this code

[attaroams]

hello sir when i click edit i need joint two table in edit metod but, it;s not working hw to do that, i trid to much but not work event my joint query is ok working in simple controller, but in data table it;s not working plz tell me how do

to that

[markanthonymillan]

i copy codes from different folder location in codeigniter application folder and also created a database name crud, table users i follow everything but i still cannot view content, i always get the Not Found Result..

[aeznazen]

why does having an input hidden makes the update function act like add function

[bedo]

thanks . i have added some updates in action and submit for form and it worked//
adding hidden button can be changed for every form.. one for add and other for update then changed my condition like this


because ajax send hidden and files and posts type but not submit so i have created hidden input and verified my condition by its

[ashishkumarshyamlal]

Sir, Please update the code source code by adding hidden text field and other changes so that code works perfetctly.

[kintalinaveesh]

just copy the below code change anything...its working now...i modified few lines.

crud.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Crud extends CI_Controller {
//functions
function index(){
$data["title"] = "Codeigniter Ajax CRUD with Data Tables and Bootstrap Modals";
$this->load->view('crud_view', $data);
}
function fetch_user(){

$fetch_data =
$data = array();
foreach($fetch_data as $row)
{
$sub_array = array();
$sub_array[] = '<img class="img-thumbnail" width="50" height="35" />';
$sub_array[] = $row->first_name;
$sub_array[] = $row->last_name;
$sub_array[] = '<button type="button" name="update" id="'.$row->id.'" class="btn btn-warning btn-xs">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row->id.'" class="btn btn-danger btn-xs">Delete</button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $this->crud_model->get_all_data(),
"recordsFiltered" => $this->crud_model->get_filtered_data(),
"data" => $data
);
echo json_encode($output);
}
function user_action(){
if($_POST["action"] == "Add")
{
$insert_data = array(
'first_name' => $this->input->post('first_name'),
'last_name' => $this->input->post("last_name"),
'image' => $this->upload_image()
);


echo 'Data Inserted';
}
}
function upload_image()
{

{
$extension = explode('.',
$new_name = rand() . '.' . $extension[1];
$destination = './upload/' . $new_name;
move_uploaded_file($_FILES['user_image']['tmp_name'], $destination);
return $new_name;
}
}
}



crud_modal.php


<?php

class Crud_model extends CI_Model
{
var $table = "users";
var $select_column = array("id", "first_name", "last_name", "image");
var $order_column = array(null, "first_name", "last_name", null, null);
function make_query()
{



{
$this->db->like("first_name", $_POST["search"]["value"]);
$this->db->or_like("last_name", $_POST["search"]["value"]);
}
if(isset($_POST["order"]))
{
$this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else
{
$this->db->order_by('id', 'DESC');
}
}
function make_datatables(){
$this->make_query();
if($_POST["length"] != -1)
{
$this->db->limit($_POST['length'], $_POST['start']);
}
$query = $this->db->get();
return $query->result();
}
function get_filtered_data(){
$this->make_query();
$query = $this->db->get();
return $query->num_rows();
}
function get_all_data()
{
$this->db->select("*");

return
}
function insert_crud($data)
{
$this->db->insert('users', $data);
}
}
?>


crud_view.php


<html>
<head>
<title><?php echo $title; ?></title>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:900px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:10px;
}
</style>
</head>
<body>
<div class="container box">
<h3 align="center"><?php echo $title; ?></h3><br />
<div class="table-responsive">
<br />
<button type="button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button>
<br /><br />
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th width="10%">Image</th>
<th width="35%">First Name</th>
<th width="35%">Last Name</th>
<th width="10%">Edit</th>
<th width="10%">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
<h4 class="modal-title">Add User</h4>
</div>
<div class="modal-body">
<label>Enter First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<br />
<label>Enter Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<br />
<label>Select User Image</label>
<input type="file" name="user_image" id="user_image" />
</div>
<div class="modal-footer">
<input type="hidden" name="action" class="btn btn-success" value="Add" />
<input type="submit" name="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default"

</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#user_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"<?php echo base_url() . 'crud/fetch_user'; ?>",
type:"POST"
},
"columnDefs":[
{
"targets":[0, 3, 4],
"orderable":false,
},
],
});
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
var firstName = $('#first_name').val();
var lastName = $('#last_name').val();
var extension =
if(jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1)
{
alert("Invalid Image File");
$('#user_image').val('');
return false;
}
if(firstName != '' && lastName != '')
{
$.ajax({
url:"<?php echo base_url() . 'crud/user_action'?>",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data)
{
alert(data);
$('#user_form')[0].reset();

dataTable.ajax.reload();
}
});
}
else
{
alert("Bother Fields are Required");
}
});
});
</script>

[adoniaand]

Guys i can't show the modal for uptade.
And i gate error like
Undefined index: user_id
Someone help thanks

[vattanakkm]

Why it doesn't have any action when I click on the update? Please help me solve the problem, Sir?

[zainqureshi]

When i click on Edit button the it call if($_POST["action"] == "Add") condition instead of if($_POST["action"] == "Edit") Edit condtion and function again insert data instead of update data.So please help me.

[craiglorck]

Hi Webslesson, when I click Edit, it doesn't fill up the value of my textboxes, I'm confused, can you help me?

[luisdiazruiz]

it did not work
if ($_POST["action"] == "Add")
<input type="hidden" name="user_id" id="user_id" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />

[vullinganarayanarao]

i didn't get any output.errors occured

[jhonoscarvillafana]

someone please help me how to view that uploaded file. example: pdf or image

[aditigupta]

it is giving me undefined index action.... plz tell me what to do.. ?

[ahsankalim]

Sir!! Can you send mei databse coding??? I'm face troubling in database coding!!

[GIULIASIX]

Undefined variable: user_id some one can help-me please!