Ajax Insert Code Igniter - php

Question

I have a form that will insert into table 'tags' using ajax. I was able to add manually but not without reloading the page.
This is my controller Controller (tags.php)
class Tags extends CI_Controller{
function __construct(){
parent:: __construct();
$this->load->model('tags_model');
$this->load->helper('form');
$this->load->helper('url');
}
function index(){
$data['tags']=$this->tags_model->get();
$this->load->view('tags/index',$data);
}
function add()
{
$this->tags_model->save();
return true;
}
}
?>
This is my view('index.php')
<script src="<?php echo base_url('assets/js/jquery.js');?>"></script>
<?php
foreach ($tags as $t){
echo '<span>';
echo $t['id'].':';
echo $t['title'];
echo '-';
echo '</span>';
}
?>
<form id="comment" method="post">
<?php echo form_input('title','text is here....');?>
<label> </label><input type="submit" value="Submit" />
</form>
<!-- here is the script that will do the ajax. It is triggered when the form is submitted -->
<script>
$(function(){
$("#comment").submit(function(){
dataString = $("#comment").serialize();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>tags/add",
data: dataString,
return false; //stop the actual form post !important!
success: function(data)
{
alert('Successful!');
}
});
return false; //stop the actual form post !important!
});
});
</script>
Model
<?php
class Tags_model extends CI_Model{
function __construct()
{
parent:: __construct();
$this->load->database();
}
function save()
{
$title=$this->input->post('title');
$data=array(
'title'=>$title
);
$this->db->insert('tags',$data);
}
function get(){
$query=$this->db->get('tags');
return $query->result_array();
}
}
?>
code seem to be okay to me. I can insert normally but not in ajax . Any help is welcome.

Answer 1

Remove the return false that is inside your jquery ajax call.
$(function(){
$("#comment").submit(function(){
dataString = $("#comment").serialize();
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>tags/add",
data: dataString
success: function(data)
{
alert('Successful!');
}
});
return false; //stop the actual form post !important!
});
});

Answer 2

I did like in this tutorials and now workings
http://net.tutsplus.com/tutorials/php/codeigniter-from-scratch-day-8-ajax/
now my view is like that
<script src="<?php echo base_url('assets/js/jquery.js');?>"></script>
<?php
foreach ($tags as $t){
echo '<span>';
echo $t['id'].':';
echo $t['title'];
echo '-';
echo '</span>';
}
?>
<?php echo form_open('tags/add');?>
<?php echo form_input('title','text is here....','id="title"');?>
<?php echo form_submit('submit', 'Submit', 'id="submit"'); ?>
<?php echo form_close();?>
<!-- here is the script that will do the ajax. It is triggered when the form is submitted -->
<script type="text/javascript">
$('#submit').click(function() {
//var title = $('#title').val();
var form_data = {
title: $('#title').val(),
ajax: '1'
};
$.ajax({
url: "<?php echo site_url('tags/add'); ?>",
type: 'POST',
data: form_data,
success: function() {
alert('added Successfully');
}
});
return false;
});
</script>
instead of
url: "<?php echo base_url('tags/add'); ?>",
I also had to switch to
url: "<?php echo site_url('tags/add'); ?>",

Answer 3

Controller
public function added()
{
$data['name']=$this->input->post('name');
$data['address']=$this->input->post('address');
$re=$this->model->add('aa',$data);
if($re)
{
?>
<script> alert("inserted");</script>
<?php
}
else
{
?>
<script> alert("not insert");</script>
<?php
}
//redirect('Myconn/insert');
}

Answer 4

JS Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#form1").on('submit',(function(e) {
var name = $("#name").val();
var address = $("#address").val();
e.preventDefault();
// document.getElementById("submit").value="Sending.....";
$.ajax({
url: "<?php echo base_url(); ?>Myconn/added",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(html)
{
$("#feed_m").after(html);
//document.getElementById("submit").value="submit.";
document.getElementById('name').value='';
document.getElementById('address').value='';
}
});
}));
});
</script>
HTML Code
<div id="feed_m"></div>
<form method="post" id="form1" action="">
<table >
<tr>
<td>name</td>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td>address</td>
<td><input type="text" id="address" name="address"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="submit" name="submit" value="submit"></td>
</tr>
</table>
</form>
Controller
public function added()
{
$data['name']=$this->input->post('name');
$data['address']=$this->input->post('address');
$re=$this->model->add('aa',$data);
if($re)
{
?>
<script> alert("inserted");</script>
<?php
}
else
{
?>
<script> alert("not insert");</script>
<?php
}
}
Model
public function add($table,$data)
{
return $this->db->insert($table,$data);
}