I'm just new in codeigniter with ajax approach. Well, I have a form wherein the user needs to fill up all the fields because it's required. I've done the error messages if the field is empty. I'm getting a response through JSON from the controller, if data is valid or not. Now my problem is how can I appear the notification if the data has been sent to the database? Sending data is working, btw.
Form
<form action="<?=base_url();?>execute/insert" id="formAddContent" autocomplete="off" class="nobottommargin" method="POST">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Title <small>*</small></label>
<input type="text" name="content_title" id="content_title" class="sm-form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Type <small>*</small></label>
<select name="content_type" id="content_type" class="sm-form-control">
<option value="">Type</option>
<option value="try">Try</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="">Description <small>*</small></label>
<textarea class="required sm-form-control" id="content_body" name="content_body" rows="6" cols="30" required></textarea>
</div>
</div>
<div class="col-md-3 margintop-sm">
<button type="submit" class="btn btn-danger" id="data-content--submit">Submit</button>
</div>
</div>
</form>
Controller
public function validate($name, $label, $check) {
return $this->form_validation->set_rules($name, $label, $check);
}
public function insert() {
$data = array('success' => false, 'messages' => array());
$name = array('content_title','content_type','content_body');
$label = array('Title', 'Type', 'Content');
$verify = 'trim|required';
$this->validate($name[0], $label[0], $verify);
$this->validate($name[1], $label[1], $verify);
$this->validate($name[2], $label[2], $verify);
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
if($this->form_validation->run()) {
$data['success'] = true;
} else {
foreach($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
}
echo json_encode($data);
$data = array (
$name[0] => $this->pass($name[0]),
$name[1] => $this->pass($name[1]),
$name[2] => $this->pass($name[2])
);
$result = $this->model->CreateContent($data);
if($result) {
redirect('master/content','refresh');
}
}
Model
public function CreateContent($data) {
$check = $this->db->select('content_title')->from('tblposts')->where(array('content_title' => $data['content_title']))->get();
if($check->num_rows() > 0) {
$this->notify([true,'#336699','#fff', 'Title already exists.']);
return $check;
} else {
$result = $this->db->insert('tblposts', $data);
$this->notify([true,'#336699','#fff', 'New content has been added.']);
return $result;
}
}
public function notify($data) {
echo json_encode(['success'=>$data[0],'bgcolor'=>$data[1],'color'=>$data[2],'message'=>$data[3]]);
}
jQuery-AJAX
$('#formAddContent').submit(function(e) {
e.preventDefault();
var data = {
content_title: $('#content_title').val(),
content_type: $('#content_type').val(),
content_body: $('#content_body').val()
};
var url = $(this).attr('action');
$.ajax({
type: 'POST', url: url, data: data, cache: false, dataType: 'json',
success:function(data) {
if(data.success == true) {
successful(data.success,data.bgcolor,data.color,data.message);
} else {
$.each(data.messages, function(key,value) {
var element = $('#' + key);
element.closest('div.form-group')
.removeClass('has-error')
.addClass(value.length > 0 ? 'has-error' : 'has-success')
.find('.text-danger').remove();
element.after(value);
});
}
}
});
});
//Custom method if the request was success.
function successful(data,bgcolor,color,message) {
data == true ? notify(bgcolor,color,message) : notify(bgcolor,color,message);
}
//Amaran Notification
function notify(bgcolor,color,message) {
$.amaran({
'theme' : 'colorful', 'content' : {bgcolor: bgcolor,color: color,message: message},
'position' : 'top right', 'outEffect' : 'slideBottom'
});
}
JSON return array
{"success":true,"messages":[]}{"success":true,"bgcolor":"#336699","color":"#fff","message":"New content has been added."}
First off remove this section:
if($result) {
redirect('master/content','refresh');
}
this will not redirect anything but the ajax request (not page submitting the request) which is 99% of the time not the desired behavior and it will prevent the success json array from getting rendered meaning you should be getting console errors. If you need to redirect do so via js in your success function. If you are confused about this note that js is client-side and php is server-side.
Once removing this (the rest of your code seems fine) the page should render a success message however it won't redirect. If you chose to add a js redirect function after successful(data.success,data.bgcolor,data.color,data.message); you probably would never see the message. In such a case when redirection is 100% desired you should add a flash message in your controller code, and redirect in js instead of using successful(). Then if you next page is configured to see the flash message it will show up there.
UPDATE:
if ($this->form_validation->run()) {
$data['success'] = true;
} else {
foreach ($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
// this should be here!
echo json_encode($data);
exit; // otherwise create content will trigger even on failed fv!
}
$data = array(
$name[0] => $this->pass($name[0]),
$name[1] => $this->pass($name[1]),
$name[2] => $this->pass($name[2])
);