Zange-chan Zange-chan - 4 months ago 20
Javascript Question

Update inbox after submitting a reply, using jQuery and AJAX

So the question is about updating the inbox after the user sends a reply, just like on Facebook.

My messaging structure looks like these:



<div class="message_container">
<div class="message_inbox">
<div class="inbox">
<?php include("./includes/messages/inbox.php"); ?>
</div>
</div>
<div class="message_conversation">
<div class="conversation">
<ul>
<li>
<div>
<span>Profile name</span>
<span>conversation</span>
</div>
</li>
<li>
<div>
<span>Profile name</span>
<span>conversation2</span>
</div>
</li>
<li>
<div>
<span>Profile name</span>
<span>conversation3</span>
</div>
</li>
</ul>
</div>
<textarea id="reply"></textarea>
</div>
</div>





I separate the inbox into a separate file and use the
include();
function to display the file. Here's the basic content of the
inbox.php
file:



<ul>
<li>
<div>
<span>Profile name</span>
<span>message</span>
</div>
</li>
<li>
<div>
<span>Profile name2</span>
<span>message</span>
</div>
</li>
<li>
<div>
<span>Profile name3</span>
<span>message</span>
</div>
</li>
</ul>





So, after the user sends a reply, I managed to update the page by appending the data, so no problem there. The only thing that I want to know is how to update or refresh the inbox after the user sends a reply (without refreshing the page).

Edit: Here is my ajax code for submitting a reply:



$(function() {
$("#reply").keypress(function(e) {
if (e.which == 13 && !e.shiftKey) {
var reply = $(this).val();
var toid = <?php echo json_encode($_GET['id']); ?>;

$.ajax({
method: "GET",
url: "./ajax/reply_conversation.php",
data: {reply: reply, toid: toid},
cache: false,
success: function(html) {
$(".conversation ul").append(html);
$("#reply").val('');
}
})
}
})
})





The
reply_conversation.php
file returns a
<li></li>
, the same structure on the
inbox.php
that contains the username and the latest message.

Edit: Here's the content inside
reply_conversation.php
:

<?php
require_once("conn.php");
// classes are initialized inside conn.php

if (!isset($_SESSION)) {
session_start();
}

$id = $_SESSION['id'];
$toid = $_GET['toid'];
$reply = $_GET['reply'];

// replyConversation returns a bool value, it returns true if the query runs successfully
if ($msg->replyConversation($id, $toid, reply)) {
?>
<li>
<span>Profile username</span>
<span>Message</span>
<li>
<?php
}
else {
?>
<li>
<span>Something went wrong.</span>
</li>
<?php
}
?>


The SQL query is separated into a different class file, which contains functions that for database interaction. It is instantiated in the
conn.php
which I then user
require
.

Answer

Do the long polling trick in PHP. Examples here. It's easy. Here goes a example of doing it:

function checkInbox() {
    $.post({
        data: {
            uid: "user id"
        },
        success: function(response) {
            alert("New reply...");
            // restart
            checkInbox();
        },
        url: "ajax/check_inbox.php"
    });
}

// Call at the function least once
checkInbox();
Comments