Javascript doesn't run on Pythonanywhere

Question

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 :

Also, make sure that you are actually serving your javascript - search in the PythonAnywhere help pages for "static files" — Glenn
– Glenn, Commented Feb 19, 2022 at 10:02
@Dauros I forgot that tool ! I have just edited my post with the error that I have ! — Thib
– Thib, Commented Feb 19, 2022 at 18:08
Could you replace jQuery's http:// with https://? Maybe your browser blocks it if you view your site through https. — Dauros
– Dauros, Commented Feb 19, 2022 at 18:17

Dauros · Accepted Answer · 2022-02-20 06:59:17Z

1

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://.

answered Feb 20, 2022 at 6:59

Dauros

10.7k2 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript doesn't run on Pythonanywhere

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related