清除输入并从底部开始聊天滚动

时间:2016-05-11 08:43:57

标签: javascript jquery html css

我试图清除邮件提交的输入。并且在聊天窗口加载时保持滚动在底部。 我尝试了很多脚本,我也尝试了不同的方法,外包。但我认为由于我的结构,有些事情是不对的。我承认,在任何与JavaScript相关的问题上,我都不是专家。我只是渴望完成这项任务,它已经困扰了我几个月,因为我无法让它发挥作用。 这是我的代码



var scrolled = false;

function updateScroll() {
  if (!scrolled) {
    var element = document.getElementById("ChatPopScroll");
    element.scrollTop = element.scrollHeight;
  }
}

$("#ChatPopScroll").on('scroll', function() {
  scrolled = true;
});
$(function() {
  $('form#SendForm').on('submit', function(e) {


    $.post('elements/sendmessagefriend.php', $(this).serialize(), function(data) {
        // This is executed when the call to mail.php was succesful.
        // 'data' contains the response from the request
        $('#message').val('');
        var form = document.getElementById("SendForm");
        form.reset();
        $('#SendForm').trigger("reset");
      })
      .error(function() {
        $('#message').val('');
      });
    e.preventDefault();
    $('#message').val('');

  });

});
$(document).ready(function() {
  $('div.message-window').each(function(index, messageWindow) {
    messageWindow = $(messageWindow);
    // Run fetchMessages() once, when the page is loaded.
    fetchMessages(messageWindow);
    // Set an interval timer for checking messages.
    // Not ideal, but it works for now.
    setInterval(fetchMessages, 500, messageWindow);
    // in milliseconds!!!!!! (1000ms = 1s)
  });
});

function fetchMessages(messageWindow) {
  // For each message window, check for new chats
  // Get the friend_id from the window
  var friend_id = messageWindow.attr("friend_id");
  // Get the last chat message_id from the last chat message in this window.
  var last_message_id = messageWindow.find("ul > li:last").attr("message_id");
  // Ask the server for the latest messages.
  // Send over the friend_id and last_message_id, so it can send back new messages from this friend.
  $.get("elements/chat-load.php", {
    last_message_id: last_message_id,
    friend_id: friend_id
  }, function(messages) {
    // This function is run when the AJAX request succeeds.				        
    // Append the new messages to the end of the chat
    messageWindow.find("ul").append(messages);
  });
}

function openPopup(ID) {
  $('.popup');
  $("#" + ID).fadeIn(200);
}

function closePopup(ID) {
  $('.popup');
  $("#" + ID).fadeOut(200);
}

function MinPopup(ID) {
  $('.popup');
  $("#" + ID).addClass('ChatMinPop').removeClass('ChatActivePop');
}

function UpPopup(ID) {
  $('.popup');
  $("#" + ID).addClass('ChatActivePop').removeClass('ChatMinPop');
}

<div id="ChatPopScroll" class="ChatPopMsg">

  <div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
    <ul id="ScrollAuto" class="message">



    </ul>
  </div>

</div>
<div class="ChatPopFoot">

  <form autocomplete="off" id="SendForm" class="SendMsg" role="form" method="post">
    <input autocomplete="off" id="message" class="ChatPopFootTxt" type="text" name="message">
    <input style="" id="submit" class="submit MsgInputHidden" type="submit" name="submit" value="Submit" />
  </form>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案