Visualizzazione risultati 1 fino 5 di 5

Discussione: Function JQUERY funziona solo una volta

  1. #1
    talmonefabriano non è connesso Utente AlterBlog
    Data registrazione
    14-09-2019
    Messaggi
    19

    Predefinito Function JQUERY funziona solo una volta

    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

    Codice:
    <?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);
    
    ?>
    Codice HTML:
          <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>
    Codice:
    <?php if (count($products) > 0) : ?>
    <?php
        $i = 1;
    ?>
    Codice HTML:
    <div class="row">
    Codice:
       <?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>";
          }
          ?>
    Codice HTML:
           <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>
    Codice:
        <?php endforeach; ?>
    Codice HTML:
        </div> 
    Codice:
    <?php else : ?>
      <p>Nessun prodotto disponibile...</p>
    <?php endif;?>
    Codice HTML:
    </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>

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!

  3. #3
    talmonefabriano non è connesso Utente AlterBlog
    Data registrazione
    14-09-2019
    Messaggi
    19

    Predefinito

    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.

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Sostituisci:
    Codice:
    function closePopupAdd() {
         document.getElementById("#popupAdd").style.display = "none";
      }
    con:
    Codice:
    function closePopupAdd() {
         document.getElementById("popupAdd").style.display = "none";
      }
    Inoltre, a riga 29 hai:
    Codice:
    <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!
    Ultima modifica di alemoppo : 24-03-2022 alle ore 20.07.59

  5. #5
    talmonefabriano non è connesso Utente AlterBlog
    Data registrazione
    14-09-2019
    Messaggi
    19

    Predefinito

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

    Buona giornata

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •