javascript - like button in flask using jQuery / json is not working

Question

I'm currently working on a small flask app and trying to make a like button that works without refreshing the page.

Using jQuery seemed to be a way to go so I tried writing some codes, but it doesn't work.(even from the preventDefault() function)

this is my html structure:

<div class="like_buttons{{ subject.id }}">
  {% if current_user.id and current_user.has_liked_subject(subject) %}
    <a href="#" class="like_button" id="unlike_{{ subject.id }}">
      <img src="{{ url_for('static', filename='img/liked.png') }}">
    </a>
  {% else %}
    <a href="#" class="like_button" id="like_{{ subject.id }}">
      <img src="{{ url_for('static', filename='img/unliked.png') }}">
    </a>
  {% endif %}
</div>

and this is my js code to grab user clicking like/unlike button and send data to 'like' route, while preventing the page being refreshed:

$(document).ready(function() {

    $(".like_button").on('click', function(event) {

        event.preventDefault();

        var request_id = $(this).attr('id').split('_');
        var subject_id = request_id[1];
        var action = request_id[0];

        $.ajax({
            url : '/like',
            type : 'POST',
            data : { subject_id : subject_id, action : action }
        });

    });

});

and this is the route that puts like/unlike into database and return data to current page(haven't written codes to return data yet, please do let me know if you know how to do it)

@app.route('/like', methods=['POST'])
def like():
    subject_id = request.form['subject_id']
    action = request.form['action']
    subject = Subject.query.filter_by(id=subject_id).first_or_404()
    if action == 'like':
        current_user.like_subject(subject)
        db.session.commit()
    if action == 'unlike':
        current_user.unlike_subject(subject)
        db.session.commit()
    return jsonify({'result' : 'success'})
    # return render_template('like_button.html')

It seems like jQuery and js file are being linked to the page properly, but when I press like buttons, the page gets refreshed and nothing happens..

Please kindly let me know what is wrong and what I should do. Thanks in advance!

question from:https://stackoverflow.com/questions/65935747/like-button-in-flask-using-jquery-json-is-not-working

Answer 1

So I've found the reason thanks to Axel!

The problem was quite simple, I was importing jQuery after my JS file so my JS file couldn't interpret jQuery language.

I just simply put jQuery script below JS file script and now it works perfectly.

before:

<script type="text/javascript" src="{{ url_for('static', filename='js/like_button.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

after:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/like_button.js') }}"></script>