I am trying to submit a form from a modal dialog through jQuery. Here
is the view loading the components.

library.py

@auth.requires_login()
def index():
    return dict()

@auth.requires_login()
def add_book():
    return dict(bform = crud.create(db.book),aform =
crud.create(db.author))

@auth.requires_login()
def show():
    books = db().select(db.book.ALL)
    return dict(books=books)

library/index.html

{{extend 'layout.html'}}
<div id="booklist">
{{=LOAD(c='library',f='show.load', ajax=True)}}
</div>
<div id="controls">
{{=LOAD(c='library',f='add_book.load', ajax=True)}}
</div>

library/add_book.load

<script>
$(document).ready(function(){
    $("#add-book").button().click(function() {$("#add-book-
form").dialog("open");});
    $("#add-book-form").dialog({
        autoOpen: false,
        width: 500,
        modal: true,
        buttons: { Cancel:function() { $(this).dialog("close");}}
        });
});
</script>
<button id="add-book">Add a book</button>

<div id="add-book-form" title="Add a book">
<div id="bookform">
{{=bform}}
</div>
</div>
<script>
$(document).ready(function(){
    $("#add-author").button().click(function() {$("#add-author-
form").dialog("open");});
    $("#add-author-form").dialog({
        autoOpen: false,
        width: 500,
        modal: true,
        buttons: { Cancel:function() { $(this).dialog("close");}}
        });
});
</script>
<button id="add-author">Add an author</button>

<div id="add-author-form" title="Add an author">
<div id="authorform">
{{=aform}}
</div>
</div>


The dialog loads correctly, and closes when submit is clicked. However
the data is not submitted into the database.
Please advise on what I am missing, or if you have any ideas on how it
can be improved.

Reply via email to