Get information from the database without refreshing the page

Question

I am developing a program. In the store section, we display products for users I want you to see that product when a user is browsing the site and a new product has been added to the site without refreshing the page

I have come and refresh the contents of the store section every few seconds with the setInterval method, but it does not work for me

<div id="parnet" class="row">
        <p id="players">
        <?php foreach ($players as $player) { ?>
        <div  class="col-lg-6 col-xl-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="row m-b-30">
                        <div class="col-md-5 col-xxl-6">
                            <div class="new-arrival-product mb-4 mb-xxl-4 mb-md-0">
                                <div class="new-arrivals-img-contnent">
                                    <img class="img-fluid" src="<?=baseUrl()?>/upload/images/players/<?=$player['image']?>" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 col-xxl-6">
                            <div class="new-arrival-content position-relative">
                                <h4><?=$player['playerName']?></h4>
                                    <p>Buy Now Price <span class="item text-success"><?=$player['buyPrice']?></span></p>
                                    <p>Market Price: <span class="item text-success"><?=$player['marketPrice']?></span> </p>
                                    <p>Price In Dollar: <span class="item text-success"><?=$player['price']?></span></p>
                            </div>
                            <button type="button" class="btn btn-rounded btn-primary btn-sm"><span class="btn-icon-left text-primary"><i class="fa fa-shopping-cart"></i>
                                    </span>Buy</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <?php } } ?>
        </p>
</div>


<script>
    setInterval(function() {
        $(".parent").load(document.URL+ ' #players');
    }, 1000); 
</script>

Answer 1

Here's a sample code:

<script>
    $(document).ready(function(){
        setInterval(function() {
            fetchNewProducts();
        }, 1000); 
    });
    function fetchNewProducts(){
        let get = $.get('<Your URL to fetch new products>', {
            lastProdId: "<Insert_Max_Fetched_ProdId>",
        })
        get.done(response => {
            response = JSON.parse(response);
            if (!response.error) {
                $('#targetDiv').append(response.data)
            } else {
                alert(response.message);
            }
        })
    }
</script>

Note that in the PHP URL to fetch data, it should return a complete html of the products, that'll simply get appended in the already rendered list. The controller logic should be such that if no data is found, then response.data is just an empty string.