php - JQuery 和 PHP 独特的聊天窗口为每个用户和数据库保存聊天记录

Question

我设法创建了根据点击的用户唯一打开的聊天窗口，但我无法在除第一个聊天窗口之外的任何聊天窗口上发送消息。

我正在努力实现这一目标:

我正努力做到这一点^

这是我目前所拥有的:

<script> //CHAT SYSTEM
    function chatWith(id, status, username){ 
        $("#chats").append('<div class="chat_window" id="chat_'+id+'"><div class="chat_top"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a>  </span> </div>  <div class="chat_content"></div> <form method="post" name="chat" action=""> <textarea class="chat_text" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div></dv>'); 
        $("#chat_"+id).slideToggle("fast");             
    } 

    //send messages
    var user_id = '<?php echo $session_user_id;?>';
    var auto_refresh = setInterval(function () {
        var b = $("#chat_"+user_id+":last").attr("id");     
        $.getJSON("chat.php?user_id="+user_id,function(data){
            $.each(data.posts, function(i,data) {               
                if(b != data.id)  { 
                    var div_data="<span id='"+data.id+"'>"+data.user_id+": "+data.msg+"</span>";                        
                    $(div_data).appendTo("#chat_"+user_id);
                }
            });
        });
    }, 2000);   
    $(document).ready(function(){
        $(document).keypress(function(e) {
            if(e.which == 13) {
                var boxval = $(".chat_text").val();                 
                var user_id = '<?php echo $session_user_id;?>';
                var dataString = 'user_id='+ user_id + '&msg=' + boxval;

                if(boxval.length > 0) { 
                    $.ajax({
                        type: "POST",
                        url: "chat.php",
                        data: dataString,
                        cache: false,
                        success: function(html){                     
                            $(".chat_content").append(html);
                            $(".chat_text").val('');
                            $(".chat_text").focus();
                            $(".chat_content").animate({scrollTop: $(".chat_text").offset().top}, 500);
                        }
                    });             
                }
                return false;
            }
        });
    });

</script>

这是我的chat.php

  if($_POST){
    $user_id = $_POST['user_id'];
    $msg = $_POST['msg'];

    mysql_query("INSERT INTO chat(user_id, msg) VALUES ('$user_id', '$msg')");

    $chat_results = mysql_fetch_assoc(mysql_query("SELECT * FROM `users` WHERE user_id='".$user_id."' LIMIT 1"));

    echo '<span style="font-size:0.9em;font-weight:bold;">'.$chat_results['username'].'</span>: <span style="font-size:0.9em;">'.$msg.'</span><br>';
}
if($_GET['user_id']){
    $user_id=$_GET['user_id'];
    $row=mysql_fetch_array(mysql_query("SELECT * FROM chat order by id desc limit 1"));
    $user_idx = $row['user_id'];
    $id = $row['id'];
    $msg = $row['msg'];
    if($user_idx != $user_id){
        echo '{"posts": [{  "id":"'.$id.'", "user_id":"'.$user_idx.'", "msg":"'.$msg.'" },]}';
    } 
}

以及所有打开的 div:

<div id="chats"> 

</div>

非常感谢任何帮助，几周以来我一直在为这个问题伤脑筋!

Answer 1

你的问题在这里:

            var boxval = $(".chat_text").val(); //<-- here it is                
            ...

            $(".chat_content").append(html);//<-- here it is  
            $(".chat_text").val('');//<-- here it is  
            $(".chat_text").focus();//<-- here it is  
            $(".chat_content").animate({scrollTop: $(".chat_text").offset().top}, 500);//<-- here it is  

很明显每个“聊天窗口”都有类“.chat_content”、“.chat_text”

那么你的 js 应该如何才能猜出哪一个是正确的呢？所以很明显只需要第一次出现就可以解释它只在第一个窗口中起作用。

去罗马有 1000 条路

我会推荐一个:

首先纠正 chatWith 追加，最后

 </dv>

是不必要的，必须删除

function chatWith(id, status, username){ 
    $("#chats").append('<div class="chat_window" id="chat_'+id+'"><div class="chat_top"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a>  </span> </div>  <div class="chat_content"></div> <form method="post" name="chat" action=""> <textarea class="chat_text" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div>'); 
    $("#chat_"+id).slideToggle("fast");             
} 

那么你首先需要发送正确的值 您宁愿将按键委托(delegate)给文本区域，而不是像

这样的文档

$(document).on('keypress','.chat_text',function(e){ //<-- heres the event context passed as argument now, just like you did (copy) yourself
  if(e.which == 13) {
    //wow,now you have the correct textarea in this-context 
    //dont loose it 
    $current=$(this);
    var boxval = $current.val();
    // and prove it!!
    console.log("the currently entered text is: "+boxval);

    //should be correct, now the requesting and appending part
    var user_id = '<?php echo $session_user_id;?>';
    var dataString = 'user_id='+ user_id + '&msg=' + boxval;
    // prove it ! 
    console.log("dataString is: "+dataString+" and therefore correct");
    if(boxval.length > 0) { 
       $.ajax({
            type: "POST",
            url: "chat.php",
            data: dataString,
            cache: false,
            success: function(html){  
                    // better prove if user_id is really correct:
                    console.log("box that will be filled is from user id: "+html.user_id);   
                    // now you have the userid on which you can match to the 
                    // id of the generated chat windows like in answer above mentioned                   
                    $boxToBeFilled=$("#chat_" + html.user_id);

                    $boxToBeFilled.append(boxval);
                    $boxToBeFilled.find('textarea').val('').focus();
                    $boxToBeFilled.children(".chat_content").animate({scrollTop: $(this).find(".chat_text").offset().top}, 500);
            }
        });             
    }
 } 
});

你去吧