CODEWITHSUNDEEP
javascriptpythonjqueryflask
Phani Peri
Phani Peri

Reputation: 13

Flask and jQuery '$' is not defined

I am brand new to programming and I am having trouble interpreting this console error that keeps appearing when I try to create a login page. I have basic login page with email and password inputs and a flask route that displays login page and display input. I have followed a tutorial online to get this working, but I when looking at the console I get the following error: test.js:1 Uncaught ReferenceError: $ is not defined at test.js:1 According to the tutorial this should work. My routes for login and login_submit looks like this

@app.route("/login")
def show_login():
    return render_template("login.html")      

@app.route('/login_submit', methods=['POST'])
def login_submit():
    """Log a user into the website"""

    email = request.form.get('email')
    password = request.form.get('password')

    user = check_user_login_info(email, password)
    print(user)
    
    if (len(user) > 0):
        name = user[0].first_name + ' ' + user[0].last_name
        session['user_id'] = user[0].user_id
        session['cart'] = {}
        return jsonify({'login': name})
    
    return jsonify({'invalid': 'Incorrect email or password'})

And the javascript looks like such

$(document).ready(function() {

    $('form').on('submit', function(event) {

        $.ajax({
            data : {
                name : $('#nameInput').val(),
                email : $('#emailInput').val()
            },
            type : 'POST',
            url : '/login_submit'
        })
        .done(function(data) {

            if (data.error) {
                $('#errorAlert').text(data.login).show();
                $('#successAlert').hide();
            }
            else {
                $('#successAlert').text(data.invalid).show();
                $('#errorAlert').hide();
            }

        });

        event.preventDefault();

    });

});

In my HTML if I add to my form action='/login_submit' method='POST' I get the output of jsonify saying login was successful or invalid The html is very basic and looks like this

<script src="/static/test.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <h2>Log Into Your Account</h2>
  <form >
    <p>
      Email <input type="text" id='emailInput' name="email">
    </p>

    <p>
      Password <input type="password" id='passwordInput' name="password">
    </p>

    <p>
      <button type="submit">Submit</button>
    </p>
  </form>
    <div id="successAlert" role="alert" style="display:none;"></div>
    <div id="errorAlert" role="alert" style="display:none;"></div>

Upvotes: 1

Views: 884

Answers (1)

Harshana
Harshana

Reputation: 5476

It might be due to the placement of the Jquery import in your HTML File. You import jQuery after the test.js file which causes those kinds of errors. Import jQuery at the top and try again.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/test.js"></script> 

  <h2>Log Into Your Account</h2>
  <form >
    <p>
      Email <input type="text" id='emailInput' name="email">
    </p>

    <p>
      Password <input type="password" id='passwordInput' name="password">
    </p>

    <p>
      <button type="submit">Submit</button>
    </p>
  </form>
    <div id="successAlert" role="alert" style="display:none;"></div>
    <div id="errorAlert" role="alert" style="display:none;"></div>

Upvotes: 1

Related Questions