Question

所以我找到了这段代码并将其实现到我的聊天脚本中。它的目的是滚动到聊天div的底部，其中包含特定聊天的消息。聊天由chat_generate()函数生成，该函数使用xmlhttp协议。问题是这给了我一些错误。代码如下：

HTML：

<button onclick="chat_generate(1);"></button>

JS：

function chat_generate(chat_id) {

    var id = chat_id.toString();
    var check_user_in = "#chat_"+id;
    if($(check_user_in).length == 0) {
        var open ="";
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                /*var text = "Welcome to chat: "+myObj[1];*/
                open = [
                  "<div class='full_wrap' id='chat_"+chat_id+"'>   <div class='force-overflow'></div>    <div id='nav_"+chat_id+"' class='chat_side'>      <h2>Chat Settings & Info</h2>  <a id='closebtn' href='javascript:void(0)'",
                  "class='closebtn' onclick='chat_closeNav("+chat_id+")'>&times;</a>        <div class='authr' style='background-image:url("+myObj[3]+");'>     <a>    <div class='authr_img' style='background-image:url(pimages/"+myObj[8]+");'></div>       </a>    <form action='mypage.php' method='post'>    <div ",
                  "class='authr_name'><button value='"+myObj[6]+"' name='userlink' class='subm_as_text'> "+myObj[6]+"</button></div>    </form>     </div>    <div class='chat_info'>    <div ",
                  "class='chat_descy'>    <h2>Chat Description</h2>    <div class='descc'>    <h3>"+myObj[2]+"</h3>    </div>    </div>    <div class='chat_fol'><h2>Chat users: 2</h2></div>    <div class='chat_back'>    <h2> ",
                  "Change Chat Wallpaper</h2>    <form method='post' action='picture.php' enctype='multipart/form-data'>    <input type='file' id='upload' class='custom-file-input' name='chat_wall'>    <input type='submit' ",
                "class='chat_wall_subm' value='Change'/>    </form>    </div>    </div>    <form method='post' action='chat.php' >    <button class='chat_leave' name='chat_leave' value='$chat_index' >Leave Chat</button>    </form>    </div>    <div class='chat_mnav'>    ",
                "<span onclick='chat_openNav("+chat_id+")'>&#9776;</span>    <i class='material-icons' id='chat_un_small' onclick='chat_un_small("+chat_id+")'>arrow_upward</i>    <h1>"+myObj[1]+"</h1>    <div class='chat_close' onclick='chat_close("+chat_id+")'><i ",
                "class='material-icons' >&#xE5CD;</i></div>    </div>    <div class='conceal_wrapper'>    <div class='msgs' style='background-image:url("+myObj[4]+")' id='"+chat_id+"'>    </div>    <form method='post' id='form_"+chat_id+"' class='comform'>    <div class='chat_wcom' >    <input maxlength='140' type = 'text' id='input_"+chat_id+"'  class='comin' placeholder='My message...' name='sendmsg' onkeypress='g(event,"+chat_id+")' ",
                "autocapitalize='off' autocorrect='off'  />    <input class='hidden_index' type='text' value='"+chat_id+"' name='chat_index'/>    </div>    </form>    </div>    <div class='chat_enlarge'>    <div class='chat_enlarge_full' onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' ",
                "onclick='chat_enlarge_full("+chat_id+")'></div>    <div class='chat_enlarge_standard'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_standard("+chat_id+")'></div>    <div ",
                "class='chat_enlarge_small'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_enlarge_small("+chat_id+")'></div><div class='chat_enlarge_close'  onmouseover='chat_action(this)' onmouseout='chat_action_negative(this)' onclick='chat_close("+chat_id+")'></div>    </div></div>"
                ].join("\n");

                var cusid_ele = document.getElementsByClassName('open_chat');
                if(cusid_ele.length == 0){
                  alert("No more chat space");

                }else{
                    if($(cusid_ele[0]).replaceWith(open)){
                        draggables();
                        startf();
                    }
                }
            }
            chat_enlarge_standard(chat_id);
            scrollOpen(chat_id);

        };

        xmlhttp.open("GET", "receivechatinfo.php?id="+id, true);
        xmlhttp.send();

    }else{ 
        alert("The chat is already open");
    }

}

function scrollOpen(id) {
    var elem = document.getElementById(id);
    elem.scrollTop = elem.scrollHeight;
}

我认为问题在于，在调用函数之前插入了聊天html代替open_chat div，导致错误无法使值为null。但在以下情况下我不知道如何解决这个问题。任何帮助将不胜感激。

滚动底部不适用于ajax

0 个答案: