krushio vida krushio vida - 5 months ago 8
Ajax Question

How to implement "user is typing" functionality and send to server

I have this code that detects whether user is typing based on this answer. I would like to send the response to the server via ajax, by placing my ajax code somewhere in the if/else statement, but am not sure how.

var textarea = $('#textarea');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
if (!textarea.is(':focus') ||
textarea.val() == '' ||
new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
typingStatus.html('No one is typing -blank space.');
} else {
typingStatus.html('User is typing...');
}
}
function updateLastTypedTime() {
lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);


What I have tried so far:

var textarea = $('#chatbox');
var typingStatus = $('#typing_on');
var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

function refreshTypingStatus() {
if (!textarea.is(':focus') ||
textarea.val() == '' ||
new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
typingStatus.html('No one is typing -blank space.');
} else {
typingStatus.html('User is typing...');
$.ajax({
type: "POST",
url: "usertypes.php?v=<?php echo $usarr; ?>",
});
}
}

function updateLastTypedTime() {
lastTypedTime = new Date();
}

setInterval(refreshTypingStatus, 100);
textarea.keypress(updateLastTypedTime);
textarea.blur(refreshTypingStatus);


However, mine doesn't seem to be sending any reasponse. So I'm not sure if the placement of the ajax code is correct. Can anyone explain where am I going wrong?

Answer

Put your ajax code on keypress event.
In your case you should use your ajax code inside updateLastTypedTime function instead writing it inside callback of setInterval which executes 10 times in 1 second.

<script>
    var textarea = $('#chatbox');
    var typingStatus = $('#typing_on');
    var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the past
    var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message

    function refreshTypingStatus() {

      if (!textarea.is(':focus') ||
          textarea.val() == '' ||
          new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) {
        typingStatus.html('No one is typing -blank space.');
      } else {
        typingStatus.html('User is typing...');



      }
    }

    function updateLastTypedTime() {
      lastTypedTime = new Date();

      $.ajax({
          type: "POST",
          data: {var: 'value'},
          url: "usertypes.php",
          dataType: 'json',
          success: function(response) {
            console.log(response);
          },
          error: function(jqXHR, textStatus, errorThrown) {
              // if error , code here.. 
          }
        });
    }

    setInterval(refreshTypingStatus, 100);
    textarea.keypress(updateLastTypedTime);
    textarea.blur(refreshTypingStatus);

</script>