How to implement dynamic content update on the site?

Question

AJAX

Good evening!
The site has posts that I get from the DB. The whole point is that I implemented getting content as follows:
1. The user adds a record.
2. She immediately appears on the site.
I implemented the steps above by:

function showPopularPosts() {
                $.ajax({
                    type: 'post',
                    url: "/getpopularpost.php",
                    cache: false,
                    response: 'text',
                    success: function(html) {
                        $("#getPopularPosts").html(html);
                    }
                });
            }
     


        $(document).ready(function(){
            showPopularPosts();

            setInterval('showPopularPosts()',1000);
            
        });

I extract the entries from the getpopularpost.php file , but there is one caveat: each post contains the following functionality:
1. I like it
2. I don't like it
3. Views
3. Bookmarked
I implemented the "I like" function and the trouble is that because for the fact that the content is updated every second, "I like" does not work, but if you remove the setInterval('showPopularPosts()',1000); , then everything works, only to see the post, you need to refresh the page.
Please tell me how I can use the "I like" function when receiving content.
Nothing comes to mind at all.

Answer 1

we all
create the event entity incorrectly. Let's add the "New Like Added" event to the database and listen to these events on the backend (socket.io, pusher.com or our server) through the socket.
In practice, we create an Event model + Event.User, Event.Project connections. Each Event will have a listener field, let's say 'click'. On the client, we add a listener for each event, and if the event fired, we push the notification to the backend, on the back we update the database and push the notification to the client of the type "New like added" event fired in the browser, display the event

Answer 2

Change not the markup, but the properties of the static markup.

Answer 3

And what is the meaning of the "I like" functionality. Logically, with your Ajax request, you should not only update the posts, but also all the dynamic dependencies associated with the posts, including I like
UPD and it’s really not enough for a second, if 50 people come to the site, they will put a server for you