Messaging system in Codeigniter AJAX - php

Question

Good day guys, I don't know how can I make an ajax call on Codeigniter
Is there anyone can show me how to do it here? It will help me too much in my career in programming . I'm watching tutorials but that isn't the way I need.
So here is the process, once I submit a data on the database, the whole page must not load and updates my records on the view. I tried my best, but I think I really need your help now. Advance thank you.
My script
<script>
$(document).ready(function(){
$("#send").click(function()
{
$.ajax({
type: "POST",
url: <?php echo base_url()?> + "messages/send_message",
data: {textbox: $("#textbox").val(),owner: $("#owner").val()},
dataType: "text",
cache:false,
success:
function(data){
alert(data); //as a debugging message.
}
});// you have missed this bracket
return false;
});
});
</script>
My controller
function send_message()
{
$sk = random_string('alnum',5).time();
$from= $_SESSION['username1'];
$owner = $_POST['owner'];
$desc = $_POST['textbox'];
$to = $this->Model_items->get_owner_name($owner);
$from = $this->Model_items->get_owner_name2($username);
date_default_timezone_set('Asia/Manila');
$date = date("Y-m-d H:i:s");
$data = array('message_from_username'=>$username,'message_to_username'=>$owner,'message_sk'=>$sk,'message_desc'=>$desc,'message_from'=>$from,'message_to'=>$to,'message_date'=>$date,'status'=>1);
$this->Model_messages->message_owner($data);
}
My model
function message_owner($data)
{
$this->db->insert('messages',$data);
}
function view_convo($from,$username)
{
$query = $this->db->query("Select * from messages where
(message_from_username = '$username' AND message_to_username = '$from') OR
(message_from_username = '$from' AND message_to_username = '$username')
order by message_id desc");
return $query->result();
}
And for my views
<div class="col-md-9 ui segment pre-scrollable" style="min-height:100px;">
<h3 class="ui dividing header">Conversation with <?php echo $convo_with?>
</h3>
<div class="ui comments">
<?php
foreach($convo as $key)
{
?>
<div class="comment">
<a class="avatar">
<img src="<?php echo base_url()?>img/default-avatar.png" style="width:30px;height:25px;border-radius:50%;">
</a>
<div class="content">
<a class="author"><?php echo $key->message_from?></a>
<div class="metadata">
<span class="date">
<?php
date_default_timezone_set('Asia/Manila');
$now = strtotime(date("Y-m-d H:i:s"));
$date = strtotime($key->message_date);
$dateDiff = abs($now - $date);
$fullDays = floor($dateDiff/(60*60*24));
if($fullDays==0)
{
echo " Today ";
}
else if($fullDays==1)
{
echo " Yesterday ";
}
else
{
echo $fullDays ." days ago";
}
$at=date('g:iA',$date)
?> at <?php echo $at?>
</span>
</div>
<div class="text">
<?php echo $key->message_desc?>
</div>
</div>
</div>
<?php
}
?>
<br>
</div>
<form method="post">
<input id="owner" type="hidden" value="<?php echo $this->uri->segment(3);?>" name="owner">
<input id="textbox" type="text" name="textbox">
<input id="send" type="submit" name="send" value="Send">
</form>
</div>

Answer 1

You need to send back something to the ajax call
Update your controler function to return a json with the updated list of messages, form that json you use jquery in the success function to update the list of messages
function send_message()
{
$sk = random_string('alnum',5).time();
$from= $_SESSION['username1'];
$owner = $_POST['owner'];
$desc = $_POST['textbox'];
$to = $this->Model_items->get_owner_name($owner);
$from = $this->Model_items->get_owner_name2($username);
date_default_timezone_set('Asia/Manila');
$date = date("Y-m-d H:i:s");
$data = array('message_from_username'=>$username,'message_to_username'=>$owner,'message_sk'=>$sk,'message_desc'=>$desc,'message_from'=>$from,'message_to'=>$to,'message_date'=>$date,'status'=>1);
$this->Model_messages->message_owner($data);
$datareturned = $this->Model_messages->view_convo($from,$to);
return json_encode(array('message'=>'Database Updated successfully','data'=>$datareturned));
}
js:
$(document).ready(function(){
$("#send").click(function()
{
$.ajax({
type: "POST",
url: <?php echo base_url()?> + "messages/send_message",
data: {textbox: $("#textbox").val(),owner: $("#owner").val()},
dataType: "text",
cache:false,
success:
function(data){
alert(data.message); //as a debugging message.
//here you update the message list with the data from "data.data"
//using a loop and append
}
});// you have missed this bracket
return false;
});
});

Answer 2

Controller:
function send_message()
{
$sk = random_string('alnum',5).time();
$from= $_SESSION['username1'];
$owner = $_POST['owner'];
$desc = $_POST['textbox'];
$to = $this->Model_items->get_owner_name($owner);
$from = $this->Model_items->get_owner_name2($username);
date_default_timezone_set('Asia/Manila');
$date = date("Y-m-d H:i:s");
$data = array('message_from_username'=>$username,'message_to_username'=>$owner,'message_sk'=>$sk,'message_desc'=>$desc,'message_from'=>$from,'message_to'=>$to,'message_date'=>$date,'status'=>1);
$value = $this->Model_messages->message_owner($data);
Print_r($value);
die();
}
Use the function in your controller