Pass data to front end without timer

Question

am creating a blogging project. i want everytime a new post is created, the user doesnt have to refresh the page to see the post, it will just append to the already existing ones. this is what am doing presently

function postTin() {
$.ajax({
    type:'POST',
    url: "frextra.php",
    data:"ins=passPost",
    success: (function (result) {
        $("#post").html(result);
    })
})
}

postTin(); // To output when the page loads
setInterval(postTin, (5 * 1000)); // x * 1000 to get it in seconds

what am doing here is that every 5 seconds the page goes to reload the posted data in which case it will also add the newly posted ones

what i want is this: i don't want to use a timer, i want the request to only load when there is a new post added in the database. been stuck here for two weeks. searched around and have not seen anything to help.

You could check about long-polling [https://stackoverflow.com/questions/18560872/how-does-long-polling-work-javascript](https://stackoverflow.com/questions/18560872/how-does-long-polling-work-javascript) — jurgen, Mar 22 '18 at 15:36

score 0 · Answer 1 · answered Mar 22 '18 at 15:48

You could set an interval to get the latest post id and check if it is the same as the latest one you have currently loaded.

$.ajax({
    type: 'GET',
    url: "latestpost.php",
    success: (function (result) {
        doStuff(result)
    })
})


function doStuff(latestIdInDatabase) {
    // Here you do whatever you want

    // latestIdInDatabase is the latest entry, they should be integer or whatever in
    // order to compare them
    if (currentLatestId < r) {
        /// do stuff
        // Like telling the user to realod because there is a new entry
        // Or make anoher call to get that from your current post to the latest
        // and using jquery or any framework print it
    }
}

latestpost.php should return something like the latest post's id.

Either way I think as Luis felipe De jesus Munoz said, you need websockets, or simply just dont reload, people might be using the website and you just reload without saying anything, tell the user that there are new posts and in order to see them, they have to reload.

score 0 · Accepted Answer · answered Mar 22 '18 at 18:34

I don't know how you can achieve this without a timer. So here is my solution, you would need to adjust your code:

Add a post param corresponding to the latest post date of the page

data: "ins=passPost&date=" + $('#posts-list li:first-child').data('date')

This suppose you have something like this in your HTML

<!-- Posts ordered from newest to oldest -->
<ul id="posts-list">
    <li data-date="2018-03-22 15:20">
        <!-- Here the Post HTML code -->
    </li>
    <!-- Here the remaining Posts -->
</ul>

In the PHP you take the post parameter date and request the db for newer posts, for example

'... AND date_added > ' . some_db_escape($_POST['date']) . '...'

And in the ajax success function you would need to prepend the data coming from PHP

$('#posts-list').prepend(result);

PHP sent data must be a string similar to the HTML <li> elements above, representing newer posts from newest to oldest

<li data-date="2018-03-23 10:43">
    <!-- Here the Post HTML code -->
</li>
<li data-date="2018-03-22 18:00">
    <!-- Here the Post HTML code -->
</li>
<!-- etc. -->

Pass data to front end without timer

2 Answers2