javascript - Uncaught ReferenceError: $ is not defined python flask

I'm trying to run my JavaScript to just produce alert when the button is clicked on python flask. The problem I am having is i'm having is an error in JS file first line: Uncaught ReferenceError: $ is not defined. Even swapping first $ with jQuery still doesn't work.

My structure is:

app: - main.py
     - static    - js - mainJs.js
                    - lib -  jquery-2.2.4.min.js
                          -  jquery-ui.js

                 - css - stylesheet.css
     - templates - index.html

I am sure I imported everything correctly, since my html file is:

<!DOCTYPE html>
<html>
<head>
    <title>First doc</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stylesheet.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/mainJs.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-2.2.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-ui.js') }}"></script>
</head>
<body>

    {{err}}
    <form id="mentForm" action="/addComment" method="POST">
        <table>
            <tr>
                <td>
                    <textarea id="username" rows="1" cols="50"  name="username"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea rows="4" cols="50" id="textArea" name="thetext"></textarea>
                </td>
            </tr>
        </table>
        <input id="rand" type ="submit" value="Submit" onclick = "substitute()" />
    </form>

    {% for item in Message %}
    <table>
        <tr>
            <td>
                {{item}}
            </td>
        </tr>
    </table>
    {% endfor %}
    <div id="testDiv"> 
    </div>
</body>
</html>

And my JavaScript file is simply:

$(document).ready(function(){
    $("#rand").click(function(){
        window.alert("its working!");
    });
});

My structure is:

app: - main.py
     - static    - js - mainJs.js
                    - lib -  jquery-2.2.4.min.js
                          -  jquery-ui.js

                 - css - stylesheet.css
     - templates - index.html

I am sure I imported everything correctly, since my html file is:

<!DOCTYPE html>
<html>
<head>
    <title>First doc</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stylesheet.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/mainJs.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-2.2.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-ui.js') }}"></script>
</head>
<body>

    {{err}}
    <form id="mentForm" action="/addComment" method="POST">
        <table>
            <tr>
                <td>
                    <textarea id="username" rows="1" cols="50"  name="username"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea rows="4" cols="50" id="textArea" name="thetext"></textarea>
                </td>
            </tr>
        </table>
        <input id="rand" type ="submit" value="Submit" onclick = "substitute()" />
    </form>

    {% for item in Message %}
    <table>
        <tr>
            <td>
                {{item}}
            </td>
        </tr>
    </table>
    {% endfor %}
    <div id="testDiv"> 
    </div>
</body>
</html>

And my JavaScript file is simply:

$(document).ready(function(){
    $("#rand").click(function(){
        window.alert("its working!");
    });
});

Share Improve this question edited Feb 18, 2018 at 15:12 asked Feb 18, 2018 at 15:03 Frisco 751 silver badge9 bronze badges

Use defer attribute on your javascript tag and add it just before closing body <script type="text/javascript" src="yourfile.js" defer></script> – Stack Commented Feb 18, 2018 at 15:13

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

The order you load the.js files matters, as you are referencing $ in your file before loading jquery.

Put your file import, after jquery`s to solve the problem.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744128208a4559713.html

javascript - Uncaught ReferenceError: $ is not defined python flask - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Uncaught ReferenceError: $ is not defined python flask - Stack Overflow

1 Answer 1

相关推荐