Url in browser not updated after call of redirect( url_for('xxx' )) in Flask with jQuery mobile

Question

I have a very simple python program using Flask shown below. It handles a login with a popup and logout. The problem is that the url in the browser is not updated by the redirect(url_for()) call.

@app.route('/')
def index():
    if not 'username' in session:
        # contains a button showing a login popup form with action set to '/login'
        return render_template('welcome.html')
    else:
        # contains a logout button with a href to '/logout'
        return render_template('webapp.html') 


@app.route('/login', methods=['POST'])
def login():
    session['username'] = request.form['username']
    return redirect(url_for('index'))


@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('index'))

When accessing '/' the welcome page is shown. When I click on the button, the login popup is shown and its form action redirects to '/login'. This works and the login() function is called and executed. The redirect as well, but the browser doesn't update the displayed url.

So the webapp page is shown with the /logon url. When I click reload I get an error because it tries to reload /logon while it should reload '/' where it has been redirected.

The same happens with /logout. When the webapp page is shown and I click the logout button, the /logout page is loaded which executes the logout() function and redirects to index. But the url is left to logout.

If I then reload the page, it succeeds because /logout accept the GET method and then the url is updated to / as it should have been in the first place.

I have the impression it is a jQuery mobile issue, but can't find out the problem. From the python and Flask point of view it matches all login examples I could find.

Answer 1

Finally solved it after finishing writing the question.

The problem is caused by jQuery mobile and the missing data-url attribute.

By adding the data-url attribute in the page div the url in the browser is updated and everything works fine.

<div data-role="page" id="welcome" data-url="{{ url_for('index') }}">