modal form with ajax submission - is this a good approach?

[Vincent]

Hi,

wanted to ask the community if the approach I am taking is sound. If so this may be of use to others. If not, please tell me the way to do this correctly.

My objective is to have form submission in a modal way (using bootstrap modal).

Here is the approach I am taking, reduced to the simplest case, which works fine but may not be the most elegant:

db.py:

db = DAL('sqlite://storage.sqlite')
db.define_table('person',
    Field('firstname','string'),
    Field('lastname','string'))

default.py

def index():
     button = A("modal form", _href="#myModal", _role="button", _class="btn", **{'_data-toggle':'modal'})
     return dict(button=button)

def modal_form():
    form = SQLFORM(db.person)
    form.element(_type='submit')['_onclick']="jQuery('#myModal').modal('hide')"
    if form.process().accepted:
        response.flash = 'Accepted! %s %s added' %(form.vars.firstname, form.vars.lastname)
    return dict(form=form)

default/index.html

{{extend 'layout.html'}}
{{=button}}
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        {{=LOAD('default','modal_form.load', ajax=True)}}
    </div>
</div>

default/modal_form.load

{{=form}}

any feedback of a better or more modular approach would be appreciated

Ideally, I would like the complete myModal div to be the loaded component but I was not able to figure out how to do this.

Thanks!