Update inbox after submitting a reply, using jQuery and AJAX

Question

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.

Java script and php are unidirectional, that means the data can only travel from JS to PHP --> php cannot talk with js, to create a bidirectional communication, you need a [websocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), or you can ask your php every second if there is a new message through an ajax call (GET POST) — Ayrton Dumas, Jun 23 '16 at 01:34
@f_anto It's for determining on how I'm I sending the message. And there is now problem at it. — Cookie Ninja, Jun 23 '16 at 01:53
Aside: the community has discussed home-made tags in question titles (e.g. `foo, bar: title` and has decided it prefers questions in plain English (e.g. `How to title using foo and bar?`). — halfer, Jun 26 '16 at 11:36

score 1 · Answer 1 · answered Jun 23 '16 at 01:30

1

As you write on the tittle, you should use the ajax.

$.ajax({
            url: "data.php",//file wich has query updating the inbox
            data: {id:theid},//describe your data here
            dataType: 'json',// type of data that will you get (JSON/HTML).
            type: 'POST',//sending type (POST/GET)
            success: function(data) {
               //do what you want to be
            }
        });

Hopefully it will help you :)

answered Jun 23 '16 at 01:30

Peternak Kode Channel

528
5
18

I updated my question with my ajax code. I want a process on how to update the inbox. – Cookie Ninja Jun 23 '16 at 01:39
your 'method' it should be 'type', see my code well ;) – Peternak Kode Channel Jun 23 '16 at 01:48
then make sure you have the reply_conversation.php file – Peternak Kode Channel Jun 23 '16 at 01:49
The `reply_conversation.php` file returns a `

Cookie Ninja

Jun 23 '16 at 01:52

Sory @Zange-chan I will replay it latter, because I still on duty – Peternak Kode Channel Jun 23 '16 at 02:19

No problem. I will be glad once you've come back to share some knowledge. – Cookie Ninja Jun 23 '16 at 02:21

hei, I am back, if you have made sure that reply_conversation.php returns html. please compete your ajax parameter, where is your dataType? make sure your code same like my code. – Peternak Kode Channel Jun 23 '16 at 04:27

better you add the reply_conversation.php code to your post – Peternak Kode Channel Jun 23 '16 at 04:29

Sorry for the late reply. I updated the question with the `reply_conversation.php` in it. – Cookie Ninja Jun 23 '16 at 05:43

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

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();

edited May 23 '17 at 11:53

Community

1
1

answered Jun 23 '16 at 02:38

Maybe I mislead the question. What I mean is once the user replies, his/her inbox gets update. Let's say the Current message is "hello" that is displayed on the inbox, also on the conversation. Once the user replies "hi", the inbox updates the message to "hi" as well as the conversation, just like on how the Facebook works, every replies the inbox updates. – Cookie Ninja Jun 23 '16 at 03:16
@Zange-chan I didn't understand it fine so far, but I'll try to update my answer when I think it fine, though. It's pretty hard to use the mind when it's darker. – Jun 23 '16 at 03:31
It's just an update of the user's inbox. When the user user replies on from the current message, that current message from the inbox also updates which displays his/her current message. And sorry for my poor explanation. :v – Cookie Ninja Jun 23 '16 at 03:41

Update inbox after submitting a reply, using jQuery and AJAX

2 Answers2