Flask flash and url_for with AJAX

Question

I am currently stuck on a rather "big" problem, and I will try to be as clear and concise as I can about it. I am developing a tool in Python, using Flask. It's meant to be an intranet. The idea is that I have a client page. There's its name, numerous other infos, and a massive checklist.

The infos are already written in input fields, so that the user just has to edit them there, press enter, and the page is reloaded with the edited information (with a notification, using the flashed messages and growl).

The massive checklist is forcing me to move to a system using AJAX, since I want it to be updated "live" as users tick boxes and enter content in inputs, without reloading the page.

As a consequence, I'm also switching my basic inputs for infos to AJAX, to avoid the reloading of the page.

I've come across two issues :

1. The first one concerns the message flashing feature of Flask.

   I've got a method that updates a client name in the database, flashes a message (success or failure, depending on numerous things), then displays the page again. To avoid the page reload, I'm managing the form submit with AJAX.

   The problem is, my python method will flash messages. And once I'm back on my html page (that has not been reloaded, since it's AJAX), the get_flashed_message function of Jinja2 returns me nothing, since it has not been updated. As a consequence, it's impossible for me to retrieve those flashed messages.

   How can I get these? The only solution I see is getting rid of any usage of flash, and coding my own messages system that I would return from the method, and then treat in javascript. This seems incredibly dumb, since flash is a feature of Flask, and it's made "useless" by AJAX. I feel like I'm missing something.

   (As a note, until now, my flashed messages management is made in my base layout, that calls a template that runs through all messages and displays them as growl notifications)

2. Second issue concerns url_for. Here is my form, for editing the client's name :

<form id="changeClientName" method="POST" action="{{ url_for('clients.edit_client_name', name=client.name) }}" style="display:inline !important;">
    <input type="text" name="name" class="form-control" value="{{ client.name }}" >
    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>

As you can see, the action attribute uses url_for to call the right method to edit the client. My method looks like this:

@mod.route('/edit/<name>/', methods=['POST'])
def edit_client_name(name):
    # code here    

The endspoints before and after an edit to a client name would be /edit/the_client_name and /edit/the_new_client_name as an example. Obviously, once the method has been called, my AJAX has to change this action attribute to replace it with the new URL (in case the user wants to re-edit the name without changing page/reloading the page). And here is my second issue.

The new name is stored in javascript while the action is still the old endpoint. Thus, I have to call url_for using the new name. And I have found no way to pass a Javascript variable to Jinja2.

I want this:

url_for('clients.edit_client_name', name=client.name)

To become this:

url_for('clients.edit_client_name', name=my_javascript_variable_one_way_or_another)

I'll just have to call the javascript function that modifies an attribute of a form, and modify my action attribute with this new url_for. But I have found no way to do this, i.e pass a javascript variable to Jinja2.

---

So here are my two issues. How can I make flash() compatible with AJAX? Also, how can I pass a javascript attribute to Jinja2 ?

The only solutions that I can see would be coding my own messaging system, which would defeat the goal of flash, making it useless with AJAX, which seems stupid, and hardcoding the URL in my templates, which totally defeats the initial interest of Flask making URL independent from methods, and URL changes extremely flexible.

Thanks.

Answer 1

You can write a simple javascript method to replace the functionality of flasks 'flash' method by understanding how flash_message.html is formatted.

function flash(message,category){
   if (category == 'error'){
      var icon='icon-exclamation-sign';
      category='danger';
      }
   else if (category == 'success')
      var icon='icon-ok-sign';
   else
      var icon='icon-info-sign';      
   $('<div class="alert alert-'+category+'"><i class="'+icon+'"></i>&nbsp;<a class="close" data-dismiss="alert">×</a>'+ message +'</div>').prependTo('#maincontent').hide().slideDown();
   $.smoothScroll({
     scrollElement: $('body'),
     scrollTarget: '#mainContent'
   });
}

url_for may be a little trickier,but possible.

Answer 2

I'll take a stab at this, but I'm not sure I understand the problem completely :D. The code below isn't tested, it is more along the lines of pseudocode!

Your first problem is (if I understand you correctly) that you are doing partial updates via ajax, and wanting to fetch the update results later after the partial updates. Instead of fetching update results later, you should return them after each ajax call. So, if you have update code that looks like this:

data = $('#my-form').serialize()
$.post(update_url, data, function (results) {
    // Here you check results.
    if (results.success) {
        $('#update-div').message('Update Success')
    } else {
        $('#update-div').message('Update Failed: ' + results.error_msg)
    }
})

Then your update route would have code similar to this:

from flask import jsonify

@app.route('/partialupdate/<int:userid>', methods=['POST'])
def partial_update(userid):
    try:
        # fetch the user, perform the updates and commit
        return jsonify(success=1)
    except Exception, e:
        return jsonify(success=0, error_msg=str(e))

Your second problem involving URL generation can be fixed by using USERID instead of client name. NEVER use client name for anything other than searches :D. In this case use user id. The user id is typically the primary key for a particular user in a database. If you're not using a database, then generate your own user id's somehow and attach it to a user - it should be a unique number per user. Using a user id means that you can always edit with urls like '/edituser/1'.