How to dynamically change the page?

Question

JavaScript

tell me how you can dynamically change the content of the page without reloading. As far as I understand, you need to use ajax and Long Polls. But there is no understanding of how to organize it correctly. The task is the following, there is a table and if the status of the task is false, then the line is displayed; if true, it is not displayed. The status is changed by clicking on the checkbox, using ajax. You can, of course, do location.reload(); at the end of the request; but I would love to get rid of it.
There is a trace. routing:

app.get('/TODOList', isLoggedIn, require('./TODOList').list);
exports.list = function (req, res, next) {
    task.find({$or :[{'head.userID': req.user._id},
        {'access_users': req.user.local.email}
        ]},
        function (err,projects) {
      if(err) return next(err);
        res.render('TODOList',{title: 'TODO List',
            userID :req.user.local.username,
            projects: projects || []
        });
      });
};

setInterval(function(){
    $.ajax({
    type: 'GET',
    url: '/TODOList',
    success: function (res) {
        console.log('success full');
    },
    error: function () {
    }})
    }, 5000);

the current code, although it makes an ajax request, still reloads the page (according to the code, it should be like this, but it doesn’t work). How to display realtime changes without reloading? in the jade template engine I use a condition for output ( if(tasks.status == false)) -- output

Answer 1

1. I don't see a reboot in your code.
2. HTML is returned in response to AJAX, and jQuery wraps it nicely.
3. You need the server to notify the client that data has changed (using ServersSentEvents (or other LongPoling tool) or WebSocket)
4. Write an API. It will be easier.
PS What is the question - such is the answer