How to display while loop after Ajax form submit

Question

I'm still in a learning shift when it comes to Ajax. I made a script that sends data to a database and it works. The data inserts. Now my question is how can I display the data on the page?

display.php

       <div class='displayMessage' style='height: 540px; padding:5%; overflow-x:hidden;'>
       <?php
       $chatmsgQ="SELECT * FROM ve_chat c 
       WHERE c.isActive='1' AND c.fromUserId='$loginid_session' 
       OR c.toUserId='$loginid_session'";
       $chatmsgresult=  mysqli_query($db,$chatmsgQ);
       while($chatmsg=  mysqli_fetch_array($chatmsgresult)){?>
      <?php if($chatmsg['fromUserId']==$loginid_session):?>
      <!-- user one -->
      <p class='bubble pull-left'><?=$chatmsg['message'];?></p>
      <?php elseif($chatmsg['fromUserId']!=$loginid_session):?>
      <!-- user two-->
      <p class='bubbleother pull-right'><?=$chatmsg['message'];?></p>
      <?php endif;?>
      <?php } ;?>
      </div>

 <!-- write message-->
<form id="chatForm" method='post' action='chat.php'>
<textarea id='chatMessage' name='chatMessage' placeholder="Type your message here... " value=''></textarea> 
<button id='buttons' type="submit" name='sendChat' class="btn btn-default">Send</button>
<input type='hidden' id='fromUserId' name='fromUserId' value='<?=$loginid_session;?>'>
<input type='hidden' id='toUserId' name='toUserId' value='<?=$touserid;?>'>
</form>

js script

<script>
$(document).ready(function(){
    $("#buttons").click(function(){
        var fromuserid = $("#fromUserId").val();
        var touserid = $("#toUserId").val();
        var chatMessage = $("#chatMessage").val();
        // Returns successful data submission message when the entered information is stored in database.
        var dataString = 'fromUserId='+ fromuserid + '&toUserId='+ touserid + '&chatMessage='+ chatMessage;
        // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "chat.php",
            data: dataString,
            cache: false,
            success: function(result){
                //what do I put here exactly?
            }
        });

        return false;
    });
});
</script>

chat.php

  //get variables
        $chatMessage= $_POST['chatMessage'];
        $fromUserId= $_POST['fromUserId'];
        $toUserId= $_POST['toUserId'];
        $chatStatus='1';

    //insert in ve_articles_comments
    $startChatQ = $db->prepare("INSERT INTO ve_chat (fromUserId,toUserId,message,isActive) VALUES (?,?,?,?)");
    $startChatQ ->bind_param("iisi",$fromUserId,$toUserId,$chatMessage,$chatStatus);
    $startChatQ ->execute() or die(mysqli_error($db)); 

    if($startChatQ ){
     // echo "Data Submitted succesfully";
        $_SESSION['success']='<h4 style="text-align: center;" class="alert alert-success alert-dismissable" ><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>Your chat request was sent with success.</h4>'; 
      header('Location: ' . $_SERVER['HTTP_REFERER']);
    exit;
      }
    $startChatQ ->close();
    $db->close();

Answer 1

Alright so this works for me:

display.php

       <div class='displayMessage' style='height: 540px; padding:5%; overflow-x:hidden;'>
       <?php
       $chatmsgQ="SELECT * FROM ve_chat c 
       WHERE c.isActive='1' AND c.fromUserId='$loginid_session' 
       OR c.toUserId='$loginid_session'";
       $chatmsgresult=  mysqli_query($db,$chatmsgQ);
       while($chatmsg=  mysqli_fetch_array($chatmsgresult)){?>
      <?php if($chatmsg['fromUserId']==$loginid_session):?>
      <!-- user one -->
      <p class='bubble pull-left'><?=$chatmsg['message'];?></p>
      <?php elseif($chatmsg['fromUserId']!=$loginid_session):?>
      <!-- user two-->
      <p class='bubbleother pull-right'><?=$chatmsg['message'];?></p>
      <?php endif;?>
      <?php } ;?>
      </div>

 <!-- write message-->
<form id="chatForm" method='post' action='chat.php'>
<textarea id='chatMessage' name='chatMessage' placeholder="Type your message here... " value=''></textarea> 
<button id='buttons' type="submit" name='sendChat' class="btn btn-default">Send</button>
<input type='hidden' id='fromUserId' name='fromUserId' value='<?=$loginid_session;?>'>
<input type='hidden' id='toUserId' name='toUserId' value='<?=$touserid;?>'>
</form>

jQuery

$(document).ready(function(){
$("#buttons").click(function(){
var fromuserid = $("#fromUserId").val();
var touserid = $("#toUserId").val();
var chatMessage = $("#chatMessage").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'fromUserId='+ fromuserid + '&toUserId='+ touserid + '&chatMessage='+ chatMessage;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
cache: false,
success: function(response){
   $("#displayMessage").html(response);
}
});

return false;
});
});

chat.php

//get variables
    $chatMessage= $_POST['chatMessage'];
    $fromUserId= $_POST['fromUserId'];
    $toUserId= $_POST['toUserId'];
    $chatStatus='1';
      $loginid_session=$_POST['fromUserId'];

//insert in ve_articles_comments
$startChatQ = $db->prepare("INSERT INTO ve_chat (fromUserId,toUserId,message,isActive) VALUES (?,?,?,?)");
$startChatQ ->bind_param("iisi",$fromUserId,$toUserId,$chatMessage,$chatStatus);
$startChatQ ->execute() or die(mysqli_error($db)); 

if($startChatQ ){
 // echo "Data Submitted succesfully";
                    $chatmsgQ="SELECT * FROM ve_chat c WHERE c.isActive='1' AND (c.fromUserId='$loginid_session' OR c.toUserId='$loginid_session')";
                    $chatmsgresult=  mysqli_query($db,$chatmsgQ);
                    while($chatmsg=  mysqli_fetch_array($chatmsgresult)){
                        if($chatmsg['fromUserId']==$loginid_session){
                            echo "   <p class='bubble pull-left'>" .$chatmsg['message'] . "</p> ";

                        }
                        elseif($chatmsg['fromUserId']!=$loginid_session){
                            echo  "  <p class='bubbleother pull-right'>" . $chatmsg['message'] . "</p> ";

                        } }
                        }
                        $startChatQ ->close();
                        $db->close();