CODEWITHSUNDEEP
javascriptflaskpythonanywhere
Thib
Thib

Reputation: 13

Javascript doesn't run on Pythonanywhere

Here is my HTML code with some javascript :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="shortcut icon" href="/static/img/logo_BDS.png" type="image/png">
    <!-- IMPORT JQUERY -->
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- IMPORT SDK LYDIA -->
    <script type="text/javascript" src="/static/LYDIASDK.js"></script>
    <title>Confirm Checkout | BDS</title>
</head>
<body class="bg-gray-50">
    <div class="flex justify-center items-center">
        <div>
            <div class="flex justify-center mt-8 md:mt-36">
                <img src="/static/img/logo_BDS.png" class="h-56" alt="">  
            </div>
    
            <div class="bg-white rounded-lg shadow-lg text-gray-700 space-y-8 px-10 py-6" style="font-family: Avenir;">
                <h2 class="text-center text-rouge-phelma text-3xl">Vérification des informations</h2>
                <h4 class="text-center text-xl">{{nb_tickets}} ticket(s) pour {{ total_price }}€</h4>
                <h4 class="text-center text-xl">Ton numéro de téléphone est le suivant : {{tel_number}}</h4>
                <div class="flex justify-center">
                    <button class="px-3 py-2 bg-rouge-phelma text-white text-xl font-bold rounded-lg focus:ring-2 focus:outline-none focus:ring-rouge-phelma" type="submit" id="paymentButton">Payer via Lydia !</button>
                </div>
                
            </div>
        </div>
    </div>
    <input type="hidden" id="foo" value="{{nb_tickets}}">
    <div class="hidden" id="tel_number">{{tel_number}}</div>
    
    

    <script type="text/javascript">
        $(document).ready(function() {
            // Doit être la référence de la commande chez le marchand.
            var orderRef = new Date();
            // var nb_tickets = document.getElementById("nb-tickets").value;
            // var tel_number = document.getElementById("tel_number").value;
            // var total_price = 2*$('#nb-tickets').val();
        $('#paymentButton').payWithLYDIA({
            amount: $('input#foo').val()*2,
            vendor_token: 'my vendor token',
            recipient: $('div#tel_number').text(),
            browser_success_url : "https://www.ecosia.org/",
            browser_cancel_url  : "https://www.google.fr/",

            message : "blabla",
            orderRef: orderRef.toString(),
        });
        });
    </script>
</body>
</html>

All is working properly on my local dev server but the javascript part doesn't want to run on Pythonanywhere. Does running an app on python anywhere with Flask change from running an app on the Flask local dev server ?

Here's also the error that I have in my Browser console : Error Browser Console

Upvotes: 0

Views: 593

Answers (1)

Dauros
Dauros

Reputation: 10502

It's a Mixed Active Content issue. If you are viewing a site over HTTPS and it has some active content like <script> <iframe> or fetch() making a request to an HTTP endpoint, it will be blocked by default by the modern browsers. On the locahost you are using HTTP, so it's not an issue. So to fix the issue, change jQuery's src from http:// to https://.

Upvotes: 1

Related Questions