채팅 응용 프로그램 PHP를 사용하여 이전 메시지 업데이트

Question

이 코드가 작동하지 않는 이유

PHP와 aiml을 사용하여 대화방 응용 프로그램을 작성하고 있습니다. 나는 똑같은 채팅 창을 만들었다. 그러나 채팅 창에서 메시지를 입력하면 매번 이전 메시지를 덮어 씁니다. 새로운 메시지가 새 라인에 오길 원합니다. 도와주세요

내 코드는 내가 AIML를 사용하여 채팅 창에 입력 값 Ajax를 사용하고

<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> 

입니다.

$(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

코드 방금 usersay 및 botsay의 내용을 교체에 대한 유지하는 것입니다의 문제. 필요에 따라 추가하거나 앞에 추가해야합니다.

코드의이 비트를 고려, 당신은 코멘트에 따라 변경해야

$.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')