How to load MongoDB database content 'in place' after bottle-cork login?

Question

Goal

User signs in and, upon successful authorisation, an administration page is loaded (from a MongoDB database) in the same place where the login form was eg:

Login Form > Submit [successful] > Contents Loaded from Database In Same Place Where Form Was

What I've Tried

I think I know most of the 'bits' that would be involved in the solution, but haven't been able to put them all together, for example:

template1.tpl

This is a bottle view that contains jQuery, it uses getJSON() to communicate with a Python file that contains a bottle route that queries a MongoDB database (based on the clicked elements 'href' value) and therefore returns dynamic content:

<script>
function loadContent(href){
$.getJSON("/my_route", {cid: href, format: 'json'}, function(results){  
$("#content_area").html("");
$("#content_area").append(results.content);
});
}
</script>

my_application.py

@route('/my_route')
def my_function():

    # set up connection
    dbname = 'my_db_name'
    connection = pymongo.MongoClient(os.environ['OPENSHIFT_MONGODB_DB_URL'])
    db = connection[dbname]

    # get the data sent from the getJSON() request 
    href = request.GET.cid

    # specify collection based on href value
    if href =="x" or href=="y" or href=="z":
    collection = db.collection1
    elif href=="j":
    collection = db.collection2
    else:
    collection = db.collection3

    # define the query
    query = {'title':href}

    # what to return
    projection = {'_id':0,'content':1}

    cursor = collection.find_one(query,projection)

    response.content_type = 'application/json'
    return dumps(cursor)

Login Function

The bottle route and function that performs the login in bottle utilises bottle-cork and can be seen here. It consists of:

The Form

<form action="login" method="post" name="login">
<input type="text" name="username" />
<input type="password" name="password" />

<br/><br/>
<button type="submit" > OK </button>
<button type="button" class="close"> Cancel </button>
</form>

The Route & Functions

def post_get(name, default=''):
    return bottle.request.POST.get(name, default).strip()

@bottle.post('/login')
def login():
    """Authenticate users"""
    username = post_get('username')
    password = post_get('password')
    aaa.login(username, password, success_redirect='/', fail_redirect='/login')    

In A Nutshell

When I click the 'Submit' button on the form I want to modify the success_redirect value shown in the login function above so that the admin page, as stored in the database, is loaded 'in place' ie where the form is.

I though about somehow redirecting to the my_route function I have already defined (see my_application.py above) and somehow including a dummy href value of admin which would inform the database query but I didn't know how to 1) pass that href value through and 2) make the content load asynchronously in the place where the form was.

Update

The following works as a value of success_redirect (which is using bottle.redirect):

success_redirect='/my_route?cid=%2Fpage-from-db&format=json'

But it just loads the data in json format in its own web page, and not 'in place'.

Answer 1

I worked through and posted one solution here, not sure if it is the most efficient though:

https://stackoverflow.com/a/20117716/1063287

Form

<form name="login" id="login">
<p>username</p>
<p>password</p>
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">login</button>
</form>

jQuery

<script>
$(document).on("submit","#login", function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/login',
data: $(this).serialize(),
dataType: 'json',
success: function(results) {
$("#content_area").html("");
$("#content_area").append(results.content);
}
});
});
</script>

Python

@post('/login')
def login():
    """Authenticate users"""
    username = post_get('username')
    password = post_get('password')
    aaa.login(username, password, fail_redirect='/login')
    dbname = 'mydb'
    connection = pymongo.MongoClient(os.environ['OPENSHIFT_MONGODB_DB_URL'])
    db = connection[dbname]
    collection = db.myCollection
    href = 'my-title'
    query = {'title':href}
    projection = {'_id':0,'content':1}
    cursor = collection.find_one(query,projection)
    response.content_type = 'application/json'
    return dumps(cursor)