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

Question

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?

My code worked . i had a problem with the PHP code. I am sorry for any inconvenience — Omari Victor Omosa, Jun 25 '16 at 17:15

sharif2008 · Answer 1 · 2016-06-25T17:30:56.293

Please check this again :

$(document).ready(function() {
    console.log("ready!");
    var typing = false;
    var timeout = undefined;
    var typingDelayMillis = 1000;

    function timeoutFunction() {
        typing = false;
        $.ajax({
            type: "POST",
            url: "usertypes.php?v=<?php echo $usarr; ?>&isTyping="+typing,
        });
        $('#typing_on').html("");
    }
    var delay = (function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    $('#chatbox').keypress(function(e) {
        if (typing === false && $("#chatbox").is(":focus")) {
            delay(function() {
                timeoutFunction();
            }, typingDelayMillis);
            typing = true;
            $.ajax({
              type: "POST",
              url: "usertypes.php?v=<?php echo $usarr; ?>&isTyping="+typing,
            });
            $('#typing_on').html("user types...");
        }
    });

    $('#chatbox').on("blur", function() {
        clearTimeout(timeout);
        timeout = setTimeout(timeoutFunction, typingDelayMillis);
    })
});

online demo: https://jsfiddle.net/vo46gehw/5/

I have tested your code but its like it is not detecting whether user is typing https://jsfiddle.net/krushio/vo46gehw/ — Omari Victor Omosa, Jun 25 '16 at 16:37

Neeraj · Accepted Answer · 2016-06-25T17:18:27.773

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>

do you have any example i try out – Omari Victor Omosa Jun 25 '16 at 16:57 — Omari Victor Omosa, Jun 25 '16 at 16:57

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

2 Answers2