Question

I have a project wherein mongodb records are rendered in a browser via Flask. I also have some interactions in the browser that would allow users to update records in the database. So, for instance, click a “Vote for me” link and you can increment a “vote” on the record. That record’s vote tally then would appear next to the “Vote for me link”.

Currently, however, my vote route looks like this, and I have to reload the page to update the vote tally in the browser:

@app.route('/vote_up/<this_record>')
def vote_up(this_record):

    vandalisms.update({'_id':bson.objectid.ObjectId(this_record)}, 
                  {"$inc" : { "votes": 1 }}, upsert=True)

    return redirect("/")

I’ve had a look at the flask documentation for jquery and flask here http://flask.pocoo.org/docs/patterns/jquery/ and understand what’s going on there, but don’t see how to extend that to the case where I want to update the mongodb collection first and then just reload a div or span specifying the new vote rendered from the updated record, e.g.

    <span id='vote_tally'> {{ item.votes }} </span>

What would I have to be doing to include that trip to the db and back to the browser without having to reload the entire page again?

Answer 1

What I do is hook something like this to the click event:

$('#vote_tally').load('/vote_up/3452/');

Where the “ajax” url returns the HTML I want to modify.

@app.route('/vote_up/<this_record>')
def vote_up(this_record):
    if already_voted_for(this_record):
        return """<script type="text/javascript">
                       alert('You can only vote once');
            </script>{0}""".format(count_votes_for(this_record))

    vandalisms.update({'_id':bson.objectid.ObjectId(this_record)}, 
              {"$inc" : { "votes": 1 }}, upsert=True)

    return count_votes_for(this_record)