11484 sujets

JavaScript, DOM et API Web HTML5

Prise en compte JS après refresh

Bonjour,

Actuellement sur un projet d'études, je rencontre le problème suivant :

Sur PC comme sur téléphone il faut recharger la page après son affichage pour que le JS fonctionne. Des idées de pourquoi du comment ? Merci beaucoup

Voici le code :

<?php
session_start();
include 'config/verif_session.php';
include 'config/db_config.php';
?>
  
<!DOCTYPE HTML>
<html lang="fr">
  
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
    <title>Projet 2020</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/framework.css">
    <link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-all.min.css">
    <script src="https://js.stripe.com/v3"></script>
  
    <link rel="manifest" href="_manifest.json" data-pwa-version="set_by_pwa.html">
    <link rel="apple-touch-icon" sizes="180x180" href="app/icons/icon-192x192.png">
</head>
  
<body class="theme-light" data-background="none" data-highlight="red2">
    <div id="page">
        <div id="page-preloader">
            <div class="loader-main">
                <div class="preload-spinner border-highlight"></div>
            </div>
        </div>
  
        <?php include 'header.php'; ?>
  
        <div class="page-content header-clear-medium">
    
            <div class="content-boxed">
                <div class="content">
                    <h3 class="bolder">Réserver des repas</h3>
                    <p>Ajouter la quantité demandée à chaque produits proposés</p>
                </div>
            </div>
            <div class="content-boxed content-boxed-full">
                <a data-height="150" class="caption round-medium shadow-large bottom-15">
                    <div class="caption-bottom bottom-10 left-20">
                        <h1 class="color-white bolder font-22">Hot dog</h1>
                    </div>
                    <div class="caption-overlay bg-black opacity-60"></div>
                    <div class="caption-bg bg-17"></div>
                </a>
                <div class="content bottom-20">
                    <p class="bottom-15">
                        A small description about your project goes here. Then, you can access the portfolio project to see it in detail.
                    </p>
  
                    <label style="display: inline; font-size: 20px;">Quantité :</label>
                    <input type="number" id="number" placeholder="Entrez ici une quantité" style="font-size: 20px;"/>
  
                    <br><a id="checkout-button-sku_G42UujPjPD8Ojm"role="link" class="close-menu button button-center-small button-s shadow-large button-round-small bg-green1-dark">Paiement</a>
  
  
                </div>
            </div>
  
            <div class="landing-footer">
                <span class="center-text color-theme font-12 opacity-70">Copyright <span class="copyright-year"></span> . All rights Reserved</span>
            </div>
        </div>
  
        <div class="menu-hider"></div>
    </div>
  
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/plugins.js"></script>
    <script type="text/javascript" src="scripts/custom.js"></script>
  
    <script type="text/javascript">
  
            (function() {
              var stripe = Stripe('pk_test_XXXXX');
  
              var checkoutButton = document.getElementById('checkout-button-sku_G42UujPjPD8Ojm');
              checkoutButton.addEventListener('click', function () {
                // When the customer clicks on the button, redirect
                // them to Checkout.
                var value = parseInt(document.getElementById("number").value, 10);
  
                stripe.redirectToCheckout({
                  items: [{sku: 'sku_G42UujPjPD8Ojm', quantity: value}],
  
                  // Do not rely on the redirect to the successUrl for fulfilling
                  // purchases, customers may not always reach the success_url after
                  // a successful payment.
                  // Instead use one of the strategies described in
                  //  https://stripe.com/docs/payments/checkout/fulfillment
 
                  successUrl: 'http://XXX/mail/mail_buy_tickets.php',
                  cancelUrl: 'http://XX',
                  customerEmail: '<?php echo $_SESSION['email']; ?>'
                })
                .then(function (result) {
                  if (result.error) {
                    // If `redirectToCheckout` fails due to a browser or network
                    // error, display the localized error message to your customer.
                    var displayError = document.getElementById('error-message');
                    displayError.textContent = result.error.message;
                  }
                });
              });
            })();
    </script>
</body>

Modifié par hugo41 (07 Mar 2020 - 20:53)
Hello

Tu es sûr que TOUT ton js est pris en compte juste après le refresh ???

ça me parait illogique.

Met des console.log un peu partout pour voir à quel moment il ne s’exécute plus.
Sujet clos
Aller à