Function JQUERY funziona solo una volta

[talmonefabriano]

Salve a tutti.
Sono alle prese con un problema, credo banale, ma che non riesco a risolvere.
Sto sviluppando un e-commerce, inizialmente gestivo le aggiunte al carrello con il metodo POST di PHP e tutto funzionava bene, poi ho deciso di gestirle con delle chiamate Ajax per velocizzare il tutto.
Non essendo un grande esperto di Ajax e Javascript mi sono arrangiato adattando qualche tutorial alle mie esigenze. Fatte tutte le modifiche, l'incremento del carrello funziona bene, ma la popup (o finestra modale) che da la notifica "Prodotto aggiunto al carrello" fine visualizzata solo al primo acquisto: se clicco sul pulsante "Acquista" per comprare un secondo prodotto, la popup di notifica non compare.
Vi inserisco il codice nella speranza che qualcuno più capace di me riesca a capire il problema (in pratica la function displayPopupAdd() viene eseguita solo la prima volta
Grazie in anticipo a tutti

<?php
 
  $cm = new CartManager(); 
   
  if(isset($_GET['page'])) {   
    $a = $_GET['page'];
    if (strpos($a, 'categorie') !== false) {
        $page = $_GET['page'];
        $arr = explode("?", $page, 2);
        $page = $arr[0];
        $id_category = $arr[1];

        $arr = explode("=", $id_category, 2);
        $categoryId = $arr[1];        
     }
  } 
  
  
  $tab = 'category';
  $chiave = ['id' => $categoryId];
  $tabella = new DatabaseTable($pdo, $tab, $chiave);
  $cat = $tabella->SelectByKey($chiave);
  $info_categoria = InfoCategoria($cat);
  $pm = new ProductManager();
  $products = $pm->GetProducts($categoryId);

?>

      <div class="popin" id="popupAdd" style="display:none;">     
        <input id="popin_check_1" type="checkbox" class="popin_check" hidden checked="true" />
          <label class="layer fadeIn" for="popin_check_1"></label>
          <div class="content fadeIn"> 
            <div class="header">Prodotto aggiunto al carrello</div>

            <a class="modal-button" href="="<?php echo ROOT_URL; ?>shop/?page=cart0">Vai al carrello</a>
            <label class="modal-button close" for="popin_check_1" 
                      onlick="closePopupAdd()">Chiudi</label>
          </div>
        </div> 
      </div>

<?php if (count($products) > 0) : ?>
<?php
    $i = 1;
?>

<div class="row">

   <?php foreach($products as $product) : ?>
      <?php 
        $desc_um = um($pdo, $product->id);
	      $desc_um2 = um2($pdo, $product->id);
        $nome_prodotto = $product->name;
        $prezzo = $product->price;
        $stprezzo = number_format($prezzo, 2, ',', '.');
        $qta_mag = $product->qta;
        
        $proimg = $pm->GetProductWithImages($product->id); 

        if($product->qta <= 1){
          $btn="disabled";
          $qta="Qta: Non Disp.";
  
        }else{
          $btn="";
          $qta="Qta: <span class='qta'>".$product->qta . "</span>";
        }

      if($product->qta <= 1){
        $btn="disabled";
        $qta="Qta: Non Disp.";

      }else{
        $btn="";
        $qta="Qta: <span class='qta'>".$product->qta . "</span>";
      }
      ?>

       <div class="catcol-3"> 
         <div class="card altezza product-card" style="border-style: none;"
           <img class="card-img-top" src="<?php echo ROOT_URL ."images/" . $product->immagine ?>" alt="<?php echo $product->name?>">
          <div class="card-body" style=" background-color: #fdf5e0;">
            <h4 class="card-title product-name text-center" ><?php echo stripslashes($product->name); ?></h4>
            <p class="card-text"><?php echo stripslashes($product->metadescription); ?></p>
            <p class="card-text product-price text-center">€ <?php echo $stprezzo ?> <?php echo $desc_um2 ?></p>
            <a class="btn btn-info btn-small" href="<?php echo ROOT_URL; ?>shop/?page=product?id=<?php echo $product->id; ?>">Dettaglio</a>
              <input type="hidden" name="id" value="<?php echo esc_html($product->id); ?>">
              <input data-id="<?php echo esc_html($product->id); ?>" name="add_to_cart" type="submit" 
 class="btn btn-success btn-small" value="Acquista" <?php echo $btn;?>>
          </form>


          </div>                        
         
          <div class="card-footer" style=" background-color: #fdf5e0; border-style: none;">
          
              <a class="btn btn-info btn-small" style="color: #954514; background-color:  #fdf5e0; border-style: none;" href="<?php echo ROOT_URL; ?>shop/?page=product?id=<?php echo $product->id; ?>">Dettaglio</a>
              <input type="hidden" name="id" value="<?php echo esc_html($product->id); ?>">
              <input data-id="<?php echo esc_html($product->id); ?>" name="add_to_cart" type="submit" class="btn btn-success btn-small" style="color: #954514; background-color: #fdf5e0; border-style: none;" value="Acquista">
          
          </div>
       </div>
      </div>

    <?php endforeach; ?>

    </div> 

<?php else : ?>
  <p>Nessun prodotto disponibile...</p>
<?php endif;?>

</div>

<script>
var $document = $(document);
var $productsTable = $('#products-table');
var $spinner = $('#spinner');

$document.ready(function(){  
  $document.find('.product-card input:submit').on('click', addToCart);
  $document.find('.product-card input:submit').on('click', displayPopupAdd);

   function displayPopupAdd()
     {
        { $('#popupAdd').css('display', 'block');}
      //{ $('#aaa').css('display', 'block');}

     }
 });
</script>

<script>
  function closePopupAdd() {
     document.getElementById("#popupAdd").style.display = "none";
  }
</script>

[alemoppo]

Non ho letto approfonditamente il codice, però le funzioni "displayPopupAdd" e "closePopupAdd" visto che l'una fa l'inverso dell'altro, dovrebbero almeno avere la stessa visibilità, poi io utilizzerei le stesse strutture dati per modificare i valori (nella display ha usato jQuery, nella close il nativo dom.

Quindi, sposterei la dichiarazione di "displayPopupAdd" sopra o sotto la closePopupAdd e userei per entrambe il document.getElementById per cambiare le proprietà css.

Se ancora non dovesse funzionare, sarebbe utile una pagina (anche demo) con il codice così da poterla provare "online".

Ciao!

[talmonefabriano]

Grazie, per la risposta. Ho provato a fare come hai suggerito, ma non funziona. Se vuoi fare delle prove "online" ho caricato i file e ho messo un po' di dati sul database. Il test puoi farlo entrando su:
SHOP
Caramelle
Senza Zucchero

Cliccando su "Acquista" l'icona del carrello inserisce e incrementa il valore, mentre la popup di notifica viene visualizzata solo dopo il primo acquisto.
Thanks.

[alemoppo]

Sostituisci:

function closePopupAdd() {
     document.getElementById("#popupAdd").style.display = "none";
  }

con:

function closePopupAdd() {
     document.getElementById("popupAdd").style.display = "none";
  }

Inoltre, a riga 29 hai:

<script src="https://www.talmonefabriano.altervista.org/assets/js/main.js"></script>

Che utilizza jQuery, ma jQuery lo includi solo sotto, a riga 134. Includilo prima di main.js

Ciao!

[talmonefabriano]

Grazie per la collaborazione, però non funziona. Ho come il sospetto che sul secondo acquisto si perda l'ID .

Buona giornata