0

Here's what I want to do.

I have a div element that is being constantly refreshing (per every second) with the use of JQuery. And another JQuery code sends a post request to the same page when the user starts typing to a textarea (not when submitted).

NOTE: Below snippet will not run because it contains PHP code.

// This code submits data to the same page with post.
$(document).ready(function(){
    $("#msg").on("input", function(){
        $.post( window.location, { isTyping: "yes" } );
    });
});

// This is the code I use to refresh the div.
var timing = setInterval(Timer, 1000);
    function Timer() {
        $("#myId").load(location.href + " #myId");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myId">
<?php
if (isset($_POST['isTyping'])) {
    if ($_POST['isTyping'] == "yes") {
    echo "Typing";
    }
}
?>
</div>

<!-- This is the textarea -->
<textarea id="msg"></textarea>

When the div refreshes, the echo must print "Typing". But, it doesn't. To check if the data is being submitted, I tried creating a new text file and inserting value to it (omitting the echo), and it worked. The fopen/fwrite command outputted text to a file (with the data received through post), but the echo is not giving any output on the screen.

I don't know why this happens, tried quite a few hours searching the whole Google and SO, either I didn't know what to search for or didn't find what I wanted. I am very new to JQuery, Sorry about that.

Chathindu Nethmina
  • 71
  • 6
  • Did you not open the php interpreter tags? – Funk Forty Niner Jun 25 '20 at 22:55
  • You're missing ` – Barmar Jun 25 '20 at 22:56
  • @Funk Forty Niner oh, sorry it's a mistake, I will edit the question. thanks. and I did wrote the PHP tags in my original code. – Chathindu Nethmina Jun 25 '20 at 22:57
  • 2
    the code looks OK to me, but you're not doing anything on the client-side with the Ajax response (which here is the string `"Typing"`). You need to pass a [success callback](https://api.jquery.com/jquery.post/) to `$.post` – Robin Zigmond Jun 25 '20 at 23:00
  • @RobinZigmond Sorry, but can you please briefly explain to me how to do it? The JQuery documentation makes my head spin. – Chathindu Nethmina Jun 25 '20 at 23:07
  • 1
    just pass a function as a 3rd argument to `$.post`, which specifies how you want to handle the data. If you just want to see it on the page then `function(data) { $("#myId").text(data); }` is a nice simple way to test it. – Robin Zigmond Jun 25 '20 at 23:10
  • Bit of a classic problem this one. Your POST request (`$.post`) and GET request (`.load`) are completely separate. The results from the POST request will only be in the response to that request – Phil Jun 25 '20 at 23:10
  • 1
    Mind you, this is a pretty strange way to pop up a _"typing"_ indicator. Why not just do it all client-side? – Phil Jun 25 '20 at 23:12
  • @Phil It's for a chat application. When someone is typing, all others must see he is typing. – Chathindu Nethmina Jun 25 '20 at 23:20
  • 2
    @ChathinduNethmina you're going to have to persist the `isTyping` value somewhere so it can be retrieved across requests and sessions. For example, in a database or file on your PHP server. You would also need to clear it when everyone stops typing. – Phil Jun 25 '20 at 23:26

0 Answers0