Codeigniter Ajax Crud using DataTables - Insert _ Add Data - codeigniter

Question

There is this codeigniter tutorial from weblesson youtube page About working with Datatables and Codeigniter.
But i'm having some difficulties inserting data into the database.
Controller:
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()
);
$this->load->model('crud_model');
$this->crud_model->insert_crud($insert_data);
echo 'Data Inserted';
}
}
function upload_image()
{
if(isset($_FILES["user_image"]))
{
$extension = explode('.', $_FILES['user_image']['name']);
$new_name = rand() . '.' . $extension[1];
$destination = './upload/' . $new_name;
move_uploaded_file($_FILES['user_image']['tmp_name'], $destination);
return $new_name;
}
}
View Class:
<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" data-dismiss="modal">×</button>
<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="submit" name="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
When i ran this code, i got the following errors:
Error message
And when i did
if(isset($_POST["action"]) && $_POST["action"] == "Add")
i got an empty alert box

Answer 1

In controller,at your constructor load url helper. and save file as Main.php with code::
function __construct()
{
$this->load->helper('url');
}
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()
);
$this->load->model('crud_model');
$this->crud_model->insert_crud($insert_data);
echo 'Data Inserted';
}
}
function upload_image()
{
if(isset($_FILES["user_image"]))
{
$extension = explode('.', $_FILES['user_image']['name']);
$new_name = rand() . '.' . $extension[1];
$destination = './upload/' . $new_name;
move_uploaded_file($_FILES['user_image']['tmp_name'], $destination);
return $new_name;
}
}
at your view define a input of type hidden with name action and value add.And define action of your form.As follows..
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form" action="<?php echo base_url('main/user_action');?>">
<input type="hidden" name="action" value="add">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<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="submit" name="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
Hope it will works..

Answer 2

I did fix the problem but don't know if it's the best way to do it
what i did was change this two codes:
controller:
public function user_action(){
if(isset($_POST["action"]) && $_POST["action"] == "Add")
{
$insert_data = array(
'first_name' => $this->input->post('first_name'),
'last_name' => $this->input->post("last_name"),
'image' => $this->upload_image()
);
$this->load->model('crud_model');
$this->crud_model->insert_crud($insert_data);
echo 'Data Inserted';
}
and Ajax:
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
var firstName = $('#first_name').val();
var lastName = $('#last_name').val();
var extension = $('#user_image').val().split('.').pop().toLowerCase();
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() . 'main/user_action'?>",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data)
{
alert(data);
$('#user_form')[0].reset();
$('#userModal').modal('hide');
dataTable.ajax.reload();
}
});
}
else
{
alert("Bother Fields are Required");
}
});
for controller:
where it say:
if(isset($_POST["action"]) && $_POST["action"] == "Add")
remove it
In in the Ajax Code:
create a link variable to get the action attribute of the form like so:
var link = $('#user_form').attr('action');
and parse it to to the ajax url.
And that's it!

Answer 3

I did fix the problem but don't know if it's the best way to do it
<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" data-dismiss="modal">Close</button>
</div>
This is a hidden field that we have used to describe database operations like insert, update, delete