Can i reload div automaticly without click events?-CodePudding

i want to togle between 2 carts icon,one display when the cart is empty the second when is not,

<div id="div-icon-cart">
        <span >



        <?php if ( ! WC()->cart->is_empty() ) { ?>
                                

    <img  decoding="async" src="https://txxxx.com/uploads/cart.svg"  alt="" height="20.738" width="17.626">      
                <?php } else{ ?>


<!-- begin snippet: js hide: false console: true babel: false -->

but the problem is that the cart icon doesn't change immediately,i need to refrech the page to upload cart icon. for that i tried to reload div which contains my cart icon

    $document.ready(function(){
        $('#div-icon-cart').load();
        setInterval{fonction(){
            $('#div-icon-cart').load();
        },3000};
    });

but doesn't work and i don't know why.i would be grateful for any help

NB:

i cant trriger an event like onClick.
the right solution for me is to reload div automaticly

CodePudding user response：

It looks like the problem might just be some typos:

$document should be $(document)
{fonction should be (function
},3000}; should be },3000);
there seems to be something wrong with .load(), not sure exactly

$(document).ready(function() {
  $('#div-icon-cart').load();
  setInterval(function() {
    $('#div-icon-cart').load();
  }, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div-icon-cart">
        <span >



        <?php if ( ! WC()->cart->is_empty() ) { ?>
                                

    <img  decoding="async" src="https://txxxx.com/uploads/cart.svg"  alt="" height="20.738" width="17.626">      
                <?php } else{ ?>

CodePudding user response：

Please replace jquery part to this.

  $(document).ready(function(){
        $('#div-icon-cart').load();
        setInterval(fonction(){
            $('#div-icon-cart').load();
        },3000);
  });

CodePudding user response：

Please try this code.

 $(document).ready(function(){
        $('#div-icon-cart').load();
        setInterval(function(){
            $('#div-icon-cart').load();
        },3000);
  });

CodePudding user response：

You can use this code.

Please change your code like this.

$(document).ready(function(){
        $('#div-icon-cart').load();
        setInterval(function(){
            $('#div-icon-cart').load();
        },3000);
  });