Chat Application Using PHP updating previous messages

Question

Why this code not working

I am building a chatbot application using php and aiml. I have made the chat window for the same. But in chat window when I enter the message it overwrites the previous message every time. I want that the new message should come in the new line. Please help

My Code is

<div class="panel" id="chat">
<div class="panel-heading" style="background-color:#337ab7">
  <h3 class="panel-title" style="color:#FFF">
    <i class="icon wb-chat-text" aria-hidden="true" ></i> How Can I Help You
  </h3>
</div>
<div class="panel-body">
  <div class="chats">
    <div class="chat">
      <div class="chat-avatar">
        <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="June Lane">
          <i></i>
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p>
            <div class="botsay">Hey!</div>
          </p>
          <time class="chat-time" datetime="2015-07-01T11:37">
          <?php
                echo date("h:i:sa");
            ?></time>
        </div>
      </div>
    </div>
    <div class="chat chat-left">
      <div class="chat-avatar">
        <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="Edward Fletcher">

          <i></i>
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p><div class="usersay">&nbsp;</div></p>
           <time class="chat-time" datetime="2015-07-01T11:37">
          <?php
                echo date("h:i:sa");
            ?></time>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="panel-footer">

  <form method="post" name="talkform" id="talkform" action="index.php">
    <div class="input-group">
      <input type="text" class="form-control" name="say" >
      <input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" />
      <input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" />
      <input type="hidden" name="format" id="format" value="json" />
      <span class="input-group-btn">
        <input class="btn btn-primary" type="submit" name="submit" id="submit"  value="Send" />
      </span>

    </div>
  </form>
</div>

I am using ajax to input values in the chat window using aiml.

$(document).ready(function() {
  // put all your jQuery goodness in here.
    $('#talkform').submit(function(e) {
      e.preventDefault();
      var user = $('#say').val();
      $('.usersay').text(user);
      var formdata = $("#talkform").serialize();
      $('#say').val('');
      $('#say').focus();
      $.get('<?php echo $url ?>', formdata, function(data){
        var b = data.botsay;
        if (b.indexOf('[img]') >= 0) {
          b = showImg(b);
        }
        if (b.indexOf('[link') >= 0) {
          b = makeLink(b);
        }
        var usersay = data.usersay;
        if (user != usersay) {
          $('.usersay').text(usersay);
        }
        $('.botsay').html(b);
      }, 'json').fail(function(xhr, textStatus, errorThrown){
        $('#urlwarning').html("Something went wrong! Error = " + errorThrown);
      });
      return false;
    });
  });
  function showImg(input) {
    var regEx = /\[img\](.*?)\[\/img\]/;
    var repl = '<br><a href="$1" target="_blank"><img src="$1" alt="$1" width="150" /></a>';
    var out = input.replace(regEx, repl);
    console.log('out = ' + out);
    return out
  }
  function makeLink(input) {
    var regEx = /\[link=(.*?)\](.*?)\[\/link\]/;
    var repl = '<a href="$1" target="_blank">$2</a>';
    var out = input.replace(regEx, repl);
    console.log('out = ' + out);
    return out;
  }

Answer 1

The problem with your code is you are just keeping on replacing the contents of usersay and botsay. You need to append or prepend as per your need to make it work.

Consider this bit of code, you need to change as per comments:

  $.get('<?php echo $url ?>', formdata, function(data){
    var b = data.botsay;
    if (b.indexOf('[img]') >= 0) {
      b = showImg(b);
    }
    if (b.indexOf('[link') >= 0) {
      b = makeLink(b);
    }
    var usersay = data.usersay;
    if (user != usersay) {
      $('.usersay').append(usersay);    // 1. Change here.
    }
    $('.botsay').append(b);             // 2. Change here.
  }, 'json')