How to make a raise notification using ajax + php?

Question

I’m just trying to increase the notification of an item. I want every time I add a new item to my cart, I have to see the cart notification increase number. in the javascript console I see that it is working well but on my screen nothing changes. someone can help me to see where this the problem please?

This is the HTML part. I’m using id="show_result" to show what rolls in the back-end with ajax.

 <li class="ml-4"><a href="#login" id="total_cart"  class=" text-danger " data-toggle="modal" data-target="#SignUp"><span class="fa fa-shopping-cart fa-2x"></span><span id="show_result"></span></a></li>

This is the javascript part with ajax:

setInterval(function()
{
    $.ajax({
        type: "get",
        url: "API/READ/count_panier.php",
        success:function(data)
        {
            $('#show_result').html(data);  
            //console.log the response
            console.log(data);
        }
    });
}, 1000); //10000 milliseconds = 10 seconds
// MAKING REGISTRATION

And here’s the page I call to tell you if there’s any data that’s been added to the cart.PAGE: count_panier.php

$count = $conn->prepare("SELECT  *FROM panier");
$count->execute();
$counter = $count->rowcount();
echo '<span class="badge badge-pill badge-danger">'.$counter.'</span>';

Answer 1

Updating an element in the DOM with the HTML of the one called ajax can be done this way

$('#show_result'). html($('#show_result',data).html());

or $('#show_result'). replaceWith($('#show_result',));